Хроматический компас OKLCH

Превратите один цвет в рабочую палитру.

Постройте реальные цветовые связи на перцептивном круге. Исходный цвет останется точным, каждый дополнительный цвет будет честно приведён к sRGB, а данные о контрасте останутся рядом.

Текущая геометрияКомплементарная

01 / Геометрия гармонии

Выберите связь между цветами, а не случайное настроение.

Каждая схема вращает одинаковые светлоту и насыщенность вокруг оси оттенка OKLCH. Правило остаётся проверяемым, а введённый цвет точно сохраняется первым образцом.

Комплементарная

Основной оттенок и его противоположность на 180° образуют самое сильное двухточечное разделение.

01
#7C3AED
oklch(54.134% 0.24659 293.009)
Подробнее ↗
02
#717600
oklch(54.134% 0.24659 113.009)Приведён к sRGB
Подробнее ↗

02 / Ведомость контраста

Проверьте пару до назначения роли.

Контраст с чёрным и белым рассчитан для каждого sRGB-значения. Более сильная пара указана, но пригодность всё равно зависит от компонента.

ЦветЧёрный текстБелый текстБолее сильная пара

#7C3AED3,69:15,70:1#FFFFFF

#7176004,29:14,89:1#FFFFFF

Эти коэффициенты относятся только к парам непрозрачного текста и фона. Основной и крупный текст, элементы управления, границы, состояния и индикаторы фокуса нужно проверять в готовом интерфейсе.

03 / Передача разработчику

Скопируйте палитру без повторного преобразования.

Стабильные имена пользовательских свойств и шестизначные sRGB-значения готовы для таблицы стилей, дизайн-токенов или прототипа.

:root {
  --color-harmony-1: #7C3AED;
  --color-harmony-2: #717600;
}

04 / Метод и ограничения

Детерминированная отправная точка, а не гарантия вкуса.

Перцептивное вращение оттенка

Углы гармонии вращают оттенок в OKLCH, сохраняя светлоту и насыщенность. Первый цвет всегда остаётся точным введённым sRGB-значением.

Явное приведение к gamut

Поворот в OKLCH может выйти за пределы sRGB. Hexees применяет алгоритм CSS Color 4 и отмечает каждое изменённое fallback-значение вместо простого обрезания каналов.

Контраст зависит от роли

Гармония не означает читаемость. Таблица даёт первичную проверку текста; затем проверьте реальный компонент, размер, состояние и нетекстовые границы.

Открыть проверку контраста →