HSL është mënyra miqësore për të zgjedhur një ngjyrë, RGB është ajo që ekrane, API-të e canvas dhe kodi i imazheve përdorin në të vërtetë. Ky konvertues kthen çdo tripletë të hue, saturation dhe lightness në kanale të sakta 0–255.
Si funksionon konvertimi HSL në RGB
- Kthe S dhe L në fraksione dhe llogarit kromën C = (1 − |2L − 1|) × S.
- Përqaji hue-n me 60 për të gjetur segmentin e tij në rrotën e ngjyrave dhe llogarit vlerën e ndërmjetme X = C × (1 − |(H/60 mod 2) − 1|).
- Cakto C, X dhe 0 në vendet R, G dhe B sipas atij segmenti.
- Shto zbritjen e lightness L − C/2 në të tre kanalet dhe shumëzo me 255.
Shembull i punuar
Rezultati është i saktë deri te rrumbullakosja përfundimtare në kanale të plota. Vlerat fraksionale të hue ose saturation mbështeten dhe thjesht bien në tripletën RGB më të afërt.
HSL dhe RGB 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ë 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()
tabelë referimi HSL në RGB
Ngjyrat më të zakonshme CSS, të konvertuara nga HSL në RGB.
| Ngjyrë | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |