Задайте базовый цвет, получите стартовую шкалу оттенков и проверьте, как она работает в интерфейсе: фон страницы, блоки, текст, ссылки и кнопки. Палитру можно скорректировать вручную (это сразу отразится в интерфейсе), а результат забрать как CSS‑переменные.
Введите HEX или OKLCH, выберите цвет визуально или сгенерируйте случайный.
форматы HEX, oklch()
Назначьте оттенки основным элементам страницы. Рядом показывается контраст относительно связанного фона.
Можно скорректировать сгенерированные значения — изменения сразу применятся к странице, проверкам и CSS‑переменным.
Color Scheme помогает собрать стартовую UI‑палитру от одного базового цвета: получить шкалу оттенков, назначить цвета ролям интерфейса, проверить контраст по WCAG и скопировать CSS‑переменные.
Инструмент не заменяет ручной подбор цвета, но ускоряет первый этап: показывает, где палитра уже работает, а где оттенки, роли или контраст требуют настройки.
Диагностическая матрица всех сочетаний оттенков. По умолчанию показаны пары с контрастом 4.5:1 и выше.