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

Цей безкоштовний генератор колірних палітр перетворює один початковий колір на повну гармонійну схему за допомогою класичних розрахунків теорії кольору. Виберіть базовий колір за допомогою кола, повзунка відтінку або ввівши hex-код, а потім оберіть правило гармонії, щоб миттєво побачити відповідний набір кольорів. Кожен зразок можна скопіювати в буфер обміну одним кліком, готовий для вставлення прямо в CSS, Tailwind, Figma чи будь-який інструмент дизайну.

• Виберіть базовий колір — перетягніть точку на колірному колі, рухайте повзунок відтінку, введіть шестизначне значення hex або скористайтеся вбудованим засобом вибору кольору у верхній панелі.
• Оберіть правило гармонії — відкрийте випадне меню «Колірна гармонія» та виберіть потрібний зв'язок (комплементарний, аналоговий, тріадний тощо).
• Скопіюйте свої кольори — наведіть курсор на зразок у смузі палітри, щоб побачити його hex-код, а потім клацніть, щоб скопіювати.
• Перевірте доступність — скористайтеся вбудованою перевіркою контрасту WCAG вище, щоб переконатися, що ваші кольори тексту та фону читабельні.
• Досліджуйте варіанти — перегляньте сітку «Усі палітри гармонії», щоб порівняти всі правила для вашого базового кольору, або почніть з однієї з підібраних палітр.

Сім правил колірної гармонії

Колірні гармонії описують, як відтінки пов'язані один з одним на колірному колі. Кожне правило створює інший настрій і рівень контрасту:

• Комплементарна — два відтінки, розташовані прямо навпроти (на відстані 180°). Максимальний контраст і енергія; чудово підходить для заклику до дії.
• Аналогова — сусідні відтінки (приблизно за 30° один від одного). Спокійна, цілісна та природна на вигляд.
• Тріадна — три відтінки, рівномірно розташовані на відстані 120°. Яскрава, але збалансована.
• Спліт-комплементарна — базовий колір плюс два відтінки, що оточують його комплемент. Сильний контраст із меншою напругою, ніж у чистій комплементарній.
• Тетрадна — чотири відтінки, що утворюють прямокутник на колі. Насичена та різноманітна; найкраще працює з одним домінантним кольором.
• Квадратна — чотири відтінки, рівномірно розташовані на відстані 90°. Сміливе та збалансоване рішення з однаковою візуальною вагою.
• Монохромна — один відтінок із різною світлотою та насиченістю. Елегантна, чиста та проста у застосуванні.

Перевірка колірного контрасту для доступності

Гарна палітра все одно має бути читабельною. Рекомендації щодо доступності вебконтенту (WCAG) визначають мінімальні коефіцієнти контрасту між текстом і його фоном: 4.5:1 для звичайного основного тексту та 3:1 для великого тексту для рівня AA, а також 7:1 для суворішого рівня AAA. Перевірка контрасту на цій сторінці обчислює точний коефіцієнт між будь-якими двома кольорами та показує, чи проходять вони AA чи AAA, тож ви можете скоригувати палітру до її випуску.

Часті запитання

Чи безкоштовний генератор колірних палітр?

Так. Інструмент повністю безкоштовний як для особистих, так і для комерційних проєктів, без потреби в реєстрації.

Які формати кольору він підтримує?

Ви можете вводити та копіювати кольори як hex-коди, а кожен згенерований колір розраховується на основі його базових значень HSL і RGB.

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

Використовуйте комплементарну або спліт-комплементарну для яскравих акцентів, аналогову або монохромну для спокійних і цілісних інтерфейсів, а тріадну або квадратну — коли потрібна насиченіша багатоколірна схема.