RGB inoudza skrini kuti ipe chiedza chakadii; HSL inokuratidza kuti ruvara runooneka sei chaizvo. Kushandura machannels matatu kuita hue, saturation uye lightness kunoita kuti ruvara zvive nyore kuchinjwa nemaoko.
Maitiro ekuverenga RGB kuenda ku HSL
- Govera R, G neB ne255 kuti kukosha kwega kwega kuve pakati pe0 ne1.
- Tora maximum uye minimum pakati pezvitatu — avhareji yavo ndiyo lightness L.
- Kana maximum neminimum zvakafanana, ruvara rwuri grey: hue nesaturation zvese zviri 0.
- Kana zvisiri, dhawunirodha S kubva pa spread pakati pe maximum ne minimum, uye verenga H kubva kune chanel iri maximum.
Muenzaniso wakashanda
Chaizvo musimboti. Nekuti H, S neL zvinowanzoratidzwa sezvavanotenderedzwa kuva manhamba akazara, kudzokera zvakare kunogona kushandura chanel neimwe kana nhanho mbiri.
RGB and HSL explained
Chii chinonzi RGB?
RGB inotsanangura ruvara sezviteshi zvitatu zverambi — red, green ne blue — imwe neimwe kubva pa 0 kusvika 255. Inoratidza maitiro anoshanda masikirini: ese matatu pa255 anopa chena, ese pa0 anopa nhema. RGB ndiyo sarudzo yakakodzera paunoda kuverenga nemavara, uye rgba() inowedzera kuvharika pamusoro.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Yakanakira:
- code, canvas, transparency with rgba()
Chii chinonzi HSL?
HSL inopatsanura ruvara kuva hue (0–360° pachatisi chemavara), saturation (kuti riine ruvara zvakadii, 0–100%) uye lightness (kuti rine kupenya kwakadii, 0–100%). Nekuti chimwe nechimwe chikamu chinoenderana nenzira vanhu vanotsanangura ruvara, HSL ndiyo fomati iri nyore pakuvaka tints, shades uye mapaleti anoenderana — nemaoko kana mukodhi.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Yakanakira:
- palettes, tints and shades, theming
RGB to HSL reference table
Mavara eCSS anowanzo shandiswa, akashandurwa kubva kuRGB kuenda kuHSL.
| Ruvara | 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%) |