HSL përshkruan një ngjyrë ashtu si e përshkruajnë njerëzit: çfarë hiri, sa ngjyrë, sa e ndritshme. Konvertimi i një kodi HEX në HSL është mënyra më e shpejtë për ta sjellë një ngjyrë në një formë që mund ta rregullosh — zbukuro, zbut, ose ndërto një shkallë të tërë prej saj.
Si funksionon konvertimi HEX në HSL
- Kthe kodin HEX në RGB dhe ndaj çdo kanali me 255, në mënyrë që të tre vlerat të jenë midis 0 dhe 1.
- Gjej vlerën më të madhe dhe më të vogël nga tri vlerat. Mesatarja e tyre është ndriçimi L.
- Shtrirja midis tyre përcakton ngopjen S: ndaj atë me (2 − max − min) për ngjyra të ndritshme, ose me (max + min) për ngjyra të errëta.
- Kanalit që mban maksimumin i përket hiri H — i kuq në 0°, i gjelbër në 120°, i kaltër në 240° — dhe dy kanalet e tjera pozicionojnë hirin brenda asaj pjese.
Shembull i punuar
Llogaritjet janë të sakta, por vlerat HSL zakonisht rrumbullohen në grade të plota dhe përqindje. Konvertimi mbrapsht mund të lërë një ose dy hapa RGB larg origjinalit — e padukshme në praktikë, por e rëndësishme nëse bën rreze-rrethore konvertimesh shpesh.
HEX dhe HSL shpjeguara
Ç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
Ç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
tabelë referimi HEX në HSL
Ngjyrat më të zakonshme CSS, të konvertuara nga HEX në HSL.
| Ngjyrë | 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%) |