HSL-ben színt választani kényelmes, de a stylesheet-ek, design átadások és márkaanyagok továbbra is HEX-et használnak. Ez az átalakító bezárja a rést és megadja a hatjegyű kódot bármilyen tónus-telítettség-világosság kombinációhoz.
Hogyan működik a HSL → HEX átalakítás
- Alakítsd százalékból törté: a 60% legyen 0.6.
- Számítsd ki a kromát C = (1 − |2L − 1|) × S — ez mutatja, mennyire távol áll a szín a szürkétől.
- Használd a tónust (hue), hogy elhelyezd a kromát a vörös, zöld és kék csatornákon, majd eltolod mindhárom értéket L − C/2-vel.
- Szorzod meg mindhárom csatornát 255-tel, kerekítsd és írd le két hexadecimális számjegyként.
Példa a gyakorlatban
A kerekítés egyszer történik, az utolsó lépésben, amikor minden csatornát egész 0–255 értékre kerekítünk. Az eredmény a legközelebbi HEX kód az HSL bemenethez, és általában megegyezik azzal, amit egy design eszköz mutat.
HSL és HEX magyarázata
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
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
HSL → HEX referencia táblázat
A leggyakoribb CSS-színek, átalakítva HSL-ról HEX-ra.
| Szín | 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 |