🌈 Цвета ✓ Бесплатно

Генератор
палитры

Возьмите один цвет — и получите набор, который с ним сочетается. Шесть классических схем: от контрастной пары до спокойного монохрома. Для каждого оттенка сразу видно контраст с белым фоном.

🎨6 схем гармонии
👁️Контраст по WCAG
⌨️Готовые CSS-переменные
🎲Случайный цвет
Основной цвет
Схема сочетания

соседи по кругу — спокойное, естественное сочетание

Готовые цвета:
Схемы строятся сдвигом тона по цветовому кругу и дают математически согласованный набор. Но это отправная точка, а не готовая тема: в интерфейсе один цвет обычно основной, а остальные работают акцентами в малых дозах.
Значения палитры
Дальний#4FF7B8rgb(79, 247, 184)1.4 : 1
Ближний#4FE2F7rgb(79, 226, 247)1.5 : 1
Основной#4F8EF7rgb(79, 142, 247)3.2 : 1
Ближний#644FF7rgb(100, 79, 247)5.2 : 1
Дальний#B84FF7rgb(184, 79, 247)3.8 : 1

Последний столбец — контраст с белым фоном. Для текста нужно не меньше 4,5 : 1, для крупных заголовков хватит 3 : 1.

Готово для вставки в CSS
:root {
  --color-1: #4FF7B8;
  --color-2: #4FE2F7;
  --color-3: #4F8EF7;
  --color-4: #644FF7;
  --color-5: #B84FF7;
}

Откуда берутся сочетания

Все схемы строятся одинаково: тон сдвигается по цветовому кругу, а насыщенность и светлота остаются прежними. Комплементарная пара стоит напротив друг друга, на 180 градусах, триада делит круг на три равные части, тетрада на четыре. Монохромная схема — единственное исключение: там тон не меняется вовсе, меняется только светлота.

Важная оговорка. Схема даёт математически согласованный набор, но не готовую тему интерфейса. В реальном дизайне один цвет обычно основной и занимает большую часть, а остальные работают акцентами в малых дозах. Классическое правило — 60 на 30 на 10: доминирующий цвет, вспомогательный и акцент.

  • Комплементарная — сдвиг на 180°
  • Триада — на 120° и 240°
  • Тетрада — на 90°, 180° и 270°
  • Аналоговая — соседи в пределах ±60°
  • Монохромная — один тон, светлота ±30 %
Когда какая схема Практика
Интерфейс, панель монохромная
Кнопка призыва комплементарная
Иллюстрация, баннер триада
Спокойный лендинг аналоговая
Частые ошибки Осторожно
Все цвета поровну нужно 60-30-10
Текст акцентным цветом часто не хватает контраста
Тетрада без иерархии рябит в глазах
Забыли про тёмную тему светлота поедет

Частые вопросы

Возьмите один цвет за основу и постройте от него схему. Проще всего начать с аналоговой — соседние тона почти всегда выглядят спокойно. Если нужен яркий акцент, добавьте комплементарный цвет, но используйте его в малых дозах.
Это пара, стоящая на цветовом круге напротив друг друга, со сдвигом ровно на 180 градусов. Такое сочетание даёт максимальный контраст и хорошо работает для кнопок и акцентов, но заливать им большие площади не стоит — глаз устаёт.
Обычно достаточно одного основного, одного вспомогательного и одного акцентного плюс нейтральная шкала серых. Классическое правило распределения — 60 на 30 на 10 процентов площади. Больше трёх активных цветов почти всегда усложняет, а не украшает.
Потому что схема задаёт только сочетание тонов, но ничего не говорит о площадях и иерархии. Если все цвета занимают поровну места, картинка рябит. Начните с одного доминирующего, остальные вводите точечно.
Смотрите на контраст в таблице под палитрой. Для обычного текста стандарт доступности требует не меньше 4,5 : 1, для крупных заголовков достаточно 3 : 1. Насыщенные акцентные цвета часто этот порог не проходят — их лучше оставить для фона кнопок, а не для самих букв.
Напрямую — нет. При инверсии фона светлота цветов должна меняться, иначе акценты станут либо кислотными, либо неразличимыми. Практичный приём: возьмите монохромную схему и постройте две шкалы, светлую и тёмную, вокруг одного тона.