RGB jgħid lis-skrin kemm dawl għandu joħroġ; HSL jgħidlek kif il-kulur jidher verament. Li tikkonverti t-tliet kanali f’hue, saturation u lightness jagħmel kulur faċli biex tħaddem b’idejn.
Kif taħdem il-konverżjoni RGB għal HSL
- Aqsam R, G u B b’255 biex kull valur ikun bejn 0 u 1.
- Ħu l-massimu u l-minimu mit-tliet — il-medja tagħhom hi l-lightness L.
- Jekk il-massimu u l-minimu huma ugwali, il-kulur hu griż: hue u saturation kollha 0.
- Inkella deriva S mid-differenza bejn il-massimu u l-minimu, u aqra H mill-kanal li hu l-massimu.
Eżempju mwettaq
Eżatt fil-prinċipju. Peress li H, S u L normalment juru mdawrin għal numri sħaħ, il-konverżjoni lura tista’ tgħaddi kanal b’pass jew żewġ passi.
RGB u HSL spjegati
X'inhu RGB?
RGB jiddeskrivi kulur bħala tliet kanali tad-dawl — aħmar, aħdar u blu — kull wieħed minn 0 sa 255. Jipproġetta kif l-iskrins jaħdmu: l-ismija kollha f'255 jagħtu l-abjad, kollha f'0 jagħtu l-iswed. RGB huwa għażla tajba meta għandek bżonn tagħmel kalkoli fuq kulur, u rgba() iżid trasparenza fuq dan.
- Sintassi:
- rgb(R, G, B)
- Firxa:
- 0–255 kull kanal
- L-aħjar għal:
- kodiċi, canvas, trasparenza bi rgba()
X'inhu HSL?
HSL jaqsmu kulur f'ċpar nagħta: hue (0–360° fuq ir-rota tal-kulur), saturation (kemm huwa kulurit, 0–100%) u lightness (kemm hu jiddi, 0–100%). Peress li kull parti tirrifletti kif in-nies jiddeskrivu l-kulur, HSL huwa l-iktar format faċli biex tibni tints, shades u palettes konsistenti — permezz ta' idejn jew fil-kodiċi.
- Sintassi:
- hsl(H, S%, L%)
- Firxa:
- 0–360°, 0–100%, 0–100%
- L-aħjar għal:
- palettes, tints u shades, theming
RGB to HSL reference table
L-aktar kuluri CSS komuni, konvertiti minn RGB għal HSL.
| Kulur | 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%) |