Бесплатный онлайн-инструмент
Цветовая схема для сайта
Задайте один фирменный цвет — получите готовую схему страницы: фоны, текст, карточки и акцентный блок. Любой цвет можно поправить вручную.
Заголовок вашей страницы
Вторичный текст: подзаголовок, описание услуги или лид абзаца. Проверьте, как он читается на выбранном фоне.
Секция на чередующемся фоне
Карточка первая
Блок с фоном чуть светлее или темнее секции.
Подробнее →Карточка вторая
Бордеры и текст берутся из общей схемы.
Подробнее →Карточка третья
Акцентный цвет — только для ссылок и кнопок.
Подробнее →Акцентный блок: призыв к действию
Выделенная секция для формы, баннера или спецпредложения.
Как пользоваться
- Выберите фирменный цвет в палитре или вставьте HEX-код — например, цвет логотипа или бренда.
- Переключите режим «Светлая» или «Тёмная» — превью страницы сразу перекрасится.
- Ниже превью — девять ролей схемы: фон страницы, чередующийся фон секций, карточки, акцентный блок, бордеры, два цвета текста, акцент и текст на акценте. Иконка копирует HEX-код.
- Не понравился отдельный цвет — нажмите на его свотч и выберите свой: превью и экспорт обновятся, остальная схема не тронется.
- Кнопка «CSS-переменные» отдаёт схему готовым блоком :root для вставки в проект.
Нет фирменного цвета — подберите его в генераторе палитр или найдите пару к существующему в инструменте «Сочетание цветов». Градиент для фона соберёт генератор CSS-градиентов.
Частые вопросы
Как инструмент подбирает цвета?
Вы задаёте один фирменный (акцентный) цвет, а инструмент выводит из него всю схему: фоны страницы и секций, карточки, акцентный блок, бордеры и цвета текста получают лёгкий оттенок того же тона, поэтому страница выглядит цельно. Цвет текста на акцентной кнопке выбирается автоматически по контрасту.
Можно ли поправить отдельный цвет вручную?
Да. Каждая роль под превью — это кликабельный свотч: нажмите на квадрат с цветом и выберите свой. Превью и CSS-переменные обновятся сразу. Ручные правки сохраняются, пока вы не смените фирменный цвет или режим — тогда схема пересчитывается заново.
Зачем нужны два фона и акцентный блок?
Длинные страницы собирают из чередующихся секций: один блок на основном фоне, следующий — на чуть отличном, так разделы читаются без линий-разделителей. Акцентный блок — это выделенная секция (призыв к действию, баннер, форма), которая тонируется фирменным цветом заметно сильнее остальных.
Чем отличаются светлая и тёмная схемы?
В светлой схеме фоны почти белые с лёгким тонированием, текст тёмный. В тёмной — фоны глубокие тёмные, текст светлый, а акцент делается чуть ярче, потому что на тёмном фоне насыщенные цвета читаются хуже. Переключайтесь между режимами — фирменный цвет остаётся общим.
Как перенести схему в свой проект?
Кнопка «CSS-переменные» копирует готовый блок :root с переменными --bg, --bg-alt, --card, --accent-bg, --border, --text, --muted, --accent, --accent-text. Вставьте его в CSS и используйте var(--bg) вместо жёстко прописанных цветов.