Mahafinaritra ny HSL amin’ny fisafidianana loko, fa ny RGB no tena ampiasain’ny efijery, canvas APIs ary ny kaody sary. Ity mpanova ity dia mampivadika ny trio hue, saturation ary lightness ho fantsona marina 0–255.
Ahoana ny fiasan'ny fiovàna HSL ho RGB
- Avadika ho ampahany ny S sy L ary kajyina ny chroma C = (1 − |2L − 1|) × S.
- Zarao amin’ny 60 ny hue mba hahitana ny segondra ao amin’ny kodiaran’ny loko ary kajyina ny sandan’ny fampidirana X = C × (1 − |(H/60 mod 2) − 1|).
- Asàna C, X ary 0 amin’ny slots R, G ary B araka io segondra io.
- Ampio ny offset lightness L − C/2 amin’ireo fantsona telo rehetra ary avoahy amin’ny 255.
Ohatra efa niasa
Marina ny vokatra hatramin’ny fihodinana farany mba hahazoana fantsona feno. Ekena ny sandan’ny hue na saturation amin’ny ampahany ary hifarana eo amin’ny RGB triple akaiky indrindra izy ireny.
HSL sy RGB fanazavana
Inona ny HSL?
Manasaraka loko ny HSL ho amin'ny hue (0–360° amin'ny kodiaran'ny loko), saturation (hefatra miloko, 0–100%) ary lightness (hafanan'ny fahazavana, 0–100%). Satria mifanaraka amin'ny fomba fampitahian'ny olona loko ny ampahany tsirairay, HSL no endrika mora indrindra hanaovana tints, shades ary paleta mitovy — amin'ny tanana na amin'ny kaody.
- Sintaxy:
- hsl(H, S%, L%)
- Sakany:
- 0–360°, 0–100%, 0–100%
- Mety indrindra ho an'ny:
- paleta, tints sy shades, fanamarihana lohahevitra
Inona ny RGB?
Mamaritra loko ny RGB amin'ny alalan'ny fantsona hazavana telo — mena, maitso ary manga — avy amin'ny 0 ka hatramin'ny 255 ny tsirairay. Mamerina ny fomba fiasan'ny efijery izy: rehefa 255 daholo dia fotsy, rehefa 0 daholo dia mainty. RGB no safidy mety rehefa mila manao kajy amin'ny loko ianao, ary manampy mangarahara ny rgba() eo amboniny.
- Sintaxy:
- rgb(R, G, B)
- Sakany:
- 0–255 isaky ny fantsona
- Mety indrindra ho an'ny:
- kaody, canvas, mangarahara miaraka amin'ny rgba()
Tabilao fampitahana HSL ho RGB
Ny loko CSS mahazatra indrindra, avadika avy amin'ny HSL ho RGB.
| Loko | 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) |