HSL hanya ce mai sauƙi don zaɓar launi, RGB kuma shine abin da allon, canvas APIs da lambar hoto ke amfani da shi. Wannan mai sauyawa yana juya kowace huɗu na hue, saturation da lightness zuwa madaidaicin tashoshi 0–255.
Yadda sauyin HSL zuwa RGB ke aiki
- Maida S da L zuwa kaso (fractions) ka ƙididdige chroma C = (1 − |2L − 1|) × S.
- Raba hue da 60 don gano sashen sa a kibiyar launi sannan ƙididdige ƙimar tsaka-tsaki X = C × (1 − |(H/60 mod 2) − 1|).
- Sanya C, X da 0 a cikin wuraren R, G da B bisa ga wancan sashen.
- Ƙara offset na lightness L − C/2 zuwa dukkan tashoshi uku sannan ninka da 255.
Misali da ya yi aiki
Sakamakon daidai ne har zuwa zagayawar ƙarshe zuwa cikakkun tashoshi. Ana goyan bayan ƙimar hue ko saturation na fractional kuma za su faɗi ne zuwa kusancin triple RGB mafi kusa.
HSL da RGB an bayyana su
Menene HSL?
HSL yana raba launi zuwa hue (0–360° a kan ƙwallon launi), saturation (yadda yake da launi, 0–100%) da lightness (yadda yake haske, 0–100%). Saboda kowace ɓangare ta dace da yadda mutane ke bayyana launi, HSL shine tsarin da ya fi sauƙi don gina tints, shades da palet masu daidaito — da hannu ko a cikin lambar.
- Sintaks:
- hsl(H, S%, L%)
- Iyakance:
- 0–360°, 0–100%, 0–100%
- Mafi kyau don:
- palettes, tints da shades, theming
Menene RGB?
RGB yana bayyana launi a matsayin tashoshi uku na haske — ja, kore da shuɗi — kowane daga 0 zuwa 255. Yana da kamanceceniya da yadda allunan ke aiki: dukkanin uku a 255 suna ba da fari, duk a 0 suna ba da baki. RGB ya dace lokacin da kake buƙatar lissafi da launi, kuma rgba() yana ƙara rashin gani a saman.
- Sintaks:
- rgb(R, G, B)
- Iyakance:
- 0–255 per channel
- Mafi kyau don:
- lamba, canvas, rashin gani tare da rgba()
teburin tunani na HSL zuwa RGB
Mafi yawan launukan CSS, an sauya daga HSL zuwa RGB.
| Launi | 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) |