RGB waxay shaashadda u sheegtaa inta iftiin la shido; HSL waxay kuu sheegtaa sida midabka dhab ahaan u muuqdo. Beddelidda saddexda kanaal hue, saturation iyo lightness waxay midabka ka dhigtaa mid si sahlan gacanta loogu hagaajin karo.
Sida RGB ilaa HSL beddelku u shaqeeyo
- U qaybso R, G iyo B 255 si qiime kasta u yeesho qiime u dhexeeya 0 iyo 1.
- Qaado qiimaha ugu sarreeya iyo kii ugu hooseeya ee saddexda — celceliskoodu waa iftiinka L.
- Haddii ugu sarreeya iyo ugu hooseeya ay isku mid yihiin, midabku waa cawl: hue iyo saturation labaduba waa 0.
- Haddii kalena ka soo qaad S iyadoo laga soo xisaabiyo kala firdhinta u dhaxaysa ugu sarreeya iyo ugu hooseeya, H-na ka akhri kanaalka haysta qiimaha ugu sarreeya.
Tusaale shaqeeyay
Sidoo kale waa sax mabda'a ahaan. Maaddaama H, S iyo L badanaa loo soo bandhigo tirooyin la dhawaajiyey, marka dib loogu rogo waxaa dhici karta in kanaal uu hal ama laba talaabo ka beddelo.
RGB iyo HSL sharaxan
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()
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
RGB ilaa HSL jadwal tixraac
Midabada CSS ee ugu caansan, laga beddelay RGB ilaa HSL.
| Midab | 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%) |