HSL ke tsela e bonolo ea ho khetha 'mala, RGB ke seo lisele tsa skrini, canvas APIs le khoutu ea setšoantšo li se sebelisang. Mohlophisi ona o fetola leha e le efe hue, saturation le lightness ho ba litesita tse nepahetseng tsa 0–255.
Mokhoa oa ho fetoha ho tloha HSL ho ea ho RGB
- Fetolela S le L hore e be likarolo (fractions) 'me u bale chroma C = (1 − |2L − 1|) × S.
- Arola hue ka 60 ho fumana sekhense (segment) ea wheel ea 'mala 'me u baloe boleng bo pakeng tsa X = C × (1 − |(H/60 mod 2) − 1|).
- Arolelana C, X le 0 ho li-slot tsa R, G le B ho latela segment eo.
- Kenya offset ea lightness L − C/2 litsing tsohle tse tharo 'me u atise ka 255.
Mohlala o sebetsang
Sephetho se nepile ho fihlela ho potoloha ha ho qetela ho liphetho tse felletseng tsa li-channel. Melao ea hue kapa saturation ka likarolo e tšehetsiwe 'me e tla oela haufi le triple ea RGB e haufi ka ho fetisisa.
HSL le RGB li hlalositsoe
Ke eng HSL?
HSL e arola 'mala ka hue (0–360° letamong la mebala), saturation (bokgutshwane ba 'mala, 0–100%) le lightness (bofubelu kapa bontsho, 0–100%). Hobane karolo e ' ngoe le e ' ngoe e tšoana le mokhoa oo batho ba hlalosang mebala ka oona, HSL ke fomate e bonolo ka ho fetisisa ho aha tints, shades le palette e lumellanang — ka letsoho kapa ka khoutu.
- Sinthaxe:
- hsl(H, S%, L%)
- Mekhahlelo:
- 0–360°, 0–100%, 0–100%
- E loketse bakeng sa:
- mapalete, tints le shades, theming
Ke eng RGB?
RGB e hlalosa 'mala e le litsela tse tharo tsa leseli — red, green le blue — e ' ngoe le e ' ngoe ho tloha 0 ho isa 255. E bontša kamoo skrine e sebetsang ka teng: tse tharo kaofela ho 255 li fana ka tšoeu, kaofela ho 0 li fana ka ntsho. RGB ke khetho e nepahetseng ha o hloka ho bala le 'mala, 'me rgba() e eketsa ho pepeseha ka holim'a eona.
- Sinthaxe:
- rgb(R, G, B)
- Mekhahlelo:
- 0–255 ka tsela
- E loketse bakeng sa:
- khoutu, canvas, pepeseho ka rgba()
HSL to RGB reference table
Mebala e tlamehang ka CSS, e fetotsoe ho tswa ho HSL ho ea ho RGB.
| 'Mala | 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) |