CodeKitHubЩо це за інструмент?
Кольори в вебі записуються в кількох еквівалентних форматах, визначених у специфікації CSS Color на MDN. HEX (#4f46e5) — компактна форма, яку використовують повсюди в CSS і при передачі макетів дизайнерами. RGB (rgb(79, 70, 229)) прямо задає компоненти червоного, зеленого й синього, що часто потрібно коду. HSL (hsl(243, 75%, 59%)) описує відтінок, насиченість і світлість — найінтуїтивніший формат для налаштування кольору, наприклад, щоб зробити його темнішим чи менш насиченим.
Усі три описують один і той самий колір; цей інструмент точно конвертує між ними й показує зразок, щоб ви могли переконатися, що це саме той колір, який ви мали на увазі.
Навіщо його використовувати?
- Приймає будь-який формат на вході — HEX (3 чи 6 цифр), RGB чи HSL — і видає всі формати на виході.
- Живий зразок кольору, щоб ви бачили сам колір, а не лише цифри.
- Візуальна піпетка кольору, якщо зручніше обирати на око.
- Копіювання кожного формату в один клік, готове для CSS чи коду.
- Безкоштовно, миттєво, без завантаження файлів.
Як користуватися
- Введіть або вставте колір: підходять #4f46e5, rgb(79, 70, 229) або hsl(243, 75%, 59%).
- Або натисніть на піпетку кольору й оберіть візуально.
- Перегляньте всі три формати в результатах і перевірте зразок кольору.
- Натисніть «Copy» біля потрібного формату.
Приклад
Введення
#4f46e5Результат
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Три записи — один і той самий колір.
Який формат обрати?
Усі три формати точно описують один і той самий колір — вибір залежить від того, з яким зручніше працювати для конкретного завдання, а не від точності.
| Формат | Найкраще підходить для | Чому |
|---|---|---|
| HEX (#4f46e5) | CSS, передача макетів дизайну, швидке копіювання-вставлення | Найкоротший для набору й вставлення; універсальний формат у дизайн-інструментах на кшталт Figma. |
| RGB (rgb(79,70,229)) | Код, що напряму працює з каналами, робота з canvas/зображеннями | Відповідає тому, як графічні API та піксельні дані зображень насправді зберігають колір. |
| HSL (hsl(243,75%,59%)) | Налаштування кольору — світліший, темніший, більш чи менш насичений | Світлість і насиченість — окремі числа, які можна налаштовувати напряму, на відміну від HEX/RGB, де змінюється кожен канал. |
Типові сценарії використання
- Обрали колір візуально в дизайн-інструменті, а потім конвертуєте його в точне значення HEX чи RGB, потрібне в CSS або коді.
- Створення набору споріднених відтінків (світліших/темніших варіантів) шляхом конвертації в HSL, налаштування світлості й конвертації назад.
- Узгодження фірмового кольору між різними інструментами, кожен з яких очікує інший формат, — логотип у RGB, стайлгайд у HEX, CSS-змінна, якій потрібен HSL для теми.
- Перевірка, чи колір зі скріншота або файлу дизайну (часто заданий у RGB) відповідає значенню HEX у таблиці стилів.
Часті запитання
Коли варто використовувати HSL замість HEX чи RGB?
Коли потрібно міркувати про колір логічно. Зробити колір на 10% темнішим в HSL означає знизити світлість на 10 пунктів; у HEX чи RGB довелося б перераховувати всі канали. Дизайн-системи часто визначають палітри саме в HSL з цієї причини.
Чи підтримує інструмент 3-значний HEX на кшталт #fff?
Так. #fff — скорочення для #ffffff, кожна цифра дублюється. Обидві форми приймаються, а результат показується у повній 6-значній формі.
А як щодо альфа-каналу (прозорості)?
Цей інструмент конвертує непрозорі кольори (значення RGB/HSL). Якщо потрібна прозорість, додайте альфа-канал самостійно: rgba(79, 70, 229, 0.5) або #4f46e580 — сама частина кольору лишається такою самою.
Чому мої значення HSL відрізняються на 1 від іншого інструменту?
Це округлення. Конвертація HSL↔RGB дає дробові значення, і різні інструменти округлюють їх по-різному. Різниця в ±1 відтінку чи відсотку непомітна оку й цілком нормальна.
Чи підтримуються назви кольорів на кшталт 'red'?
Поки що ні на першому етапі — інструмент зосереджений на трьох числових форматах, які розробники конвертують найчастіше. Введіть значення HEX/RGB/HSL кольору або оберіть його візуально за допомогою піпетки.
Коли варто використовувати HEX, RGB чи HSL?
Якщо потрібна прозорість, використовуйте 8-значний HEX (#RRGGBBAA) або rgba() — 6-значний HEX не має альфа-каналу. Якщо потрібні світліші чи темніші варіанти того самого кольору, найпростіше HSL: залиште відтінок і насиченість незмінними, змінюючи лише значення світлості. Для звичайного копіювання-вставлення в CSS чи дизайн-інструменти 6-значний HEX залишається найбільш універсально прийнятою формою.