Milaza amin'ny efijery ny habetsaky ny jiro tokony havoaka ny RGB; ny HSL kosa milaza ny endriky ny loko amin'ny fomba hita maso. Ny famadihana ireo fantsona telo ho hue, saturation ary lightness dia mahatonga ny loko ho mora ahitsy tanana.
Ahoana ny fiasan'ny fiovàna RGB ho HSL
- Zarao amin'ny 255 ny R, G ary B ka ny sanda tsirairay dia eo anelanelan'ny 0 sy 1.
- Diniho ny lehibe indrindra sy kely indrindra amin'ireo telo — ny antonony avy amin'izy ireo no lightness L.
- Raha mitovy ny maximum sy minimum dia volondavenona ny loko: ny hue sy saturation dia samy 0.
- Raha tsy izany dia avy amin'ny elanelana eo amin'ny maximum sy minimum no ahazoana S, ary raketo avy amin'izay fantsona lehibe indrindra ny H.
Ohatra efa niasa
Marina amin'ny foto-kevitra. Satria matetika aseho ho isa manontolo ny H, S ary L, ny famadihana miverina dia mety hanova ny fantsona iray na roa dingana.
RGB sy HSL fanazavana
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()
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
Tabilao fampitahana RGB ho HSL
Ny loko CSS mahazatra indrindra, avadika avy amin'ny RGB ho HSL.
| Loko | 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%) |