HSL апісвае колер так, як пра яго гаворыць чалавек: якая адценне, наколькі насычаны, наколькі светлы. Канвертацыя HEX у HSL — гэта хуткі спосаб атрымаць колер у форме, якую можна рэальна рэгуляваць — асвятліць, прыглушыць або пабудаваць з яго шкалу.
Як працуе пераўтварэнне з HEX у HSL
- Пераўтвары HEX у RGB і падзялі кожны канал на 255, каб усе тры былі ў дыяпазоне ад 0 да 1.
- Знайдзі найбольшае і найменшае з трох значэнняў. Іх сярэдняе — гэта святло L.
- Расцяжэнне паміж імі вызначае насычанасць S: падзялі яго на (2 − max − min) для светлых кветак або на (max + min) для цёмных.
- Канал з максімумам вызначае адценне H — чырвоны там, дзе 0°, зялёны на 120°, сіні на 240° — а дзве іншыя каналы пазіцыянуюць адценне ўнутры гэтага сегмента.
Прыклад
Разлікі дакладныя, але HSL звычайна паказваюць акругленымі да цэлых градусаў і працэнтаў. Таму зваротная канвертацыя можа зрушыць колер на адзін-два крокі ў RGB — на практыцы незаўважна, але варта памятаць пры шматразовых кругавых пераўтварэннях.
HEX і HSL тлумачэнне
Што такое HEX?
Код HEX — гэта шасцізначны шаснаццатковы лік, які захоўвае чырвоную, зялёную і сінюю каналы колеру пасля вядучага #. Кожная пара знакаў адпавядае адной канале, ад 00 (няма) да FF (поўна), што дае тыя ж 16.7 мільёна колераў, што і RGB, але ў больш кароткай натацыі. 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%) |