RGB yana gaya wa allo yadda zai fitar da haske; HSL yana gaya maka yadda launi yake a zahiri. Maida tashoshi uku zuwa hue, saturation da lightness yana sauƙaƙa gyara launi da hannu.
Yadda sauyin RGB zuwa HSL ke aiki
- Raba R, G da B da 255 don kowace ƙima ta kasance tsakanin 0 da 1.
- Dauki mafi girma da mafi ƙanƙanci daga cikin ukun — matsakaita su shine lightness L.
- Idan mafi girma da mafi ƙanƙanci suna daidai, launin toka ne: hue da saturation duka 0.
- Idan ba haka ba, samo S daga bambanci tsakanin mafi girma da mafi ƙanƙanci, kuma karanta H daga wacce tashar ce mafi girma.
Misali da ya yi aiki
Daidaici ne a ka'ida. Saboda H, S da L ana yawan nuna su a matsayin lambobi masu zagaye, mayarwa baya na iya motsa tashar da mataki ɗaya ko biyu.
RGB da HSL an bayyana su
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()
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
teburin tunani na RGB zuwa HSL
Mafi yawan launukan CSS, an sauya daga RGB zuwa HSL.
| Launi | 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%) |