HSL rang tanlashni osonlashtiradi, RGB esa ekranlar, canvas API va rasm kodi haqiqatan ishlatadigan format. Bu konverter har qanday hue, saturation va lightness uchligini aniq 0–255 kanallarga aylantiradi.
HSL dan RGB ga konvertatsiya qanday ishlaydi
- S va L ni kasrga aylantir va xroma C = (1 − |2L − 1|) × S ni hisobla.
- Hue ni 60 ga bo‘lib uning rang g‘ildiragidagi segmentini top va X = C × (1 − |(H/60 mod 2) − 1|) oraliq qiymatini hisobla.
- O‘sha segmentga qarab C, X va 0 ni R, G va B slotlariga tayinla.
- Lightness ofseti L − C/2 ni barcha uch kanalga qo‘sh va 255 ga ko‘paytir.
Amaliy misol
Natija oxirgi butun kanallarga yaxlitlashgacha aniq hisoblanadi. Kasr hue yoki saturation qiymatlari qo‘llab‑quvvatlanadi va yaqin RGB uchligiga tushadi.
HSL va RGB tushuntirildi
HSL nima?
HSL rangni ohang (rang g‘ildiragida 0–360°), to‘yinganlik (qanchalik rangli, 0–100%) va yoritilish (qanchalik yorqin, 0–100%) ga ajratadi. Har bir qism insonlar rangni tasvirlash usuliga mos kelgani uchun HSL plitalar, soyalar va bir xildagi palitralarni — qo‘l bilan yoki kodda — yaratishda eng oson format hisoblanadi.
- Sintaksis:
- hsl(H, S%, L%)
- Oraliq:
- 0–360°, 0–100%, 0–100%
- Eng yaxshi uchun:
- palitralar, tinter va soyalar, temalash
RGB nima?
RGB rangni uchta yorug‘lik kanali — qizil, yashil va ko‘k — orqali tasvirlaydi, har biri 0 dan 255 gacha. Bu ekranlarning asl ishlashini aks ettiradi: hammasi 255 bo‘lsa oq, hammasi 0 bo‘lsa qora hosil bo‘ladi. Rang bilan hisob-kitob qilishing kerak bo‘lsa RGB to‘g‘ri tanlov; rgba() esa ustiga shaffoflik qo‘shadi.
- Sintaksis:
- rgb(R, G, B)
- Oraliq:
- Har kanal uchun 0–255
- Eng yaxshi uchun:
- kod, canvas, rgba() bilan shaffoflik
HSL dan RGB ga referens jadvali
Eng ommabop CSS ranglari, HSL dan RGB ga konvertatsiya qilingan.
| Rang | 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) |