Цветовая схема сайта — семантические CSS-токены

Сгенерируйте цветовую схему сайта в браузере. Выберите фирменный HEX (пример бирюзы #0F6E8C), получите общие нейтрали, action/hover/soft/focus, нейтральные ссылки, фиксированные статусные цвета, превью chrome и самопроверки AA; затем скопируйте :root CSS или JSON. На правилах — не облачный ИИ; ничего не загружается.

Темы бренда

Общие нейтрали и статусы; каждая тема переопределяет только производные бренда. Макс. 4 темы.

Светлый превью UI

Самопроверка контраста (активная тема)

Примитивы (активная тема + общие нейтрали)

Токен	Значение

Семантика (активная тема)

Токен	Значение	Роль

Как это работает

Укажите до четырёх тем бренда (id + HEX). Инструмент держит общую нейтральную лестницу, выводит action-токены из каждого бренда, сопоставляет семантические роли (включая нейтральные ссылки и фиксированные статусы), рисует светлый chrome, запускает самопроверки AA и позволяет копировать CSS-переменные или JSON — всё локально.

Ожидаемые правила

Слои токенов, ссылка ≠ action, независимость статусов, подсказки контраста и приватность.

Примитивы хранят сырые нейтрали и производные бренда. Семантика называет назначение (bg, surface, link, action…). Компоненты должны ссылаться только на семантику.
Бренд → --action; hover затемняет ~22%; soft ≈ 10% alpha; focus-ring ≈ 40% alpha; --bg — слегка тонированная нейтраль.
Ссылки отображаются на text / text-strong (нейтраль). Не привязывайте --link по умолчанию к --action.
Danger / success / warning / info фиксированы между темами, чтобы бренд никогда не заменял семантику ошибки.
Приватность: генерация, превью и копирование в буфер — в этой вкладке. Фирменные цвета не загружаются.

Пример

Загрузите пример (id темы teal, #0F6E8C). В превью — белая поверхность, мягкая бирюзовая подсветка активного пункта (без левой полоски), нейтральные ссылки текста и красная строка danger. Семантика связывает --link с цветом текста (не с --action). Копирование CSS даёт нейтрали в :root и overrides html[data-theme="teal"].

Когда это уместно

Chrome инструмента или SaaS: читаемая светлая оболочка с акцентами бренда на выделении и фокусе, а не на каждой ссылке.
Ребрендинг лендинга: меняйте бренды через html[data-theme], сохраняя нейтральный каркас и статусные цвета.
Передача дизайн→разработка: вставляйте :root CSS-переменные вместо HEX-списков со скриншотов.

Frequently asked questions

«Умная» схема — это генерация ИИ?

Здесь «умная» значит детерминированные правила: нейтрали фиксированы, бренд порождает action/hover/soft/focus, ссылки остаются нейтральными, статусы не следуют за брендом. Без вызова модели и без загрузки — расчёт в этой вкладке.

Почему ссылки не в цвете бренда?

Ссылки по умолчанию берут цвета текста, чтобы страница не превратилась в стену гиперссылок бренда. Фирменный цвет оставлен для действий, выделения, колец фокуса и лёгких soft-заливок.

Почему статусные цвета не меняются с темой?

Danger, success, warning и info не меняются между темами. Янтарный бренд не должен стать цветом ошибки — иначе весь интерфейс выглядит как тревога.

Когда лучше Сгенерировать шкалу цвета бренда?

Сгенерировать шкалу цвета бренда нужна для шкалы 50–950 или списков HEX/HSL/OKLCH. Эта страница — полная светлая семантическая схема (bg/surface/link/action/status) для вставки.

Насколько полна самопроверка контраста?

Самопроверка покрывает несколько ключевых пар активной темы. Для произвольных пар или AAA откройте проверку контраста WCAG и вставьте HEX любого токена.

Вопросы и отзывы

Что-то неясно, сломано или отсутствует? Напишите сообщение ниже — мы читаем каждую заметку об этих инструментах.