Az HSL úgy írja le a színt, ahogy az emberek beszélnek róla: milyen tónus, mennyire színes, mennyire világos. Egy HEX kód HSL-be alakítása a gyors módja annak, hogy olyan formát kapj, amin tényleg tudsz finomítani — világosítani, tompítani vagy akár skálát építeni belőle.
Hogyan működik a HEX → HSL átalakítás
- Alakítsd át a HEX kódot RGB-vé és oszd el mindhárom csatornát 255-tel, hogy mindhárom érték 0 és 1 közé essen.
- Találd meg a három érték közül a legnagyobbat és a legkisebbet. Ezek átlaga adja a világosságot L.
- A közöttük lévő különbség határozza meg a telítettséget S: világos színeknél oszd el (2 − max − min)-nel, sötéteknél (max + min)-nel.
- Az a csatorna, amelyik a maximumot tartja, dönti el a tónust H — a vörös 0°, a zöld 120°, a kék 240° — a másik két csatorna pedig belül pozícionálja a tónust az adott szegmensben.
Példa a gyakorlatban
A számítás pontos, de az HSL értékeket általában fokokra és százalékokra kerekítik. Visszaalakításnál ezért előfordulhat, hogy egy-két RGB lépéssel eltér a végeredmény az eredetitől — ez gyakorlatban láthatatlan, de érdemes tudni, ha többször körbealakítasz színeket.
HEX és HSL magyarázata
Mi az a HEX?
A HEX kód egy hat számjegyű hexadecimális szám, amely a szín vörös, zöld és kék csatornáját tárolja egy vezető # mögött. Minden kétjegyű pár egy csatornát fed le 00-tól (nincs) FF-ig (teljes), így ugyanazt a 16,7 millió színt adja, mint az RGB, jóval tömörebb jelölésben. A HEX alapértelmezett a CSS-ben, design eszközökben és márkaelvekben.
- Szintaxis:
- #RRGGBB
- Tartomány:
- 00–FF csatornánként
- Legjobb erre:
- CSS, design átadás, márkaelvek
Mi az a HSL?
A HSL a színt három részre bontja: hue (0–360° a színségen), saturation (mennyire színes, 0–100%) és lightness (mennyire világos, 0–100%). Mivel minden rész megfelel annak, ahogy az emberek a színt leírják, a HSL a legegyszerűbb formátum árnyalatok, tónusok és egységes paletták kézi vagy kód alapú létrehozásához.
- Szintaxis:
- hsl(H, S%, L%)
- Tartomány:
- 0–360°, 0–100%, 0–100%
- Legjobb erre:
- paletták, tónusok és árnyalatok, témázás
HEX → HSL referencia táblázat
A leggyakoribb CSS-színek, átalakítva HEX-ról HSL-ra.
| Szín | 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%) |