Kā konvertēt HEX uz HSL?

Vispirms hex kods tiek nolasīts kā sarkanā, zaļā un zilā krāsa (0-255), tad tā pati krāsa tiek pārrakstīta kā tonis, piesātinājums un gaišums. Tonis ir leņķis krāsu ritenī (0-360), piesātinājums parāda, cik spilgta krāsa ir (0-100 %), bet gaišums - cik gaiša tā ir (0-100 %). #3366cc kļūst par hsl(220, 60%, 50%). Šis rīks to izdara uzreiz, kamēr raksti.

Kā lietot

1Ievadi hex kodu. Ieraksti vai ielīmē hex krāsu, piemēram, #3366cc (vai #36c), vai izvēlies to ar krāsu paleti. Simbols # nav obligāts.

2Nolasi HSL vērtību. hsl() virkne, atsevišķas vērtības un dzīvs krāsas priekšskatījums atjaunojas uzreiz rakstīšanas laikā, kopā ar toņa, piesātinājuma un gaišuma skaidrojumu.

3Nokopē vajadzīgo formātu. Uzklikšķini Kopēt pie hsl() virknes vai neapstrādātajām vērtībām. Vajag pretējo virzienu? Ievadi zemāk toni, piesātinājumu un gaišumu, lai atgūtu hex kodu.

Kam noder

Front-end izstrādātāji, kas hex kodu pārveido uz hsl(), lai pielāgotu gaišumu hover un fokusa stāvokļiem, neizvēloties pavisam citu krāsu.

Dizaineri, kas veido krāsu paletes un atstāj toni nemainīgu, bet pakāpeniski maina piesātinājumu un gaišumu, lai no vienas zīmola krāsas iegūtu gaišākus un tumšākus toņus.

Tēmu un dizaina žetonu autori, kas krāsas glabā HSL formātā, jo to ir daudz vieglāk lasīt un rokām pielāgot nekā hex virkni.

Ikviens, kas saskaņo krāsas starp rīkiem, kur vienam vajag hex (Figma, lielākā daļa CSS), bet otram - HSL (SCSS palīgfunkcijas, dažas krāsu sistēmas).

Konvertētājs pieņem visus CSS hex pierakstus: 6 ciparu #3366cc, saīsināto 3 ciparu #36c, kā arī 4 un 8 ciparu formas ar alfa kanālu, ar # vai bez tā. Tas parāda hsl() vai hsla() virkni, atsevišķas vērtības un katras sastāvdaļas skaidrojumu - un vēl rindu apgrieztai HSL uz HEX konversijai, ja vajag tieši pretējo. Viss notiek tavā pārlūkā - bez augšupielādes, bez konta, bez ierobežojumiem.

Biežāk uzdotie jautājumi

Vai šis HEX uz HSL konvertētājs ir bezmaksas?

Jā - tas ir pilnībā bezmaksas, bez reģistrācijas un bez ierobežojumiem. Viss notiek tikai tavā pārlūkā.

Vai manas krāsas kaut kur tiek nosūtītas?

Nē. Konvertēšana notiek ar parastu JavaScript kodu tieši tavā ierīcē - nekas netiek sūtīts uz serveri, un rīks turpina darboties arī bezsaistē, kad lapa jau ielādēta.

Kas ir HSL?

HSL apzīmē toni (hue), piesātinājumu (saturation) un gaišumu (lightness). Tonis ir leņķis no 0 līdz 360 grādiem krāsu ritenī, piesātinājums parāda, cik spilgta ir krāsa, no 0 līdz 100 procentiem, bet gaišums mainās no 0 procentiem (melns) caur tīro krāsu pie 50 procentiem līdz 100 procentiem (balts).

Kā konvertēt hex uz HSL ar roku?

Pārveido hex kodu par sarkano, zaļo un zilo vērtību un katru dali ar 255. Ņem šo trīs vērtību maksimumu un minimumu: gaišums ir to vidējais, piesātinājums ir (max - min) dalīts ar (1 - |2L - 1|), bet tonis izriet no tā, kurš kanāls ir lielākais, pārrēķinot uz 0-360 grādu skalu.

Vai tas atbalsta saīsināto pierakstu, piemēram, #36c?

Jā. CSS saīsinātajā formātā katrs cipars tiek dubultots, tāpēc #36c izvēršas par #3366cc un tiek konvertēts uz hsl(220, 60%, 50%). 4 ciparu forma strādā tāpat, pēdējais cipars norāda alfa kanālu.

Kā rīks apstrādā caurspīdīgumu (HSLA)?

8 ciparu hex kodā alfa vērtība ir kodēta pēdējā ciparu pārī. Šis baits (0-255) tiek dalīts ar 255, lai iegūtu 0-1 alfa vērtību, ko sagaida hsla(), noapaļotu līdz trim cipariem aiz komata - tā #3366cc80 kļūst par hsla(220, 60%, 50%, 0.502).

Vai var konvertēt HSL atpakaļ uz HEX?

Jā. Zem rezultāta izmanto HSL uz HEX rindu: ievadi toni (0-360), kā arī piesātinājumu un gaišumu (0-100 %), un uzreiz saņemsi hex kodu. Vērtības ārpus diapazona tiek automātiski ierobežotas.

Kāpēc HSL ir noderīgāks nekā hex?

HSL ir viegli lasāms cilvēkam: krāsu var padarīt gaišāku, palielinot L, klusināt, samazinot S, vai mainīt tās gammu, mainot H - un tas viss bez hex ciparu minēšanas. Tāpēc tas lieliski der konsekventām paletēm, hover stāvokļiem un dizaina žetoniem.