HSL da rang tanlash qulay, lekin stylesheetlar, dizayn topshirishlar va brend hujjatlari hali ham HEX da ishlaydi. Bu konvertor H, S va L kombinatsiyasi uchun olti xonalik kodni beradi.
HSL dan HEX ga konvertatsiya qanday ishlaydi
- Saturation va lightness ni kasrga aylantir: 60% → 0.6.
- Chroma C ni hisobla: C = (1 − |2L − 1|) × S — bu rangning kulrangdan qanchalik uzoqligini ko‘rsatadi.
- Hue ni ishlatib, shu chromani qizil, yashil va ko‘k kanallarga joylashtir, keyin har uchini L − C/2 bilan siljit.
- Har bir kanalni 255 ga ko‘paytir, yaxlitla va ikki xonalik hexadecimal raqam sifatida yoz.
Amaliy misol
Yaxlitlash oxirgi bosqichda, har kanal 0–255 butun qiymatga tortilganda sodir bo‘ladi. Natija sensning HSL kirishiga eng yaqin HEX kod bo‘ladi va odatda dizayn vositasi ko‘rsatgan bilan bir xil bo‘ladi.
HSL va HEX 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
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 dan HEX ga referens jadvali
Eng ommabop CSS ranglari, HSL dan HEX ga konvertatsiya qilingan.
| Rang | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |