Krāsas izvēle HSL ir ērta, bet stila lapas, dizaina nodošanas un zīmola dokumenti joprojām darbojas ar HEX. Šis konvertors aizpilda plaisu un dod sešu zīmju kodu jebkurai tonim, piesātinājumam un gaišumam.
Kā darbojas HSL uz HEX konvertēšana
- Pārvērt piesātinājumu un gaišumu par daļskaitļiem: 60% kļūst par 0.6.
- Aprēķini kroma C = (1 − |2L − 1|) × S — tas rāda, cik tālu krāsa atrodas no pelēkajiem toņiem.
- Ar toni novieto šo kromu uz sarkanā, zaļā un zilā kanāla, pēc tam visu trīs kanālus nobīdī ar L − C/2.
- Reizinā katru kanālu ar 255, noapaļo un ieraksti kā divus heksadecimālos ciparus.
Praktisks piemērs
Noapaļošana notiek tikai pēdējā solī, kad katrs kanāls tiek piespiests veselam 0–255 diapazonam. Rezultāts ir tuvākais HEX kods tavai HSL ievadei un parasti sakrīt ar to, ko rāda dizaina rīks.
HSL un HEX izskaidrojums
Kas ir HSL?
HSL sadala krāsu toņos (0–360° krāsu ritenī), piesātinājumā (cik krāsaina, 0–100%) un gaišumā (cik spilgta, 0–100%). Tā kā katra daļa atbilst tam, kā cilvēki apraksta krāsu, HSL ir visvienkāršākais formāts tintiņu, nokrāsu un konsekventu paletju veidošanai — gan manuāli, gan kodā.
- Sintakse:
- hsl(H, S%, L%)
- Diapazons:
- 0–360°, 0–100%, 0–100%
- Vislabāk piemērots:
- paletes, tintiņas un nokrāsas, tēmu veidošana
Kas ir HEX?
HEX kods ir sešciparu heksadecimāls skaitlis, kas aiz vadības zīmes # glabā krāsas sarkanās, zaļās un zilās kanāla vērtības. Katra ciparu pāris attēlo vienu kanālu no 00 (nav) līdz FF (pilna), kas dod tos pašus 16.7 miljonus krāsu kā RGB, bet īsākā pierakstā. HEX ir noklusējums CSS, dizaina rīkos un zīmola vadlīnijās.
- Sintakse:
- #RRGGBB
- Diapazons:
- 00–FF per channel
- Vislabāk piemērots:
- CSS, dizaina nodošana, zīmola vadlīnijas
HSL uz HEX atsauces tabula
Visizplatītākās CSS krāsas, konvertētas no HSL uz HEX.
| Krāsa | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |