Цветовая схема: комплементарные цвета и контраст
Цветовая схема: комплементарные цвета и контраст
Генератор палитр по пяти классическим гармониям цветового круга: комплементарная, аналоговая, триада, разделённо-комплементарная и тетрада. Клик по образцу копирует HEX-код.
Для базового цвета считается контраст с белым и чёрным текстом по формуле WCAG с уровнями AA и AAA — можно сразу оценить, читаем ли текст. Плюс генератор токенов дизайн-системы: шкала из семи оттенков в CSS-переменных и JSON.
Частые вопросы (FAQ)
Как собрать палитру для лендинга с нуля?
Типовой путь: берёте фирменный цвет бренда, генерируете комплементарную схему, проверяете контрастом, читаем ли белый текст на основном цвете (нужно ≥4.5:1), а из шкалы токенов берёте самый тёмный оттенок для текста и светлый для фона секций.
Что означает «контраст 4.5:1» на практике?
Это отношение яркостей текста и фона по формуле WCAG. Наглядный пример: белый текст на жёлтом #ffcc00 даёт 1.6:1 — нечитаем; на тёмно-синем #1a3366 — 12:1, комфортно. Инструмент считает число и уровень AA/AAA автоматически.
Как перенести сгенерированные токены в проект?
Блок «Токены дизайн-системы» выдаёт шкалу brand-100…brand-700 в двух форматах: CSS-переменные для :root и JSON для Tailwind-конфига или токенов Figma (импортируются плагинами типа Tokens Studio).