Вибір кольору онлайн

Виберіть колір на колі, доопрацюйте його на полотні насиченості й яскравості та прочитайте його в кожному форматі, яким користується ваш проєкт, від #RRGGBB до oklch(). Інструмент уміє й те, що інші засоби вибору кольору пропускають: три геометрії кола, зокрема традиційне малярське коло RYB, гармонії, які самі складають палітру, канал прозорості та експорт усієї палітри одним кліком як CSS-змінні, SCSS або JSON. Усе обчислюється у вашому браузері.

RYB чи RGB? Три колірні кола замість одного

Перемикач Режим кола змінює розташування відтінків на колі:

• HSV і HSL: цифрові колеса. Відтінки розташовані так, як їх змішує світло на екрані. Відрізняються квадратним полотном: у HSV найяскравіший кут це чистий відтінок, HSL розміщує чисті відтінки посередині світлості, а білий над ними.
• RYB (малярське): розташовує відтінки так, як їх знають художники: червоний, жовтий і синій як основні кольори, а між ними оранжевий, зелений і фіолетовий (див. модель RYB, англійською). Різницю найкраще видно на гармоніях. На колі RYB доповненням червоного є зелений, а доповненням синього оранжевий: класичні пігментні пари з уроків малювання. Цифрове коло натомість парує червоний з блакитним. Якщо «комплементарна» палітра зі звичайного вибору кольору вам колись здавалася невдалою, ось причина.

Колірні гармонії: палітра, яка складається сама

У полі Колірна гармонія оберіть правило. Коло позначить супутні кольори, і під ним з’явиться готова палітра:

• Комплементарна: один протилежний колір. Найсильніший контраст, годиться для єдиного акценту біля основного кольору бренду.
• Розділена комплементарна: два сусіди протилежного кольору. Контраст майже такий самий сильний, але його легше збалансувати.
• Тріадна: три відтінки рівномірно по колу. Жвава і водночас стабільна, якщо один переважає, а два інші використовуєте помірно.
• Тетрадна (квадрат): чотири відтінки. Багаті схеми для ілюстрацій і графіків, важко збалансувати в інтерфейсі застосунку.
• Аналогова: найближчі сусіди. Спокійне поєднання для фонів і переходів.
• Монохромна: один відтінок у кількох рівнях світлості. Найбезпечніший вибір для станів кнопок (наведення, активний, вимкнений).

Усю палітру скопіюєте одним кліком у форматі на вибір: звичайний HEX, RGB, HSL, OKLCH, готові до вставки CSS-змінні (--color-1: …), SCSS-змінні або JSON для коду. Чи палітра тримає контраст для людей, які гірше розрізняють відтінки, швидко перевірите на скриншоті після переведення у відтінки сірого.

Конвертація HEX, RGB, HSL, OKLCH і CMYK: вставте що завгодно, отримаєте все

Поля введення приймають майже будь-який запис кольору: #f80, #ff8800, восьмизначний hex із прозорістю, rgb() і rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 і названі кольори CSS на кшталт rebeccapurple. Що б ви не ввели, отримаєте сім узгоджених виводів: HEX, RGB, HSL, HSV, LCH, OKLCH і CMYK, кожен зі своєю кнопкою копіювання.

Повзунок Непрозорість (альфа) під попереднім переглядом перемикає виводи на прозорі записи #RRGGBBAA, rgba() і hsla(). Попередній перегляд малюється на шахівниці, тож прозорість одразу видно.

Найближчий токен Tailwind CSS для будь-якого кольору

Дві позначки під попереднім переглядом називають колір: найближчий іменований колір CSS (для швидких прототипів) і найближчий токен Tailwind, наприклад orange-500. Так ви лишаєтесь у своїй дизайн-системі й не вигадуєте одноразові значення. Клацання на позначці копіює її.

Це відповідь на питання, яке виникає під час кожної передачі макета: дизайнер надіслав hex-код, який клас Tailwind йому найближчий? Відповідність рахується проти стандартної палітри Tailwind CSS 4 (див. документацію Tailwind, англійською), тож токен одразу можна вставити в назву класу.

Який формат кольору використати?

