HSL ndiyo nzira iri nyore kusarudza ruvara, RGB ndiyo inoiswa nezvimbudzi, canvas APIs uye kodhi yemifananidzo. Iyi converter inoshandura chero hue, saturation uye lightness triple kuita chaiyo 0–255 channels.
Maitiro ekuverenga HSL kuenda ku RGB
- Shandura S ne L kuita mafraction wobva waverenga chroma C = (1 − |2L − 1|) × S.
- Patsanura hue ne 60 kuti uwane segment yayo pawheel yeruvara wobva waiverenga value yepakati X = C × (1 − |(H/60 mod 2) − 1|).
- Nyoresa C, X uye 0 kuR, G uye B ma slots zvichienderana nesegment iyoyo.
- Wedzera lightness offset L − C/2 kune ese matatu machannels uye wozopamhidza ne255.
Muenzaniso wakashanda
Mhedzisiro yacho yakarurama kusvikira pakupedzisira pakukomberedza kune whole channels. Fractional hue kana saturation zvinotsigirwa uye zvinongoenda kune padhuze RGB triple.
HSL and RGB explained
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
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()
HSL to RGB reference table
Mavara eCSS anowanzo shandiswa, akashandurwa kubva kuHSL kuenda kuRGB.
| Ruvara | 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) |