HSL ni uburyo bworoshye bwo guhitamo ibara, RGB ni byo ecrans, canvas APIs na code y'amafoto bikoresha. Uyu muvugurura uhindura buri hue, saturation na lightness mu miyoboro nyakuri ya 0–255.
Uko guhindura HSL ujya RGB bikora
- Hindura S na L kuba fractions hanyuma ubare chroma C = (1 − |2L − 1|) × S.
- Gabanya hue na 60 kugira ngo ubone segment yayo ku igaragaza ry'amabara kandi ubare agaciro hagati X = C × (1 − |(H/60 mod 2) − 1|).
- Shyira C, X na 0 mu myanya ya R, G na B ukurikije iyo segment.
- Ongeraho offset ya lightness L − C/2 kuri channels zose eshatu hanyuma ukore gukuba na 255.
Urugero rwakozwe
Ibisubizo ni nyakuri kugeza ku guhinnya kwa nyuma kugira ngo bigire imibare yuzuye ya channels. Agaciro ka hue cyangwa saturation gafite igice kirashobora gushyigikirwa kandi gashyirwa kuri RGB triple yegereye.
HSL na RGB bisobanuwe
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
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()
HSL to RGB reference table
Amabara akunze gukoreshwa muri CSS, yahinduwe kuva HSL ujya RGB.
| Ibara | 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) |