Ang RGB nagsulti sa screen kung pila ka light ang i-emit; ang HSL nagsulti kanimo unsa jud tan-awon ang kolor. Ang pag-convert sa tulo ka channels ngadto sa hue, saturation ug lightness naghimo sa kolor nga sayon i-adjust sa kamot.
Giunsa pagtrabaho ang konbersyon gikan sa RGB ngadto sa HSL
- Bahinon ang R, G ug B sa 255 aron ang matag value magpabilin tali sa 0 ug 1.
- Kuhaa ang maximum ug minimum sa tulo — ang ilang average mao ang lightness L.
- Kung ang maximum ug minimum parehas, ang kolor grey: ang hue ug saturation pareho 0.
- Kung dili, kuhaa ang S gikan sa gilapdon tali sa maximum ug minimum, ug basa ang H gikan sa channel nga mao ang maximum.
Gihimong pananglitan
Eksakto sa prinsipyo. Tungod kay ang H, S ug L kasagarang gipakita nga gi-round ngadto sa whole numbers, ang pag-convert pabalik mahimo’g mo-shift ang usa ka channel ug usa o duha ka steps.
RGB ug HSL gipatin-aw
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()
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
RGB ngadto sa HSL reference nga lamesa
Ang kasagarang CSS nga mga kolor, gikombertir gikan sa RGB ngadto sa HSL.
| Kolor | 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%) |