Конвертер і палітра кольору
Введіть будь-який запис кольору — отримаєте решту форматів і шкалу відтінків, з якою вже можна працювати в макеті.
- Безкоштовно
- Без реєстрації
- Працює у вашому браузері — нічого не надсилається
// шкала відтінків — клік копіює
Навіщо один колір у трьох записах
HEX, RGB і HSL описують один і той самий колір, просто різними координатами. HEX зручний у макеті й коді, RGB — коли колір рахують програмно чи додають прозорість, HSL — коли з кольору треба зробити сімʼю: залишити тон і рухати насиченість та світлоту. Переведення між ними точне, тут нічого не втрачається.
Практична користь HSL видно на кнопках. Стан наведення й натискання не підбирають на око — беруть базовий колір і зсувають світлоту на кілька відсотків. Так стани залишаються родичами, а не трьома випадковими кольорами, які просто опинились поруч.
Читати далі
Одразу попередження про світлоту в HSL. Це геометрична величина, а не сприйнята яскравість: жовтий і синій з однаковим значенням L людське око бачить абсолютно по-різному. Тому шкалу відтінків, зроблену рівними кроками, все одно перевіряють на контраст, а не приймають на віру.
Чого інструмент не робить. Він не керує кольоровими профілями й не обіцяє, що відтінок у друці збігатиметься з екраном, — для друку існує CMYK і кольоропроба, а не конвертер на сайті. Ще одне: він не рахує контраст, для цього є окрема перевірка контрастності за WCAG.
Часті питання
Чим HSL кращий за HEX у роботі?
Тим, що з нього легко зробити шкалу. Зафіксуйте тон і насиченість, змініть світлоту — отримаєте узгоджену лінійку відтінків замість набору випадкових кольорів.
Як записати прозорість?
Через RGBA або восьмизначний HEX, де останні два знаки задають альфа-канал. Обидва варіанти розуміють усі сучасні браузери.
Чому колір на телефоні виглядає інакше, ніж на моніторі?
Через різні матриці й кольорові профілі. Значення кольору однакове, показ різний — тому важливі рішення перевіряють на живому пристрої, а не тільки в макеті.
Чи підійде ця палітра для друку?
Ні. Для друку колір рахують у CMYK і затверджують за кольоропробою — екранний відтінок там лише орієнтир.
Ще інструменти
Інструмент показав проблему, а полагодити нема кому?
Ми робимо сайти, магазини й підтримку — від адреси домену до пошти, яка не потрапляє у спам.
Натискаючи кнопку, ви погоджуєтесь з політикою приватності
Харків · Київ
