Sinusabi ng RGB sa screen kung gaano karaming liwanag ang ilalabas; sinasabi ng HSL kung ano talaga ang hitsura ng kulay. Ang pag-convert ng tatlong channel sa hue, saturation at lightness ay nagpapadali sa pagmamanipula ng kulay nang mano‑mano.
Paano gumagana ang conversion mula RGB papuntang HSL
- Hatiin ang R, G at B sa 255 para ang bawat halaga ay nasa pagitan ng 0 at 1.
- Kunin ang maximum at minimum ng tatlo — ang average nila ang lightness L.
- Kung magkapareho ang maximum at minimum, kulay‑abo ang kulay: ang hue at saturation ay parehong 0.
- Kung hindi, kunin ang S mula sa agwat ng maximum at minimum, at basahin ang H mula sa channel na may maximum.
Halimbawang gumagana
Eksakto sa prinsipyo. Dahil ang H, S at L kadalasang ipinapakita bilang mga na‑round na buong numero, ang pag-convert pabalik ay maaaring maglipat ng isang channel ng isa o dalawang hakbang.
Ipinaliwanag ang RGB at HSL
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()
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
RGB to HSL reference table
Ang mga pinaka-karaniwang CSS na kulay, naka-convert mula RGB papuntang HSL.
| Kulay | 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%) |