HSL bụ ụzọ enyi na enyi ịhọrọ agba, RGB bụ ihe ihuenyo, canvas APIs na koodu onyonyo na-eji. Onye ntụgharị a na-agbanwe ụdị atọ hue, saturation na lightness ọ bụla gaa n'otu ụzọ ziri ezi nke ọwa 0–255.
Olee otú HSL gaa RGB si arụ ọrụ
- Gbanwee S na L ka ha bụrụ fractions ma gụọ chroma C = (1 − |2L − 1|) × S.
- Kewaa hue site na 60 iji chọta segment ya n'ọkpọ agba ma gụọ uru etiti X = C × (1 − |(H/60 mod 2) − 1|).
- Tinye C, X na 0 n’ọkwá R, G na B dabere na segment ahụ.
- Tinye offset lightness L − C/2 na ọwa niile atọ ma gbaa ya ugboro 255.
Nke gosiri otu esi eme ya
Nsonaazụ ahụ ziri ezi ruo mgbe rounding ikpeazụ na ọwa zuru ezu. Values hue ma ọ bụ saturation nwere fraction na-akwado ma ha na-da na RGB triple kacha nso.
HSL na RGB kọwara
Gịnị bụ HSL?
HSL kewapụtara agba n'ime hue (0–360° na igwe agba), saturation (ogologo agba, 0–100%) na lightness (oke ìhè, 0–100%). N'ihi na akụkụ ọ bụla dakọtara na otú mmadụ si kọwaa agba, HSL bụ usoro kacha mfe maka iwulite tints, shades na palettes dị mma — n'aka ma ọ bụ n'ime koodu.
- Sintaksị:
- hsl(H, S%, L%)
- Ókè:
- 0–360°, 0–100%, 0–100%
- Kasị mma maka:
- palettes, tints na shades, theming
Gịnị bụ RGB?
RGB na-akọwa agba dịka ọwa ìhè atọ — uhie, akwụkwọ ndụ na anụnụ anụnụ — nke ọ bụla site na 0 ruo 255. Ọ na-egosi otú ihuenyo si arụ ọrụ n’eziokwu: mgbe atọ ahụ dị na 255 ị nwere ọcha, mgbe niile nọ na 0 ị nwere ojii. RGB bụ nhọrọ ziri ezi mgbe ịchọrọ ịgbakọ na agba, na rgba() na-agbakwunye ịdịgboroja n'elu.
- Sintaksị:
- rgb(R, G, B)
- Ókè:
- 0–255 per channel
- Kasị mma maka:
- koodu, canvas, ịdịgboroja na rgba()
HSL gaa RGB tebụl ntụaka
Agba CSS a na-ahụkarị, tọgharịrị site na HSL gaa RGB.
| Agba | 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) |