Як користуватися

Введіть основний колір або виберіть його. Кнопка «Нова випадкова основа» вибере колір за вас.
Виберіть гармонійне поєднання. Параметр «Відтінки й тони» створює шкалу з 11 кроків — від дуже світлого до дуже темного.
Зафіксуйте кольори, які хочете зберегти, і продовжуйте шукати інші основні кольори.
Виберіть HEX, власні властивості CSS або JSON, задайте назву й скопіюйте код.

Як це працює

Гармонійні палітри створюються обертанням відтінку на колірному колі: комплементарна додає протилежний відтінок (180°), аналогова — сусідні відтінки на відстані 30° і 60° з кожного боку, тріадна використовує три відтінки з інтервалом 120°, тетрадна — чотири з інтервалом 90°, а роздільно-комплементарна — два відтінки поруч із комплементарним (150° і 210°).

Обертання відбувається в OKLCH, а не в HSL. OKLCH зберігає незмінною сприйману світлість, тож жовтий і синій кольори в одній палітрі здаються приблизно однаково яскравими, а жовтий не ріже око. Якщо після обертання колір виходить за межі того, що можуть відобразити екрани sRGB, його насиченість зменшується, доки він не потрапить у діапазон, а світлість і відтінок залишаються незмінними.

Шкала відтінків і тонів використовує фіксовані кроки світлості OKLCH із позначеннями від 50 до 950, подібно до назв у Tailwind CSS. Біля білого й чорного насиченість зменшується, щоб найсвітліші тони не мали неонового вигляду. Гармонійні палітри — це лише відправна точка: перш ніж використовувати кольори в контенті, перевірте контрастність пар тексту й фону.

Приклади

Фірмовий колір з акцентом

Для основного кольору #3366cc параметр «Комплементарна» додає #8c6500 — теплий охристий колір із такою самою світлістю OKLCH. Синій і оранжево-жовтий часто поєднують як акцентні кольори поруч із синім фірмовим кольором.

Токени дизайну для бібліотеки компонентів

Виберіть «Відтінки й тони», задайте назву primary та експортуйте змінні CSS. Ви отримаєте --primary-50 до --primary-950 — готові для фонів (50–100), меж (200–300) і тексту (700–900).

Зберігайте один колір під час пошуку варіантів

Зафіксуйте другий колір тріадної палітри, а потім спробуйте різні основні кольори. Зафіксований зразок збереже значення HEX, поки інші кольори змінюватимуться.

Поширені запитання

Чому мої кольори відрізняються від кольорів у інструменті з колірним колом HSL?

Цей інструмент обертає відтінок у перцептивному колірному просторі OKLCH. Його кути відтінку не збігаються точно з HSL, тому «протилежний» колір може трохи відрізнятися від того, який показує інструмент із колірним колом HSL.

Чи можна використовувати JSON у Tailwind CSS?

JSON зіставляє назви зі значеннями HEX у тому самому форматі, який Tailwind приймає для кольору в конфігурації теми. У Tailwind 4 також можна вставити змінні CSS у блок @theme, попередньо перейменувавши їх на --color-…

Чи доступні згенеровані палітри?

Не автоматично. Гармонійне поєднання нічого не говорить про контрастність тексту й фону. Перевірте кожну пару, яку плануєте використовувати, за допомогою перевірки контрастності.

Конфіденційність

Палітри створюються у вашому браузері. Ваші кольори нікуди не надсилаються й не зберігаються.