RGB ibwira ecran umubare w'umucyo wo kwatsa; HSL igaragaza uko ibara ryiyumva. Guhindura channels eshatu mu hue, saturation na lightness bituma guhindura ibara ku buryo bw'intoki byoroha.
Uko guhindura RGB ujya HSL bikora
- Gabanya R, G na B na 255 kugirango buri gaciro kabe hagati ya 0 na 1.
- Fata agaciro kanini n'agato mu bitatu — impuzandengo y'ibyo ni lightness L.
- Niba maximum na minimum bingana, icyo bara ni grey: hue na saturation byose ni 0.
- Bitabaye ibyo, kora S uhereye ku intera iri hagati ya maximum na minimum, hanyuma soma H ukurikije channel ari yo ifite agaciro kanini.
Urugero rwakozwe
Ni nyakuri mu ntekerezo. Kuko H, S na L akenshi bigaragara nka nombor zizungurijwe (rounded whole numbers), guhindura ukagaruka bishobora kwimura channel imwe cyangwa ebyiri.
RGB na HSL bisobanuwe
Icyo RGB ari cyo
RGB isobanura ibara nka channel eshatu z'urumuri — umutuku, icyatsi na bleu — buri kimwe kuva 0 kugeza 255. Ihuza n'ukuntu ecran zikora: byose kuri 255 bitanga umweru, byose kuri 0 bitanga umukara. RGB ni cyo cyiza igihe ugomba gukora imibare ku ibara, kandi rgba() yongeza transparency hejuru.
- Imiterere:
- rgb(R, G, B)
- Urutonde:
- 0–255 kuri buri muyoboro
- Byiza kuri:
- code, canvas, transparency na rgba()
Icyo HSL ari cyo
HSL itandukanya ibara muri hue (0–360° kuri roue y'amabara), saturation (uburyo ari amabara, 0–100%) na lightness (uburyo bwaka, 0–100%). Kuko buri gice gihura n'uburyo abantu basobanura ibara, HSL ni format yoroshye gukoresha mu gukora tints, shades na palettes zihamye — ku buryo bw'intoki cyangwa muri code.
- Imiterere:
- hsl(H, S%, L%)
- Urutonde:
- 0–360°, 0–100%, 0–100%
- Byiza kuri:
- palettes, tints na shades, theming
RGB to HSL reference table
Amabara akunze gukoreshwa muri CSS, yahinduwe kuva RGB ujya HSL.
| Ibara | 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%) |