Як користуватися: Генератор палітр і перевірка контрасту
- 1
Почніть із кольору
Введіть або оберіть базовий колір, потім виберіть гармонію, наприклад аналогову, тріаду чи розділену комплементарну, — або перемішайте випадкову палітру.
- 2
Зафіксуйте й уточніть
Зафіксуйте зразки, що вам подобаються, перш ніж перемішувати знову, змініть будь-який зразок вручну або витягніть із фото п’ять домінантних кольорів.
- 3
Перевірте читабельність
Відкрийте вкладку «Контраст», щоб перевірити текст на тлі за WCAG 2.2 рівнів AA та AAA, застосуйте запропоноване виправлення й перегляньте палітру з погляду дальтонізму.
- 4
Експортуйте
Скопіюйте змінні CSS, тему Tailwind v4 або конфігурацію v3, SCSS чи JSON з відтінками 50–950 або завантажте зразки PNG.
Ліміти та Pro
Усе безкоштовно: палітри з 5 кольорів, 6 гармоній, необмежене перемішування й експорт, зображення до 50 MB для добору кольорів, зразки PNG завширшки 1600 пікселів.
Про інструмент: Генератор палітр і перевірка контрасту
Генератор палітр будує схему з п’яти кольорів і все, що потрібно навколо неї дизайн-системі. Гармонії обертають базовий відтінок на колfirовому колі HSL: аналогова робить кроки по 30° в обидва боки, комплементарна додає протилежний відтінок, розділена комплементарна бере два відтінки поруч із протилежним, тріада розміщує три відтінки з кроком 120°, тетрада використовує квадрат 90°, а монохромна зберігає один відтінок на п’яти рівнях світлості. Випадковий режим поважає зафіксовані зразки, а режим «Із зображення» кластеризує пікселі фото в OKLab, щоб знайти п’ять найпоширеніших відмінних кольорів.
Для кожного кольору вкладка «Відтінки» створює 11-ступеневу шкалу 50–950 в OKLCH, де найближчий до вашого кольору крок має точне значення, або 13 тонів системи Material 3 HCT разом із п’ятьма ключовими палітрами, які вивела б тема Material. Перевірка контрасту використовує формулу яскравості WCAG 2.2, ніколи не округлює коефіцієнт угору й пропонує найближчий колір, що проходить перевірку, змінюючи лише світлість і зберігаючи відтінок. Таблиця показує коефіцієнт кожної пари палітри щодо білого й чорного.
Симуляції охоплюють протанопію, дейтеранопію, тританопію та ахроматопсію за матрицями Machado й позначають зразки, що зливаються між собою. Експорт називає кольори за відтінком і приймає ваші власні назви. Інструмент не оцінює, чи пасують кольори бренду, а симуляції лише наближено показують, як бачать люди з порушенням колірного зору; вони не замінюють тестування з ними.
Приватність
Усі обчислення кольорів, перевірки контрасту й аналіз зображення виконуються в цій вкладці браузера: фото, з якого ви беретеся кольори, читається з вашого диска на невелике полотно й нікуди не надсилається. Палітру можна зберегти в адресі сторінки, щоб скопійоване посилання відкрило її знову; на сервері нічого не зберігається.
Можливості
Шість гармоній і кольори із зображення
Від аналогової до тетради з одного базового кольору, випадкове перемішування із фіксацією або домінантні кольори фото.
Контраст WCAG 2.2 з виправленнями
AA та AAA для звичайного й великого тексту та графіки інтерфейсу, найближчий прийнятний колір — одним кліком.
Експорт для розробників
Змінні CSS, Tailwind v4 і v3, SCSS та JSON у HEX, RGB, HSL або OKLCH, а також зразки PNG.