HSL aprašo spalvą taip, kaip apie ją kalba žmonės: kokia spalvinė gama (hue), kiek ryški (saturation), kiek šviesi (lightness). HEX kodo konvertavimas į HSL yra greičiausias būdas gauti spalvą formatu, kurį tikrai gali keisti — šviesinti, nutildyti arba sukurti visą skalę.
Kaip veikia HEX į HSL konvertavimas
- Paversk HEX kodą į RGB ir kiekvieną kanalą padalink iš 255, kad visi trys būtų tarp 0 ir 1.
- Rask didžiausią ir mažiausią iš trijų reikšmių. Jų vidurkis yra šviesis L.
- Tarpas tarp jų lemia sodrumą S: padalink jį iš (2 − max − min) šviesioms spalvoms arba iš (max + min) tamsioms.
- Kanalas, kuriame yra maksimumas, nulemia atspalvį H — raudona 0°, žalia 120°, mėlyna 240° — o kiti du kanalai pozicionuoja atspalvį toje segmento dalyje.
Veikęs pavyzdys
Matematika yra tiksli, bet HSL reikšmės paprastai suapvalinamos iki laipsnių ir procentų. Grįžtant atgal gali pasirodyti vieno ar dviejų RGB žingsnių skirtumas nuo originalo — praktiškai nematomas, bet verta žinoti, jei spalvas konvertuoji daug kartų.
HEX ir HSL paaiškinta
Kas yra HEX?
HEX kodas yra šešiženklis šešioliktainis skaičius, saugantis spalvos raudonos, žalios ir mėlynos kanalus po pradinio #. Kiekviena skaitmenų pora atitinka vieną kanalą nuo 00 (nėra) iki FF (pilnai), todėl tai suteikia tą pačią 16,7 milijono spalvų aprėptį kaip RGB, bet daug trumpesne užrašo forma. HEX yra numatytasis CSS, dizaino įrankių ir prekių ženklo gairių formatas.
- Sintaksė:
- #RRGGBB
- Intervalas:
- 00–FF per kanalą
- Tinka geriausiai:
- CSS, dizaino perdavimas, prekių ženklo gairės
Kas yra HSL?
HSL suskaido spalvą į atspalvį (0–360° spalvų rate), saturaciją (kiek ryški, 0–100%) ir šviesumą (kiek šviesi, 0–100%). Kadangi kiekviena dalis atitinka tai, kaip žmonės apibūdina spalvas, HSL yra lengviausias formatas kurti šviesesnes ar tamsesnes variacijas ir nuoseklias paletes — ranka arba kode.
- Sintaksė:
- hsl(H, S%, L%)
- Intervalas:
- 0–360°, 0–100%, 0–100%
- Tinka geriausiai:
- paletės, atspalviai ir tamsūs/nešviesūs variantai, temingas dizainas
HEX į HSL atnaujinimo lentelė
Dažniausiai sutinkamos CSS spalvos, konvertuotos iš HEX į HSL.
| Spalva | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |