Поворачивает оттенок и регулирует светлоту в перцептуально равномерном OKLCH пространстве — те же правила гармонии, но палитры выглядят лучше, чем в HSL. Каждый полученный образец можно настраивать независимо с отображением живого контраста по WCAG.
:root {
--harmony-1: #2b9d8f;
--harmony-2: #957abc;
--harmony-3: #b47b44;
}[
{
"hex": "#2b9d8f",
"oklch": "oklch(63.0% 0.101 183.0)",
"role": "base"
},
{
"hex": "#957abc",
"oklch": "oklch(63.0% 0.101 303.0)",
"role": "harmony-2"
},
{
"hex": "#b47b44",
"oklch": "oklch(63.0% 0.101 63.0)",
"role": "harmony-3"
}
]Перцептуально равномерные гармонии с динамическим контролем контраста и отображением цветового охрана на каждом шаге.
Введите или сгенерируйте случайный HEX, затем выберите комплементарную, разделенно-комплементарную, триадную, тетрадную, аналогичную или монохромную схему.
Каждый полученный образец имеет ползунки L/C/H в пространстве OKLCH; значения вне цветового охрана сопоставляются с ближайшим отображаемым цветом.
Следите за динамическим контрастом с белым/черным, копируйте CSS-переменные или JSON, или отправьте всю набор на доску палитр.
Три распространенных вопроса о гармониях OKLCH.
Продолжите отсюда и используйте цвета в работе.
Перетащите колесо, чтобы выбрать базовый цвет, получите шесть схем гармонии в реальном времени, откройте в панели или экспортируйте PNG.
Настройте L / C / H в перцептивно однородном пространстве OKLCH с предварительным просмотром в реальном времени и выводом oklch() / HEX / RGB.
Введите один фирменный цвет, получите основной / дополнительный / успешный / предупреждающий / опасный — экспортируется как конфигурация Tailwind и CSS-переменные.
Пробел для рандомизации, блокировка, перетаскивание для изменения порядка, обмен по URL — всё, что должна делать панель палитр.