HSL ni njia rafiki ya kuchagua rangi, RGB ndicho skrini, API za canvas na msimbo wa picha zinavyokula. Mbadalishaji huyu hubadilisha hue, saturation na lightness kuwa chaneli halisi za 0–255.
Jinsi uongozaji wa HSL hadi RGB unavyofanya kazi
- Badilisha S na L kuwa sehemu (fractions) na hesabu chroma C = (1 − |2L − 1|) × S.
- Gawanya hue kwa 60 kupata sekimenti yake kwenye gurudumu la rangi na hesabu thamani ya kati X = C × (1 − |(H/60 mod 2) − 1|).
- Weka C, X na 0 kwenye nafasi za R, G na B kulingana na sekimenti hiyo.
- Ongeza kipengele cha lightness L − C/2 kwenye chaneli zote tatu kisha ziongeze kwa 255.
Mfano uliofanya kazi
Matokeo ni sahihi hadi hatua ya mwisho ya kuzungusha hadi chaneli kamili. Thamani za fractional kwa hue au saturation zinaungwa mkono na zitapangwa kwenye triple ya RGB iliyo karibu zaidi.
HSL na RGB obofye
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
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()
HSL to RGB reference table
Rangi za CSS zinazotumika zaidi, zimetumika kutoka HSL hadi RGB.
| Rangi | 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) |