Вибір Кольору Онлайн
Оберіть колір на колі, доопрацюйте його на полотні насиченості й прочитайте результат у кожному форматі, яким розмовляє ваш проєкт — від #RRGGBB до oklch(). Цей інструмент для вибору кольору робить і те, що інші пропускають: три геометрії кола, зокрема традиційне художнє коло RYB, накладання гармоній, які самі будують палітру, альфа-канал і експорт усієї палітри в один клік як CSS-змінні, SCSS чи JSON. Усе це обчислюється локально, у вашому браузері.
Три колеса, а не одне
Перемикач “Режим кола” змінює саму геометрію кола:
- HSV і HSL — цифрові колеса: відтінки розташовані так, як їх змішує світло на екранах RGB. Різниця між ними в поведінці квадратного полотна: у HSV найяскравіший кут — це чистий відтінок, у HSL чисті відтінки розташовані на 50% світлості, а вище — білий.
- RYB (художника) розташовує відтінки так, як їх вивчали художники: червоний, жовтий і синій як основні кольори, а між ними — оранжевий, зелений і фіолетовий. Практична цінність цього підходу проявляється в гармоніях: на колі RYB комплементарним до червоного є зелений, а до синього — оранжевий — класичні пігментні пари, тоді як цифрове коло поєднує червоний із блакитним. Якщо “комплементарна” палітра зі звичайного інструмента коли-небудь здавалася вам неправильною на око — ось чому.
Гармонії, які самі будують палітру
Оберіть правило в розділі “Колірна гармонія”, і коло позначить супутні кольори, які одразу з’являться як готова палітра:
- Комплементарна — один протилежний колір. Найсильніший контраст; використовуйте для одного акценту на тлі домінантного фірмового кольору.
- Розділена комплементарна — два сусіди комплементарного кольору. Майже такий самий контраст, але його набагато легше збалансувати.
- Тріадна — три рівномірно розташовані відтінки. Жвава, але стабільна схема; нехай один колір домінує, а два інші використовуйте помірно.
- Тетрадна (квадрат) — чотири відтінки. Багаті схеми для ілюстрацій і візуалізації даних; складно збалансувати в інтерфейсах.
- Аналогова — найближчі сусіди. Низька напруга, добре підходить для фонів і градієнтів.
- Монохромна — один відтінок у різних ступенях світлості. Найбезпечніший вибір для станів інтерфейсу (наведення, активний, вимкнений).
Панель палітри копіює весь набір одним кліком у форматі на ваш вибір: звичайний HEX, RGB, HSL, OKLCH, готові до вставки CSS custom properties (--color-1: …), SCSS-змінні або JSON для передачі в код.
Вставте що завгодно, отримайте все
Поля введення приймають практично будь-яку нотацію кольору: #f80, #ff8800, 8-значний hex з альфою, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 або назви кольорів CSS на кшталт rebeccapurple. Що б ви не ввели, у відповідь ви отримаєте сім синхронізованих виводів: HEX, RGB, HSL, HSV, LCH, OKLCH і CMYK, кожен зі своєю кнопкою копіювання.
Дві допоміжні позначки під попереднім переглядом називають колір за вас: найближчий іменований колір CSS (корисно для швидких прототипів і для того, щоб говорити про кольори словами) та найближчий токен Tailwind (наприклад, orange-500), тож ви можете залишатися в межах своєї дизайн-системи, а не вигадувати одноразові значення.
Перетягніть повзунок “Непрозорість (альфа)” під попереднім переглядом — і виводи переключаться на свої прозорі форми: #RRGGBBAA, rgba(), hsla(), а сам попередній перегляд покаже колір на тлі шахівниці, щоб було видно ступінь прозорості.
Який формат обрати?
| Формат | Повна назва | Коли використовувати? |
|---|---|---|
| HEX | Шістнадцятковий | Стандарт для вебу. Компактний, підтримується всюди, легко копіюється. 8 цифр додають альфу. |
| RGB | Червоний, зелений, синій | Як “мислять” екрани. Три канали світла, 0–255. Формат, якого очікує більшість API та код canvas. |
| HSL | Відтінок, насиченість, світлість | Для ручного редагування людиною. “Трохи світліше” чи “менш насичено” — це зміна лише одного числа. |
| HSV | Відтінок, насиченість, значення | Графічне програмне забезпечення. Модель, на якій побудовані інструменти вибору кольору в Photoshop і GIMP. |
| LCH | Світлість, хрома, відтінок | Перцептивно рівномірний. Однакові числові кроки виглядають як однакові візуальні кроки — те, чим намагається бути HSL. |
| OKLCH | OK Lightness, Chroma, Hue | Сучасний вибір для CSS. Виправляє зсуви відтінку в синіх кольорах, притаманні LCH; підтримується всіма сучасними браузерами й ідеально підходить для систем дизайн-токенів. |
| CMYK | Cyan, Magenta, Yellow, Key | Орієнтація для друку. Приблизна конвертація для розмови з поліграфічними дизайнерами — остаточні значення завжди залежать від колірного профілю принтера. |
Дрібниці, які економлять час
- Історія зберігається сама. Останні 24 кольори, з якими ви працювали, переживають оновлення сторінки — вони зберігаються лише в локальному сховищі вашого браузера й нікуди не завантажуються.
- Піпетка. У браузерах з API EyeDropper (Chrome і Edge) ви можете вибрати колір будь-де на екрані, навіть поза вікном браузера.
- Керування з клавіатури. Колесо й полотно насиченості реагують на клавіші-стрілки для точного піксельного налаштування.
- Готові кольори охоплюють поширені базові відтінки, коли потрібна просто швидка відправна точка.
Часті запитання (FAQ)
Чи безпечно використовувати oklch() у продакшн CSS?
Так. Усі сучасні версії Chrome, Edge, Firefox і Safari підтримуютьoklch(), і ця нотація стала пріоритетною для дизайн-токенів (Tailwind CSS 4 визначає всю свою палітру саме в ній). Для дуже старих браузерів додайте резервне значення HEX рядком вище — цей інструмент дає вам обидва значення.