Онлайн выбор цвета
Выберите цвет на круге, доведите его до идеала на холсте насыщенности и получите значение в любом формате, на котором говорит ваш проект — от #RRGGBB до oklch(). Этот выбор цвета умеет и то, что обычно пропускают другие инструменты: три геометрии круга, включая художественный круг RYB, наложения гармоний, которые сами строят палитру, альфа-канал и экспорт всей палитры в один клик как CSS-переменные, SCSS или JSON. Все вычисления происходят локально, у вас в браузере.
Три круга, а не один
Селектор Режим круга меняет саму геометрию круга:
- HSV и HSL — цифровые круги: оттенки расположены так, как их смешивают экраны на RGB. Разница между ними — в поведении квадратного холста: у HSV самый яркий угол соответствует чистому оттенку, у HSL чистые оттенки лежат при светлоте 50 %, а выше — белый.
- RYB (художника) располагает оттенки так, как их учили художники: красный, желтый и синий — основные цвета, а между ними оранжевый, зеленый и фиолетовый. Практическая польза видна в гармониях: на круге RYB дополнительным к красному оказывается зеленый, а к синему — оранжевый — классические пигментные пары, тогда как цифровой круг ставит в пару красному голубой (cyan). Если “комплементарная” палитра из обычного выбора цвета когда-либо казалась вам неправильной на глаз — вот почему.
Гармонии, которые сами строят палитру
Выберите правило в разделе Цветовая гармония, и круг отметит сопутствующие цвета, которые сразу появятся как готовая палитра:
- Комплементарная — один противоположный цвет. Самый сильный контраст; используйте для единственного акцента на фоне доминирующего фирменного цвета.
- Раздельно-комплементарная — два соседа дополнительного цвета. Контраст почти такой же сильный, но гораздо проще сбалансировать.
- Триадная — три равномерно расставленных оттенка. Живая, но устойчивая схема; пусть один цвет доминирует, а два других используйте экономно.
- Тетрадная (квадрат) — четыре оттенка. Насыщенные схемы для иллюстраций и визуализации данных; в интерфейсах сбалансировать сложно.
- Аналоговая — ближайшие соседи по кругу. Низкое напряжение, хорошо подходит для фонов и градиентов.
- Монохромная — один оттенок с разной светлотой. Самый безопасный выбор для состояний интерфейса (наведение, активное, отключенное).
Панель палитры копирует весь набор одним кликом в выбранном формате: обычный HEX, RGB, HSL, OKLCH, готовые к вставке CSS-переменные (--color-1: …), SCSS-переменные или JSON для передачи в код.
Вставьте что угодно, получите все
Поля ввода принимают практически любую цветовую запись: #f80, #ff8800, восьмизначный 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 | Hexadecimal | Стандарт для веба. Компактный, поддерживается повсеместно, легко копируется. 8 знаков добавляют альфа-канал. |
| 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 | Ориентация на печать. Приблизительное преобразование для разговора с дизайнерами печатной продукции — итоговые значения всегда определяет цветовой профиль принтера. |
Мелочи, которые экономят время
- История ведется сама. Последние 24 цвета, с которыми вы работали, переживают обновление страницы — они хранятся только в локальном хранилище вашего браузера и никуда не отправляются.
- Пипетка. В браузерах с API EyeDropper (Chrome и Edge) можно взять цвет из любой точки экрана, даже за пределами окна браузера.
- Управление с клавиатуры. Круг и холст насыщенности реагируют на стрелки для точной, попиксельной настройки.
- Предварительные настройки охватывают распространенные базовые цвета, когда нужна просто быстрая отправная точка.
Часто задаваемые вопросы (FAQ)
Безопасно ли использовать oklch() в продакшен-CSS?
Да. Все актуальные версии Chrome, Edge, Firefox и Safari поддерживаютoklch(), и он стал предпочтительной записью для дизайн-токенов (Tailwind CSS 4 определяет всю свою палитру именно в нем). Для очень старых браузеров добавьте HEX-запасной вариант строкой выше — этот инструмент дает оба значения.