Выберите 3–5 цветов
Трёх достаточно для фона, поверхностей и акцента. Пять — если нужны два акцента и цвет для подвала.
Генератор цветовых комбинаций
Палитра из 3–5 цветов для сайта, приложения или бренда: современные flat-оттенки, сочетания известных сервисов и живое превью интерфейса. Нажмите «Сгенерировать» — или выберите готовую комбинацию ниже.
Клик по цвету копирует HEX
Как палитра выглядит на сайте
Фон, текст и акценты подставляются автоматически — по контрасту.
your-site
Продукт
Возможности
Цены
Блог
Начать
новый продукт
Заголовок, который продаёт
Короткое описание в две строки — видно, как палитра работает
с текстом, кнопками и акцентами.
Попробовать
Демо
Быстрый старт
Настройка за пару минут, без сложной интеграции.
Понятный интерфейс
Текст остаётся читаемым на любом фоне.
Готово к запуску
Скопируйте CSS-переменные и используйте в проекте.
Готовые сочетания
Палитры, которые уже работают: бренды, соцсети и популярные flat-схемы.
Как собрать палитру для сайта
Проверьте контраст
Текст должен читаться на фоне: ориентируйтесь на соотношение не ниже 4.5:1. Превью подскажет, как это выглядит.
Закрепите удачные
Нажмите на замок у цвета, который нравится, и генерируйте дальше — он останется на месте.
Заберите в проект
Скопируйте CSS-переменные или отдельные HEX. Ссылка на палитру сохраняет выбранные цвета.
Правило 60–30–10
Классическая схема распределения: 60% — основной фон, 30% — поверхности и блоки, 10% — акцент на кнопках, ссылках и важных деталях. Если акцента больше, интерфейс начинает «кричать», а глаз не понимает, куда смотреть.
Почему flat-цвета удобны
Flat-палитры не используют градиенты и тени: цвет работает сам по себе. Для веб-интерфейса это предсказуемо — один и тот же оттенок одинаково выглядит на мониторе, в мобильном приложении и в тёмной теме. Главное — не брать пять ярких цветов сразу: два акцента обычно достаточно.
Можно ли использовать цвета брендов
Цвета сами по себе не охраняются авторским правом, но логотипы и фирменный стиль — да. Палитры в подборке — ориентир и вдохновение: берите оттенки как основу, добавляйте свои и не копируйте логотипы и графику целиком.