Mas user-friendly ang HSL kapag pumipili ng kulay; ang RGB naman ang ginagamit ng mga screen, canvas API at image code. Itong converter ay nagtatagal ng anumang hue, saturation at lightness na triple at ginagawang eksaktong 0–255 channels.
Paano gumagana ang conversion mula HSL papuntang RGB
- Gawing fraction ang S at L at kalkulahin ang chroma C = (1 − |2L − 1|) × S.
- Hatiin ang hue sa 60 para makita ang segment nito sa color wheel at kalkulahin ang intermediate value X = C × (1 − |(H/60 mod 2) − 1|).
- Italaga ang C, X at 0 sa mga slot ng R, G at B ayon sa nasabing segment.
- Idagdag ang lightness offset na L − C/2 sa lahat ng tatlong channel at i-multiply sa 255.
Halimbawang gumagana
Eksakto ang resulta hanggang sa huling pag-round sa buong channel. Sinusuportahan ang fractional na hue o saturation at simple lang silang mapupunta sa pinakamalapit na RGB triple.
Ipinaliwanag ang HSL at RGB
Ano ang HSL?
Hinahati ng HSL ang kulay sa hue (0–360° sa color wheel), saturation (gaano ka-colorful, 0–100%) at lightness (gaano kabilis o liwanag, 0–100%). Dahil tumutugma ang bawat bahagi sa paraan ng paglalarawan ng kulay ng mga tao, pinakamadaling gamitin ang HSL para bumuo ng tints, shades at pare-parehong palettes — mano-mano o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Saklaw:
- 0–360°, 0–100%, 0–100%
- Pinakamainam para sa:
- palettes, tints and shades, theming
Ano ang RGB?
Ipinapakita ng RGB ang kulay bilang tatlong channel ng ilaw — red, green at blue — bawat isa mula 0 hanggang 255. Ginagaya nito kung paano talaga gumagana ang mga screen: lahat ng tatlo sa 255 ay nagreresulta sa puti, lahat sa 0 ay itim. Tamang piliin ang RGB kapag kailangan mong mag-calculate gamit ang isang kulay, at nagdadagdag ang rgba() ng transparency sa ibabaw.
- Sintaks:
- rgb(R, G, B)
- Saklaw:
- 0–255 per channel
- Pinakamainam para sa:
- code, canvas, transparency with rgba()
HSL to RGB reference table
Ang mga pinaka-karaniwang CSS na kulay, naka-convert mula HSL papuntang RGB.
| Kulay | 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) |