HSLде түс тандоо ыңгайлуу, бирок стилдер, дизайн тапшырмалары жана бренд документтери дагы деле HEX менен иштейт. Бул конвертер ал аралыкты жапып, каалаган hue, saturation жана lightness айкалышына алты символдуу код берет.
HSL дан HEX га кантип айландыруу иштейт
- S жана Lди бөлүктөргө айландыр: 60% → 0.6.
- Хрома Cди эсептe: C = (1 − |2L − 1|) × S — бул түс канчалык сұрдан алыс экенин көрсөтөт.
- Hueн колдонуп хроманы кызыл, жашыл жана көк каналдарга жайгаштыр, андан кийин бардыгын L − C/2 менен жылдыр.
- Ар бир каналды 255ке көбөйт, тегерет, анан эки он алтылык цифра менен жазы.
Иштеген мисал
Тегеретүү акыркы кадамда, ар бир канал 0–255 бүтүнгө карай тартылганда болот. Натыйжа сенин HSL киришиңе эң жакын HEX коду болуп, адатта дизайн куралы көрсөтө турган менен бирдей болот.
HSL жана HEX түшүндүрмөсү
HSL деген эмне?
HSL түсүн үч бөлүккө ажыратат: өң (тон) — түстөр дискосунда 0–360°, каныктыруу (кандайча жөнөкөй же жаркыраган) 0–100% жана жарыктык (канчалык жарык) 0–100%. Ар бир бөлүк адамдар түстү сүрөттөгөндө колдонгон түшүнүктөргө туура келгендиктен, HSL тондорду, көлөкөлөрдү жана туруктуу палитраларды кол менен же коддо түзүү үчүн эң жеңил формат.
- Синтаксиси:
- hsl(H, S%, L%)
- Аралыгы:
- 0–360°, 0–100%, 0–100%
- Үчүн мыкты:
- палитралар, тондор жана көлөкөлөр, темалаштыруу
HEX деген эмне?
HEX коду — алдыңкы # менен башталган кызыл, жашыл жана көк каналдарын сактаган алты орундуу он алтылык сан. Ар бир экилик цифра бир каналды билдирет, 00 (жоопкер эмес) ден FF (толук) чейин, бул RGB менен бирдей 16.7 миллион түстү кыскарган жазууда билдирет. HEX CSS, дизайн куралдар жана бренд жетекчиликтери үчүн демейки формат.
- Синтаксиси:
- #RRGGBB
- Аралыгы:
- Ар бир канал үчүн 00–FF
- Үчүн мыкты:
- CSS, дизайн тапшырмалары, бренд жетекчиликтери
HSL ден HEX ге шилтеме таблицасы
Эң кеңири колдонулган CSS түстөрү, HSL дан HEX га айландырылган.
| Түс | 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 |