HSL түстү адамдар сүйлөгөндөй сүрөттөйт: кайсы hue (жаан), канча түстүүлүк, канча жарыктык. HEXтен HSLге айлантуу түстү чындыкта тууралай ала турган формага тез буруп берет — аны жайытып, бир аз салкындатып же толук шкала түзө аласың.
HEX дан HSL га кантип айландыруу иштейт
- HEX кодун RGBге айлантып, ар бир каналды 255ке бөл, ошондо баары 0 менен 1дин ортосунда болот.
- Үчтөн эң чоңду жана эң кичинени тап. Алардагы орточо L жарыктык болот.
- Алардын ортосундагы айырмачылык S (түстүүлүк) өлчөмүн аныктайт: жарык түстөр үчүн аны (2 − max − min)го, караңгы үчүн (max + min)га бөл.
- Эң чоң маанини кармаган канал hue Hти аныктайт — кызыл 0°, жашыл 120°, көк 240° — жана калган эки канал бул сегменттин ичиндеги так ордун көрсөтөт.
Иштеген мисал
Математика так, бирок HSL баалуулуктары адатта бүтүн даражаларга жана пайыздарга тегеретилет. Кайра конвертациялоо натыйжада оригиналдан бир-эки RGB кадам айырмасы болушу мүмкүн — практикасында көрүнбөйт, бирок түстөрдү кайталанып айлантсаң билип коюу маанилүү.
HEX жана HSL түшүндүрмөсү
HEX деген эмне?
HEX коду — алдыңкы # менен башталган кызыл, жашыл жана көк каналдарын сактаган алты орундуу он алтылык сан. Ар бир экилик цифра бир каналды билдирет, 00 (жоопкер эмес) ден FF (толук) чейин, бул RGB менен бирдей 16.7 миллион түстү кыскарган жазууда билдирет. HEX CSS, дизайн куралдар жана бренд жетекчиликтери үчүн демейки формат.
- Синтаксиси:
- #RRGGBB
- Аралыгы:
- Ар бир канал үчүн 00–FF
- Үчүн мыкты:
- CSS, дизайн тапшырмалары, бренд жетекчиликтери
HSL деген эмне?
HSL түсүн үч бөлүккө ажыратат: өң (тон) — түстөр дискосунда 0–360°, каныктыруу (кандайча жөнөкөй же жаркыраган) 0–100% жана жарыктык (канчалык жарык) 0–100%. Ар бир бөлүк адамдар түстү сүрөттөгөндө колдонгон түшүнүктөргө туура келгендиктен, HSL тондорду, көлөкөлөрдү жана туруктуу палитраларды кол менен же коддо түзүү үчүн эң жеңил формат.
- Синтаксиси:
- hsl(H, S%, L%)
- Аралыгы:
- 0–360°, 0–100%, 0–100%
- Үчүн мыкты:
- палитралар, тондор жана көлөкөлөр, темалаштыруу
HEX ден HSL ге шилтеме таблицасы
Эң кеңири колдонулган CSS түстөрү, HEX дан HSL га айландырылган.
| Түс | 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%) |