HSL waa hab saaxiibtinimo leh oo lagu doorto midab, halka RGB ay tahay waxa shaashadaha, canvas APIs iyo koodhka sawirrada ay runtii isticmaalaan. Converter-kan waxa uu rogaa isku-darka hue, saturation iyo lightness ee kasta kanaallo sax ah 0–255.
Sida HSL ilaa RGB beddelku u shaqeeyo
- Beddel S iyo L kuwo jajab ahaan ah oo xisaabi chroma C = (1 − |2L − 1|) × S.
- Qaybi hue-ga 60 si aad u hesho segment-kiisa wareegga midabka oo xisaabi qiimaha dhexe X = C × (1 − |(H/60 mod 2) − 1|).
- U qoondee C, X iyo 0 meelaha R, G iyo B iyadoo loo eegayo segment-kaas.
- Ku dar offset-ka lightness L − C/2 saddexda kanaal oo dhan oo ku dhufo 255.
Tusaale shaqeeyay
Natiijadu waa sax ilaa wareejinta ugu dambeysa ee la rogayo kanaallo buuxa. Hue ama saturation jajab ah waa la taageeraa waxayna si fudud uga dhigaan RGB tripleka ugu dhow.
HSL iyo RGB sharaxan
Waa maxay HSL?
HSL waxa uu u kala qaybiyaa midabka hue (0–360° wareegga midabka), saturation (inta uu midabka badan yahay, 0–100%) iyo lightness (inta uu dhalaalayo, 0–100%). Maaddaama qayb kasta ay la jaanqaado sida dadka u tilmaamaan midabka, HSL waa qaabka ugu fudud ee lagu dhiso tints, shades iyo palettes isku mid ah — gacanta ama koodh ahaan.
- Nidaamka qoraalka:
- hsl(H, S%, L%)
- Xadka:
- 0–360°, 0–100%, 0–100%
- Ku habboon:
- palettes, tints iyo shades, theming
Waa maxay RGB?
RGB wuxuu sharraxayaa midab sida saddex kanaal oo iftiin ah — casaanka, cagaaran iyo buluug — midkiiba 0 ilaa 255. Waxay ka tarjumaysaa sida shaashaduhu dhab ahaantii u shaqeeyaan: saddexduba marka ay 255 yihiin waxay bixiyaan caddaan, dhammaantood marka ay 0 yihiin waxay bixiyaan madow. RGB waa doorashada saxda marka aad u baahan tahay inaad xisaabiso midabka, waxaana rgba() ku darayaa hufnaan dheeraad ah.
- Nidaamka qoraalka:
- rgb(R, G, B)
- Xadka:
- 0–255 per channel
- Ku habboon:
- koodh, canvas, hufnaan leh rgba()
HSL ilaa RGB jadwal tixraac
Midabada CSS ee ugu caansan, laga beddelay HSL ilaa RGB.
| Midab | 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) |