Ang HSL maayo gamiton sa pagpili og kolor, samtang ang RGB mao’y gigamit sa screen, canvas APIs ug image code. Kini nga converter moturn sa bisan unsang hue, saturation ug lightness nga tulo ngadto sa eksaktong 0–255 nga mga channel.
Giunsa pagtrabaho ang konbersyon gikan sa HSL ngadto sa RGB
- I-convert ang S ug L ngadto sa fractions ug kwentaha ang chroma C = (1 − |2L − 1|) × S.
- Bahina ang hue pinaagi sa 60 aron makita ang segment niini sa color wheel ug kwentaha ang intermediate value X = C × (1 − |(H/60 mod 2) − 1|).
- I-assign ang C, X ug 0 sa mga slots sa R, G ug B sumala sa maong segment.
- Idugang ang lightness offset L − C/2 sa tanang tulo ka channel ug i-multiply sa 255.
Gihimong pananglitan
Eksakto ang resulta hangtod sa katapusang pag-rounding ngadto sa whole channels. Gisuportahan ang fractional nga hue o saturation ug mosulod lang sa labing duol nga RGB triple.
HSL ug RGB gipatin-aw
Unsa ang HSL?
Ang HSL nagbahin sa usa ka kolor ngadto sa hue (0–360° sa color wheel), saturation (kung unsa ka kolorful, 0–100%) ug lightness (kung unsa ka hayag, 0–100%). Tungod kay ang matag bahin mohaom sa paagi sa paghulagway sa kolor sa tawo, ang HSL mao ang pinakasayon nga format para sa paghimo og tints, shades ug konsistenteng palettes — manwal o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Pinakamaayo para sa:
- palettes, tints and shades, theming
Unsa ang RGB?
Ang RGB naghulagway sa usa ka kolor isip tulo ka channels sa suga — red, green ug blue — matag usa gikan 0 hangtod 255. Kini nagpadayag sa aktuwal nga pagtrabaho sa mga screen: kung tanang tulo 255, puti; kung tanang tulo 0, itom. Ang RGB ang husto nga pili-on kung kinahanglan nimo magkwenta gamit ang kolor, ug ang rgba() mopuno ug transparency ibabaw niini.
- Sintaks:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Pinakamaayo para sa:
- code, canvas, transparency with rgba()
HSL ngadto sa RGB reference nga lamesa
Ang kasagarang CSS nga mga kolor, gikombertir gikan sa HSL ngadto sa RGB.
| Kolor | 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) |