I-RGB ixelela isikrini ukuba likhuphe ukukhanya okungakanani; i-HSL ikuxelela ukuba umbala ubukeka njani ngokwenene. Ukuguqula iziteshi ezintathu zibe yi-hue, saturation kunye ne-lightness kwenza umbala ube lula ukuwulungisa ngesandla.
Indlela yokuguqula RGB uye ku-HSL
- Lungelelanisa i-R, G kunye ne-B ngama-255 ukuze ixabiso ngalinye libe phakathi kwe-0 no-1.
- Thatha eyona nkulu neyona incinci kwezi zithathu — umndilili wazo ngowokukhanya L.
- Ukuba eyona nkulu neyona incinci zilingana, umbala ube ngumpunga: i-hue kunye ne-saturation zombini ziyi-0.
- Kungenjalo chaza i-S ukusuka kummelwane phakathi kwe-max kunye ne-min, uze ufunde i-H kwisoftware esibonisa ukuba yiphi isiteshi esiyi-max.
Umzekelo osebenzayo
Inechanekile ngokwembono. Kuba i-H, S kunye ne-L ngokubanzi ziboniswa njengeenombolo ezijikelezileyo, ukuguqula ubuyele kunokutshintsha isiteshi ngesinyathelo okanye ezimbini.
RGB kunye ne-HSL zichazwe
Yintoni i-RGB?
I-RGB ichaza umbala njengeziteshi ezintathu zokukhanya — red, green kunye ne-blue — nganye ukusuka ku-0 ukuya ku-255. Ifana nendlela izikrini ezisebenza ngayo: zonke ezintathu kwi-255 zinika umhlophe, zonke kwi-0 zinika omnyama. I-RGB lulungelelo xa kufuneka ubale nombala, kwaye i-rgba() yongeza ukungabonakali ngaphezu kwayo.
- Isyntax:
- rgb(R, G, B)
- Ububanzi:
- 0–255 per channel
- Ilungele kakhulu:
- ikhowudi, canvas, ukungabonakali nge rgba()
Yintoni i-HSL?
I-HSL yahlula umbala ibe yi-hue (0–360° kwi-wheel yombala), saturation (ukuba nombala kangakanani, 0–100%) kunye ne-lightness (ukukhanya, 0–100%). Kuba ngamnye umaleko uhambelana nendlela abantu abachaza ngayo umbala, i-HSL yeyona format ilula yokudala i-tints, shades kunye neepalethi ezizinzileyo — ngesandla okanye kwi-khowudi.
- Isyntax:
- hsl(H, S%, L%)
- Ububanzi:
- 0–360°, 0–100%, 0–100%
- Ilungele kakhulu:
- ipalethi, tints kunye ne shades, theming
RGB to HSL reference table
Eyona mibala ye-CSS eqhelekileyo, iguqulelwe ukusuka ku-RGB iye ku-HSL.
| Umbala | 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%) |