Zgjedhja e një ngjyre në HSL është e rehatshme, por stylesheet-et, dorëzimet e dizajnit dhe dokumentet e markës ende përdorin HEX. Ky konvertues mbyll atë hendek dhe të jep kodin gjashtëshifror për çdo kombinim hiri, ngopjeje dhe ndriçimi.
Si funksionon konvertimi HSL në HEX
- Kthe ngopjen dhe ndriçimin në fraksione: 60% bëhet 0.6.
- Llogarit kromën C = (1 − |2L − 1|) × S — kjo tregon sa larg ngjyra është nga e kuqërta (gri).
- Përdor hirin për të vendosur atë kromë në kanalet e kuq, jeshil dhe blu, pastaj zhvendos të treja me L − C/2.
- Shumëzo çdo kanal me 255, rrumbullo, dhe shkruaje si dy shifra hexadecimale.
Shembull i punuar
Rrumbullosja ndodh njëherë, në hapin e fundit, kur çdo kanal fiksohet në një vlerë të plotë 0–255. Rezultati është kodi HEX më i afërt me hyrjen tënde HSL dhe zakonisht i njëjtë me atë që tregon një mjet dizajni.
HSL dhe HEX shpjeguara
Çfarë është HSL?
HSL ndan një ngjyrë në hue (0–360° në rrotën e ngjyrave), saturation (sa e ngjyrshme, 0–100%) dhe lightness (sa e ndritshme, 0–100%). Sepse secila pjesë i përgjigjet mënyrës si njerëzit përshkruajnë ngjyrën, HSL është formati më i lehtë për të ndërtuar tintat, hijet dhe paletat konsistente — me dorë ose në kod.
- Sintaksa:
- hsl(H, S%, L%)
- Dhe:
- 0–360°, 0–100%, 0–100%
- Më i mirë për:
- paleta, tintat dhe hijet, tematizim
Çfarë është HEX?
Një kod HEX është një numër heksadecimal gjashtë-shifror që ruan kanalin e kuq, jeshil dhe blu të një ngjyre pas një # përpara. Çdo çift shifrash mbulon një kanal, nga 00 (asnjë) deri në FF (plot), gjë që jep të njëjtat 16.7 milion ngjyra si RGB por në një notacion më të shkurtër. HEX është parazgjedhja në CSS, mjetet e dizajnit dhe udhëzimet e markës.
- Sintaksa:
- #RRGGBB
- Dhe:
- 00–FF për kanal
- Më i mirë për:
- CSS, dorëzim dizajni, udhëzime marke
tabelë referimi HSL në HEX
Ngjyrat më të zakonshme CSS, të konvertuara nga HSL në HEX.
| Ngjyrë | 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 |