Генератор доступной UI‑палитры
Генератор доступной UI‑палитры, который из одного цвета строит контрастную, визуально гармоничную схему и сразу отдаёт готовые CSS‑переменные. Любое изменение любого цвета реактивно применяется ко всей странице, чтобы оценить палитру в контексте, близком к реальному интерфейсу.
Выбор базового цвета
форматы HEX, oklch()
Палитра
Выбери цвета элементам страницы
Задай цвет для каждой роли интерфейса.
Все цветовые пары
По умолчанию показываются пары с коэффициентом контраста 4.5 и выше.
Описание
Показать описание
Color Scheme — генератор доступных UI‑палитр: он строит цельную, визуально согласованную цветовую схему из одного базового оттенка, со встроенной проверкой контраста по WCAG и готовыми CSS‑переменными на выходе.
Все цвета наследуют общий тон, поэтому палитра обычно выглядит согласованно между собой. При этом читаемость подтверждается отдельно: для пар «текст / фон» рассчитывается коэффициент контрастности, чтобы сразу видеть сочетания, проходящие WCAG AA и AAA.
- Один цвет — одна палитра. Задаётся один базовый оттенок, все остальные цвета строятся от него. Это даёт визуальную целостность и предсказуемую сочетаемость.
- Доступность. Встроенная проверка контраста по критериям WCAG AA и AAA. Инструмент показывает пары для обычного и крупного текста, а также ориентиры для нетекстовых элементов.
- CSS‑переменные для кода. Результат — именованные токены (
--color-text-primary,--color-surface,--color-link), готовые к переносу в проект. - Семантические токены. Цвета экспортируются как CSS‑переменные с осмысленными именами, что удобно для тем и компонентов.
Сценарии использования
- Быстро собрать доступную цветовую основу для веб‑интерфейса, лендинга или прототипа.
- Собрать стройную монохромную палитру без хаотичного ручного подбора.
- Проверить контрастные пары по рекомендациям WCAG.
- Использовать как старт для токен‑ориентированной разработки с переносом в CSS‑переменные.
CSS‑переменные
Посмотреть CSS или