Генератор палітри кольорів

Як користуватися генератором палітри кольорів

1. Виберіть Базовий колір зразком кольору або введіть будь-який код у полі Код базового кольору (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), назва CSS…).
2. Виберіть Гармонія: Додаткова, Аналогова, Тріада, Розділена додаткова, Тетрада (прямокутник), Квадрат або Монохромна.
3. Виберіть Колірне коло: HSL (класичне) або OKLCH (перцептивне). Палітра оновлюється, щойно ви змінюєте будь-який параметр; кнопка Згенерувати палітру теж оновлює її.
4. Скопіюйте окремий колір кнопкою Копіювати під його зразком або виберіть формат у Експортувати як (Список HEX, Змінні CSS, Змінні SCSS, Масив JSON чи Кольори Tailwind) і скористайтеся Копіювати або Завантажити для всієї палітри.

Кожен зразок показує свій код HEX чорним або білим кольором – залежно від того, який дає кращий контраст, – і своє положення відносно базового кольору (наприклад +120°).

Колірні гармонії

Колірні гармонії – це фіксовані кути на колірному колі. Починаючи від базового відтінку, інструмент повертає відтінок і зберігає насиченість та світлість бази.

• Додаткова (0°, 180°): протилежний колір. Максимальний контраст, чудово підходить для кнопки заклику до дії на тлі основного фірмового кольору.
• Аналогова (−60°, −30°, 0°, +30°, +60°): сусіди на колі. Спокійні, природні поєднання, що добре працюють для тла й ілюстрацій.
• Тріада (0°, 120°, 240°): три рівновіддалені відтінки. Жвава й збалансована схема; зазвичай один колір домінує, а два інші є акцентами.
• Розділена додаткова (0°, 150°, 210°): два сусіди додаткового кольору. Сильний контраст із меншою напругою, ніж у чистої додаткової пари.
• Тетрада (прямокутник) (0°, 60°, 180°, 240°): дві додаткові пари. Багаті палітри, яким для цілісності потрібен один домінантний колір.
• Квадрат (0°, 90°, 180°, 270°): чотири рівновіддалені відтінки.
• Монохромна: один відтінок у п’яти кроках світлості, від темного до світлого. Ідеальна для станів інтерфейсу, діаграм і стриманих дизайнів.

Коло HSL чи OKLCH?

Коло HSL (класичне) – традиційне, його використовує більшість дизайнерських інструментів і посібників. Його недолік у тому, що однакові кути не виглядають однаково яскравими: жовтий на 60° виглядає значно світлішим за синій на 240° за тієї самої світлості HSL.

Коло OKLCH (перцептивне) повертає відтінок у колірній моделі Oklab, яку розроблено так, щоб світлість здавалася рівномірною. Палітри на її основі мають кольори схожої візуальної ваги, що допомагає з доступним контрастом. Деякі повернуті кольори можуть опинитися поза межами того, що показує екран; тоді інструмент трохи знижує їхню насиченість, щоб їх можна було відобразити.

Використання експортованої палітри

Змінні CSS створюють блок :root із --color-1, --color-2… який можна вставити в таблицю стилів. Змінні SCSS дають рядки $color-1: …;, Масив JSON дає список рядків HEX для скриптів, а Кольори Tailwind дає об’єкт colors із ключами 100, 200, 300… для вставки в конфігурацію Tailwind.

Перш ніж випускати результат, перевірте контраст тексту: гармонія гарантує приємні відтінки, а не читабельний текст. Для основного тексту використовуйте темні чи світлі нейтральні кольори, а насичені кольори палітри лишайте для акцентів, кнопок і графіки.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.