Обертайте відтінок та крок світлості в перцептивно рівномірному просторі 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 — все, що має робити панель палітр.