Главная›Инструменты›Разработка и данные›Генераторы и случайность›Сочетание цветов

Сочетание цветов

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

Базовый цвет и схема

Пипетка

Код цвета

Схема

—

Палитра

Клик по карточке копирует код цвета.

Как палитру видят люди с дальтонизмом

Контраст пар

Пара	Контраст	Обычный текст	Крупный текст

Порог по WCAG: 4,5:1 для обычного текста и 3:1 для крупного от 18 пунктов или полужирного от 14.

Быстрый просмотр

Название проекта

Так палитра выглядит на простом макете: шапка, кнопка, текст и карточка. Соотношение площадей близко к правилу 60–30–10.

Карточка на вторичном цвете — тут проверяется, читается ли на нём текст.

Выгрузка

—

Шесть схем и что они дают

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

Комплементарная пара стоит напротив через круг, на ста восьмидесяти градусах: максимальный контраст, годится для акцента на спокойном фоне. Аналоговая схема берёт соседей в пределах тридцати градусов и даёт спокойное, почти монохромное сочетание. Триада ставит три цвета на равных углах в сто двадцать градусов и остаётся живой, не срываясь в пестроту.

Схема задаёт только тон. Насыщенность и светлоту приходится подбирать отдельно, и именно от них зависит, будет ли пара работать: два цвета одинаковой светлоты сливаются в глазах, даже если по кругу они противоположны.

Цветовой круг: положение цвета на нём и задаёт все схемы сочетаний. Фото: Викисклад, общественное достояние.

Схема	Углы	Характер
Комплементарная	180°	Резкий контраст
Раздельно-комплементарная	150° и 210°	Контраст мягче
Триада	120°	Живая, сбалансированная
Тетрада	90°	Богатая, требует главного цвета
Аналоговая	±30°	Спокойная

Ньютон, Гёте и двенадцать частей Иттена

Первый цветовой круг начертил Исаак Ньютон в «Оптике» 1704 года: он замкнул спектр в кольцо, соединив красный с фиолетовым, и разделил его на семь частей по аналогии с музыкальной октавой. Идея кольца оказалась плодотворнее самого деления и пережила все последующие пересмотры.

Иоганн Вольфганг Гёте в «Учении о цвете» 1810 года пошёл от восприятия: он описал цветовые контрасты и последовательные образы, которые видит глаз после долгого взгляда на пятно. Именно наблюдение за остаточным образом объясняет, почему дополнительные цвета кажутся особенно живыми рядом.

Практическую систему собрал Иоганнес Иттен в Баухаусе: его двенадцатичастный круг с тремя первичными, тремя вторичными и шестью третичными цветами и семь типов контраста легли в основу художественного образования. Книга «Искусство цвета» вышла в 1961 году и до сих пор остаётся базовым учебником. Отдельная ветвь — системы точного описания цвета: Альберт Манселл в 1905 году построил трёхмерное пространство с осями тона, светлоты и насыщенности, и на его наследниках работают все современные цветовые модели.

Ранняя схема цветового круга — Круг Ньютона: спектр, замкнутый в кольцо, — основа всех последующих схем. Фото: Викисклад, CC0.

Систематическая таблица цветов — Систематизация цвета: тон, насыщенность и светлота как три независимые оси. Фото: Викисклад, общественное достояние.

Как выбрать схему и распределить площади

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

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

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

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

Схем в расчёте	шесть
Комплементарная	180°
Триада	120°
Аналоговая	±30°
Круг Ньютона	1704
Учение о цвете Гёте	1810
Круг Иттена	12 частей
Правило пропорции	60 / 30 / 10

Как пользоваться

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

Пипеткой или кодом. Можно нажать «Случайный», если отправной точки нет.
Шесть вариантов от комплементарной до монохрома.
Дальтонизм и контрастность пар — под палитрой.
Кнопкой копирования или через выгрузку в переменные CSS.

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

Какая схема сочетания самая безопасная

Аналоговая: три соседних цвета круга гарантированно не спорят между собой. Минус в том, что она даёт мало контраста и интерфейс выходит вялым, поэтому к ней обычно добавляют один акцент с противоположной стороны круга. Для интерфейсов чаще берут монохром с одним контрастным акцентом: получается спокойно и при этом есть чем выделить кнопку.

Почему комплементарные цвета иногда режут глаз

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

Зачем проверять палитру на дальтонизм

Дейтераномалия и протаномалия — самые частые формы, вместе они встречаются примерно у 8% мужчин и 0,5% женщин. При них красный и зелёный сближаются, а комплементарная пара красный–зелёный превращается в два одинаковых бурых пятна. Если цвет несёт смысл — статус, график, ошибка в форме — палитру нужно смотреть в симуляции, иначе часть людей информацию просто не получит.

Сколько цветов нужно в палитре интерфейса

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

Правило 60–30–10 — это про что

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

Как из этой палитры сделать рабочие токены

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

Спросите нейросети об инструменте

Отвечает DeepSeek по данным этой страницы и тому, что у вас сейчас на экране: что делает, как устроен, ограничения

Ещё генераторы

Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.

Генераторы Кодирование и данные