HSL er vinsamlegur leiðarvísir til að velja lit, RGB er það sem skjáir, canvas-API og myndakóði nota í raun. Þessi breytir snýr hvaða tón, mettun og ljósleiðni-tríó í nákvæm 0–255 rásagildi.
Hvernig HSL í RGB umbreyting virkar
- Breyttu S og L í brot og reiknaðu chroma C = (1 − |2L − 1|) × S.
- Deildu tónum H með 60 til að finna hluta þeirra á litahjólinu og reiknaðu milligildi X = C × (1 − |(H/60 mod 2) − 1|).
- Úthlutaðu C, X og 0 í R, G og B sæti í samræmi við þann hluta.
- Bættu ljósleiðni-offsetinu L − C/2 við allar þrjár rásir og margfaldaðu með 255.
Dæmi sem virkaði
Niðurstaðan er nákvæm fyrir utan lokaávölun til heilla rása. Hlutfallsleg tóna- eða mettunargildi eru studd og lenda einfaldlega á næstu RGB-þrennu.
HSL og RGB útskýrt
Hvað er HSL?
HSL skiptir lit í litstefnu (0–360° á litahring), mettun (hversu litríkur, 0–100%) og ljósleika (hversu bjartur, 0–100%). Þar sem hver hluti passar við hvernig fólk lýsir lit, er HSL auðveldasta formið til að byggja litasamstæður, ljósari- eða dekkri útgáfur og samræmdar pallettur — handvirkt eða í kóða.
- Syntaks:
- hsl(H, S%, L%)
- Gildi:
- 0–360°, 0–100%, 0–100%
- Best fyrir:
- pallettur, ljósari og dekkri tónar, þemu
Hvað er RGB?
RGB lýsir lit sem þrjár ljósrásir — rauð, græn og blá — hver frá 0 til 255. Þetta endurspeglar hvernig skjár virkar: allar þrjár í 255 gefa hvítt, allar í 0 gefa svart. RGB er rétta valið þegar þú þarft að reikna með lit — t.d. að hreyfa eina rás, blanda litum í kóða, eða bæta gegnsæi með rgba().
- Syntaks:
- rgb(R, G, B)
- Gildi:
- 0–255 per channel
- Best fyrir:
- kóði, canvas, gegnsæi með rgba()
HSL í RGB yfirlitstafla
Algengustu CSS-litirnir, umbreyttir frá HSL í RGB.
| Litur | 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) |