colorPaletteFinder побудований на класичних принципах теорії кольору в поєднанні із сучасними вимогами до цифрового дизайну. Ми розробили зручний інтерфейс, де вам не потрібно вручну обчислювати відтінки чи перевіряти коефіцієнти контрасту — інструмент бере всю важку роботу на себе.
1. Інтерактивне колірне коло
Основою colorPaletteFinder є інтерактивне HSL-колірне коло. На відміну від стандартних прямокутних засобів вибору кольору, наше кругле колірне коло безпосередньо відображає динаміку теорії кольору.
- Відтінок (кут): Перетягуйте точку по зовнішньому краю, щоб змінити основне сімейство кольору (червоний, синій, зелений тощо).
- Насиченість (відстань від центру): Перетягуйте точку до центру, щоб зробити колір сіруватим і приглушеним, або до краю — для максимальної яскравості.
- Світлота: Налаштовується динамічно, щоб згенеровані кольори гармонії зберігали збалансовану візуальну вагу.
Пересуньте точку основного кольору й спостерігайте, як усі залежні кольори гармонії миттєво адаптуються в реальному часі, зберігаючи свої суворі математичні зв'язки.
2. Вибір правила гармонії
Залежно від естетики, якої ви прагнете досягти, ви можете обрати одне із семи різних математично доведених правил колірної гармонії:
Комплементарна
Кольори, розташовані прямо навпроти один одного на колірному колі (на відстані 180°). Створює максимальний контраст і потужну енергію.
Аналогова
Кольори, що розташовані поруч на колі (на відстані 30°). Це створює спокійний і комфортний, природний на вигляд дизайн.
Тріадна
Три кольори, рівномірно розташовані по колу (на відстані 120°). Дає високий контраст, зберігаючи кращий колірний баланс, ніж комплементарні схеми.
Спліт-комплементарна
Базовий колір плюс два кольори, суміжні з його комплементом. Дає сильний візуальний контраст комплементарної схеми, але з меншою напругою.
Монохромна
Варіації світлоти та насиченості одного відтінку. Створює цілісний, чистий та елегантний вигляд.
3. Перевірка контрасту WCAG
Створити гарну палітру — це лише половина роботи; кольори також мають бути доступними для всіх користувачів. Зокрема, текст має бути читабельним на тлі кольорів фону.
colorPaletteFinder має вбудовану перевірку контрасту внизу інструмента. Виберіть будь-які два згенеровані кольори (наприклад, фон і колір тексту), і вона обчислить коефіцієнт контрасту.
- Стандарт AA: Вимагає коефіцієнта контрасту щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту.
- Стандарт AAA: Золотий стандарт доступності, що вимагає коефіцієнта щонайменше 7:1 для звичайного тексту.
4. Копіювання та експорт
Коли ваша ідеальна палітра згенерована, інтегрувати її у проєкт зовсім просто.
Наведіть курсор на будь-який зразок кольору в смузі палітри, щоб побачити його точний HEX-код. Клацання по зразку миттєво копіює шестизначний HEX-код у буфер обміну (наприклад, #1A2B3C), готовий до вставлення прямо в CSS, конфіги Tailwind, Figma чи Adobe Creative Cloud.