RGB ekran qancha yorug‘lik chiqarishini bildiradi; HSL esa rangning qanday ko‘ringanini aytadi. Uch kanalni hue, saturation va lightness ga aylantirish rangni qo‘l bilan sozlashni osonlashtiradi.
RGB dan HSL ga konvertatsiya qanday ishlaydi
- R, G va B ni 255 ga bo‘l, shunda har bir qiymat 0 dan 1 gacha bo‘ladi.
- Uchta qiymatning maksimumi va minimumini ol — ularning o‘rta arifmetigi lightness L bo‘ladi.
- Agar maksimum va minimum teng bo‘lsa, rang kulrang: hue va saturation ikkalasi ham 0.
- Aks holda, S ni maksimum va minimum orasidagi farqdan olinadi, H ni esa qaysi kanal maksimum bo‘lsa o‘sha kanal belgilaydi.
Amaliy misol
Asosida aniq. Lekin H, S va L odatda yaxlitlangan butun sonlar sifatida ko‘rsatilgani sababli, qaytadan o‘tkazish kanalni bir-ikki qadamga siljitishi mumkin.
RGB va HSL tushuntirildi
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 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 dan HSL ga referens jadvali
Eng ommabop CSS ranglari, RGB dan HSL ga konvertatsiya qilingan.
| Rang | 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%) |