HSL rangni odamlar qanday tasvirlaydi shunday ifodalaydi: qaysi hue, qancha rangliligi, qanchalik yorqin. HEX kodini HSL ga o‘girish rangni amalda o‘zgartirish uchun — yoritish, rangni susaytirish yoki butun shkalani yaratish — eng tez usuldir.
HEX dan HSL ga konvertatsiya qanday ishlaydi
- HEX kodini RGB ga aylantir va har bir kanalni 255 ga bo‘l, shunda uchta qiymat ham 0 va 1 orasida bo‘ladi.
- Uch qiymatning eng kattasi va eng kichigini top. Ularning o‘rta arifmetigi lightness L bo‘ladi.
- Ularning orasidagi farq saturation S ni belgilaydi: yengil ranglar uchun uni (2 − max − min) ga, qorong‘i ranglar uchun (max + min) ga bo‘l.
- Eng katta qiymatni tutgan kanal hue H ni belgilaydi — qizil 0°, yashil 120°, ko‘k 240° — va qolgan ikki kanal hue ni shu segment ichida joylashtiradi.
Amaliy misol
Hisoblash aniq, lekin HSL qiymatlari odatda butun daraja va foizlarga yaxlitlanadi. Shuning uchun qaytadan konvertatsiya original RGB dan bir-ikki qadam farq qilishi mumkin — amaliyotda sezilmaydi, lekin ranglarni qayta‑qayta aylantirsang bunga e'tibor ber.
HEX va HSL tushuntirildi
HEX nima?
HEX kodi — bu oldida # bilan yozilgan oltita o‘n oltilik raqam bo‘lib, rangning qizil, yashil va ko‘k kanallarini saqlaydi. Har bir juftlik bitta kanalni bildiradi, 00 (yo‘q) dan FF (to‘liq) gacha, bu RGB ning 16,7 million rangini qisqaroq notatsiyada beradi. HEX CSS, dizayn vositalari va brend ko‘rsatmalarida odatiy hisoblanadi.
- Sintaksis:
- #RRGGBB
- Oraliq:
- Har kanal uchun 00–FF
- Eng yaxshi uchun:
- CSS, dizayn topshirish, brend ko‘rsatmalari
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
HEX dan HSL ga referens jadvali
Eng ommabop CSS ranglari, HEX dan HSL ga konvertatsiya qilingan.
| Rang | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |