Генератор цветовой схемы для сайта
Полная светлая и тёмная тема из цвета вашего бренда.
Выберите цвет бренда и получите готовую цветовую схему для сайта или приложения: тонированные фоны и поверхности, границы, основной и приглушённый текст, основной цвет, подобранный так, чтобы оставаться заметным, и подходящий акцент — для светлой и тёмной темы. Живой предпросмотр показывает карточку с текстом и кнопками, а вся схема готова к копированию как CSS-переменные, где тёмная тема включается по настройке системы.
Как создать цветовую схему сайта
- Шаг 1
Выберите цвет бренда.
- Шаг 2
Проверьте светлый и тёмный предпросмотр.
- Шаг 3
Скопируйте CSS-переменные.
Почему PhotoTools
Светлая и тёмная
Две согласованные темы сразу.
Читаемо по умолчанию
Основной и акцентный цвет держат контраст не ниже 3:1.
Готово для кода
CSS-переменные с тёмной темой.
Поддерживаемые форматы
Результат
- CSS
Частые вопросы
Почему основной цвет немного отличается от моего?
Если ваш цвет слишком светлый или тёмный на фоне, он сдвигается ровно настолько, чтобы контраст достиг 3:1 и кнопки оставались заметными.
Как использовать CSS?
Вставьте его в таблицу стилей и используйте переменные, например background: var(--color-primary). Тёмная тема переключается по настройке системы.
Это бесплатно?
Да. Браузерные инструменты PhotoTools бесплатны, без ограничений и работают без аккаунта.
Мои изображения загружаются на сервер?
Нет. Инструмент работает полностью в браузере на WebAssembly. Изображения не покидают ваше устройство и нигде не сохраняются.