Формат	Повна назва	Коли використовувати?
HEX	Hexadecimal	Типовий вибір для вебу. Короткий, підтримується всюди, легко копіюється. Вісім цифр додають прозорість.
RGB	Red, Green, Blue	Так мислять екрани. Три канали світла від 0 до 255. Формат, якого очікує більшість API та код canvas.
HSL	Hue, Saturation, Lightness	Для редагування на око. «Трохи світліше» або «менш насичено» означає змінити лише одне число.
HSV	Hue, Saturation, Value	Графічні програми. Модель, на якій побудований вибір кольору в Photoshop і GIMP.
LCH	Lightness, Chroma, Hue	Перцептивна рівномірність. Однакові числові кроки виглядають як однакові візуальні кроки, чим HSL лише вдає.
OKLCH	OK Lightness, Chroma, Hue	Сучасний вибір для CSS. Виправляє зсуви відтінку в синіх тонах, які властиві LCH. Підтримується всіма сучасними браузерами, годиться для дизайн-токенів.
CMYK	Cyan, Magenta, Yellow, Key	Орієнтир для друку. Приблизна конвертація для розмови з друкарнею, остаточні значення визначає її кольоровий профіль.

Чому OKLCH перцептивно рівномірніший за старіші моделі, пояснює автор простору Oklab Б’єрн Оттоссон у первинній статті (англійською). Синтаксис і підтримку в браузерах підсумовує MDN (англійською). Як працює модель для друку, описує Вікіпедія у статті CMYK.

Дрібниці, які економлять час

• Історія зберігається сама. Останні 24 кольори переживають оновлення сторінки. Вони лишаються тільки в сховищі вашого браузера й нікуди не надсилаються.
• Піпетка. У браузерах з EyeDropper API (Chrome і Edge) виберете колір будь-де на екрані, навіть поза вікном браузера. Колір із фото чи файлу з логотипом дізнаєтесь в онлайн піпетці.
• Керування з клавіатури. Коло і полотно насиченості й яскравості реагують на стрілки, тож колір доопрацюєте малими кроками.
• Готові кольори пропонують поширені базові кольори, коли потрібен лише швидкий старт.

Часті запитання

Як перевести OKLCH у HEX?

Вставте значення oklch() у поле OKLCH, і решта виводів, зокрема HEX, одразу перерахуються. Працює і навпаки: введіть HEX і прочитайте відповідний oklch(). Один нюанс: OKLCH уміє описувати й кольори поза діапазоном sRGB, і їх обрізає до того, що здатен показати sRGB. Тому дуже насичений oklch() на дисплеї з широким гамутом виглядатиме не так, як його HEX-варіант.

Чи можна використовувати oklch() у продакшн CSS?

Так. Усі сучасні версії Chrome, Edge, Firefox і Safari підтримують oklch(), і запис став популярним для дизайн-токенів (Tailwind CSS 4 визначає в ньому всю палітру). Для дуже старих браузерів додайте HEX як резерв рядком вище. Цей інструмент дає обидва значення.

Чому гармонії змінюються, коли перемикаю на коло RYB?

Тому що те, що вважається «протилежним», залежить від розташування відтінків по колу. Коло RYB рівномірно розкладає пігментні основні кольори, тож комплементарні пари відповідають тому, що знають художники: червоний і зелений, синій і оранжевий, жовтий і фіолетовий. Колеса HSV і HSL розкладають відтінки за змішуванням світла, тому пара у них червоний і блакитний. Жоден варіант не помилковий: RYB відповідає художній освіті, HSV і HSL тому, що роблять екрани.

Чи можна довіряти значенням CMYK для друку?

Сприймайте їх як орієнтир. Справжня конвертація для друку залежить від ICC-профілю (англійською) принтера, паперу та фарби. Той самий колір RGB вийде інакше на крейдованому й на некрейдованому папері. Значення тут рахує стандартна формула, яка наближає результат, але фінальний відбиток це справа друкарні.

Де кнопка піпетки у Firefox чи Safari?

Вона схована навмисно. EyeDropper API (MDN, англійською), на якому тримається кнопка, наразі вміють лише браузери на Chromium (Chrome, Edge, Opera). Решта функцій інструмента працює всюди, бракує лише вибору кольору з екрана. Якщо потрібен колір із зображення, скористайтеся онлайн піпеткою, яка працює в усіх браузерах.

Чи лишається моя історія кольорів приватною?

Так. Історія зберігається в localStorage вашого браузера на вашому пристрої. Ніщо з того, що ви вибираєте, вставляєте чи копіюєте, нікуди не надсилається. Увесь інструмент працює як JavaScript у браузері, що можна перевірити на вкладці «Мережа» в інструментах розробника.