Генератор CSS-тем

Превратите цвета бренда в CSS-переменные

Практичной веб-теме нужно больше, чем один основной цвет. Кнопкам нужны состояния наведения, карточкам — поверхности, кольцам фокуса — прозрачность, а границам — оттенок, сочетающийся с фоном страницы. Этот генератор CSS-тем исходит из компактного набора выборов бренда и получает из него небольшой блок пользовательских свойств, который можно вставить в таблицу стилей. Результат намеренно простой: полезные переменные для лендинга, прототипа, сайта документации или небольшого приложения без громоздкого конвейера токенов.

Выберите основной и акцентный цвета, а затем задайте фон и цвет текста, определяющие общий контраст. Браузер выводит значения для наведения, поверхности, приглушённого текста, границы и фокуса, корректируя яркость HSL и применяя прозрачный RGB там, где это уместно. Карточка предпросмотра использует те же переменные, что показаны в выводе, поэтому вы быстро увидите, выглядит ли набор цельным, прежде чем копировать его.

Использование сгенерированного блока :root

Пользовательские свойства CSS проще всего поддерживать, когда они описывают назначение, а не сырой оттенок. Название вроде --color-primary подсказывает будущим участникам проекта, где использовать значение, тогда как --color-blue после редизайна может стать неточным. Вставьте сгенерированный блок :root в начало таблицы стилей, а затем ссылайтесь на переменные в компонентах. Например, кнопки могут использовать --color-primary, состояния наведения — --color-primary-hover, а панели — --color-surface вместе с --color-border.

Доработка стартовой темы

Производные цвета — это хороший первый набросок, а не замена тестированию. Просмотрите тему с реальными заголовками, основным текстом, отключёнными элементами управления, полями форм, ссылками и уведомлениями. Если цвет наведения кажется слишком тёмным, вручную повысьте его яркость. Если границы пропадают на фоне, увеличьте их контраст. И самое главное — проверьте контраст текста на кнопках и поверхностях. Генератор выполняет всю работу в браузере, поэтому безопасен для раннего исследования бренда, но отточенная дизайн-система по-прежнему требует проверки человеком и корректировок на уровне компонентов.