Цветовой круг
Выберите цвет на круге, доведите его до нужного оттенка на холсте насыщенности и яркости и прочитайте значение в любом формате, с которым работает ваш проект: от #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 цвета переживают обновление страницы. Они хранятся только в локальном хранилище вашего браузера и никуда не отправляются.
- Пипетка. В браузерах с API EyeDropper (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. Этот инструмент дает оба значения сразу.