Выбіраць колер у HSL зручна, але стылі, перадачы дызайну і бренд-дакументы ўсё яшчэ працуюць на HEX. Гэты канвертар закрывае прабел і дае табе шасцізначны код для любой камбінацыі адцення, насычанасці і светласці.
Як працуе пераўтварэнне з HSL у HEX
- Пераўтвары насычанасць і светласць у дробавыя значэнні: 60% становіцца 0.6.
- Вылічы храму C = (1 − |2L − 1|) × S — гэта паказвае, наколькі колер аддалены ад шэрага.
- Выкарыстоўвай адценне, каб размясціць гэту храму на чырвонаму, зялёнаму і сіняму каналах, потым зруш усе тры на L − C/2.
- Памнож кожны канал на 255, акруглі яго і запішы як два шаснаццятковыя знакі.
Прыклад
Акругленне адбываецца адзін раз, на апошнім кроку, калі кожны канал захопліваецца ў целае 0–255. Вынік — найбольш блізкі HEX да твайго HSL-уводу і звычайна супадае з тым, што паказваюць дызайнерскія інструменты.
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 (поўна), што дае тыя ж 16.7 мільёна колераў, што і RGB, але ў больш кароткай натацыі. 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 |