RGB inaambia skrini ni mwanga gani uitokeze; HSL inakuonyesha rangi inaonekana vipi. Kubadilisha channel tatu kuwa hue, saturation na lightness hufanya rangi iwe rahisi kurekebisha kwa mkono.
Jinsi uongozaji wa RGB hadi HSL unavyofanya kazi
- Gawanya R, G na B kwa 255 ili kila thamani iwe kati ya 0 na 1.
- Chukua kubwa zaidi na ndogo zaidi ya tatu — wastani wao ni lightness L.
- Kama kubwa na ndogo ni sawa, rangi ni kijivu: hue na saturation zote ni 0.
- Vinginevyo toa S kutoka kwa tofauti kati ya kubwa na ndogo, na soma H kutoka kwenye channel ambayo ndiyo kubwa.
Mfano uliofanya kazi
Sahihi kwa kanuni. Kwa sababu H, S na L kawaida zinaonyeshwa kama nambari zilizozungushwa, kubadilisha tena kunaweza kusogeza channel kwa hatua moja au mbili.
RGB na HSL obofye
Ni nini RGB?
RGB inaelezea rangi kama channel tatu za mwanga — red, green na blue — kila moja kutoka 0 hadi 255. Inaakisi jinsi skrini zinavyofanya kazi kwa kweli: zote tatu kwa 255 zinaipa nyeupe, zote kwa 0 zinaipa nyeusi. RGB ni chaguo sahihi wakati unahitaji kufanya hesabu na rangi, na rgba() inaongeza uwazi juu yake.
- Sintaksia:
- rgb(R, G, B)
- Wigo:
- 0–255 kwa kila channel
- Bora kwa:
- code, canvas, uwazi na rgba()
Ni nini HSL?
HSL inaigawanya rangi katika hue (0–360° kwenye gurudumu la rangi), saturation (ukali wa rangi, 0–100%) na lightness (uwazi/angaza, 0–100%). Kwa kuwa kila sehemu inafanana na jinsi watu wanavyotoa sifa za rangi, HSL ni muundo rahisi zaidi kwa kujenga tints, shades na paleti zenye muendelezo — kwa mkono au kwa code.
- Sintaksia:
- hsl(H, S%, L%)
- Wigo:
- 0–360°, 0–100%, 0–100%
- Bora kwa:
- paleti, tints na shades, theming
RGB to HSL reference table
Rangi za CSS zinazotumika zaidi, zimetumika kutoka RGB hadi HSL.
| Rangi | 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%) |