RGB tregon një ekrani sa dritë të emetojë; HSL të tregon se si duket ngjyra. Konvertimi i tre kanaleve në hir, ngopje dhe ndriçim e bën një ngjyrë të lehtë për t’u rregulluar manualisht.
Si funksionon konvertimi RGB në HSL
- Përndaje R, G dhe B me 255 në mënyrë që çdo vlerë të jetë midis 0 dhe 1.
- Merr maksimumin dhe minimumin e treve — mesatarja e tyre është ndriçimi L.
- Nëse maksimumi dhe minimumi janë të barabartë, ngjyra është gri: hiri dhe ngopja janë të dy 0.
- Përndryshe nxirr S nga shtrirja midis maksimumit dhe minimumit, dhe lexo H nga kanali që është maksimum.
Shembull i punuar
Saktë në parim. Për shkak se H, S dhe L zakonisht shfaqen si numra të rrumbullakosur, konvertimi mbrapsht mund të zhvendosë një kanal me një ose dy hapa.
RGB dhe HSL shpjeguara
Çfarë është RGB?
RGB përshkruan një ngjyrë si tre kanale drite — të kuqe, jeshile dhe blu — secili nga 0 deri në 255. Ai pasqyron mënyrën se si punojnë ekranet: të tre në 255 japin të bardhë, të gjithë në 0 japin të zezë. RGB është zgjedhja e duhur kur duhet të bësh llogaritje me një ngjyrë, dhe rgba() shton transparencë mbi të.
- Sintaksa:
- rgb(R, G, B)
- Dhe:
- 0–255 për kanal
- Më i mirë për:
- kod, canvas, transparencë me rgba()
Ç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 RGB në HSL
Ngjyrat më të zakonshme CSS, të konvertuara nga RGB në HSL.
| Ngjyrë | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |