Как подобрать сочетание цветов
Цветовой круг Иттена помогает подобрать сочетания цветов по их положению: соседние тона дают близкую палитру, противоположные образуют пару, а три равноудалённые точки составляют триаду. В основе традиционного круга лежат красный, жёлтый и синий. Художник и преподаватель Баухауса Иоганнес Иттен использовал такие отношения в обучении работе с цветом; круг полезен для первых проб в дизайне, иллюстрации, одежде и интерьере. [Getty Research Institute]
Здесь можно выбрать основной цвет, увидеть геометрию сочетания и скопировать HEX-коды. Ниже показано, как читать 12 секторов, выбирать схему под задачу и доводить палитру до макета. Отдельно разберём, почему подходящие друг к другу цвета иногда совершенно не годятся для текста на фоне.
Как устроен круг Иттена
На традиционном двенадцатичастном круге три базовых цвета, красный, жёлтый и синий, стоят через одинаковые промежутки. Между ними расположены три составных: оранжевый, зелёный и фиолетовый. Ещё шесть секторов занимают промежуточные тона, например жёлто-оранжевый или сине-зелёный. Такая схема показывает отношения цветовых семейств, а не все оттенки, которые способен различить человек.
Слово «базовые» здесь относится к художественной модели RYB, от английских red, yellow, blue. Оно не означает, что любой настоящий пигмент можно получить смешением трёх выбранных тюбиков. Краски различаются составом, укрывистостью и поведением в смеси. Для живописи круг даёт ориентир при подборе, а результат смешения проверяют выкрасами.
Удобно читать круг как циферблат. Один сектор занимает 30°, полный оборот составляет 360°. От выбранного цвета отсчитайте шесть шагов по кругу и окажетесь напротив него. Отсчитайте четыре сектора, затем ещё четыре, и получите триаду. Названия схем описывают именно эти отношения; повернув всю фигуру, можно сохранить принцип сочетания и сменить все цвета.
В традиционном круге жёлтому противопоставляют фиолетовый, красному зелёный, синему оранжевый. Эти пары стоит запомнить перед работой с цифровыми инструментами: некоторые из них используют другой порядок тонов и подберут к красному голубой. Это не ошибка в арифметике, а смена модели.
Противоположные пары
Треугольник связывает три базовых цвета. Через центр круга лежат противоположные тона.
Как пользоваться цветовым кругом онлайн
Начните с цвета, который уже есть в задаче: логотипа, ткани, стены или главного объекта иллюстрации. Если точного цвета пока нет, нажмите на нужное место круга. Цветной маркер обозначает основной тон; линии связывают его с остальными цветами выбранной схемы. Маркер можно перемещать мышью или пальцем. С клавиатуры круг меняется стрелками, а Shift увеличивает шаг.
Когда нужен точный фирменный цвет, введите его HEX-код, например #336699. HEX является записью экранного цвета; этот код можно скопировать из графического редактора. Короткая запись #369 равнозначна #336699: каждый знак удваивается. Кнопка с цветным образцом рядом с полем открывает системный выбор цвета. Исходный код сохраняется без подмены ближайшим сектором.
Затем выберите схему. Для двух противоположных тонов подойдёт комплементарная, для близких цветов аналоговая, для трёх разнесённых по кругу тонов триада. Остальные варианты пригодятся, когда нужна альтернатива прямой паре или больше акцентов. Попробуйте две-три схемы на одном исходном цвете: так проще увидеть разницу, чем каждый раз начинать с новой палитры.
Ползунок насыщенности делает цвет более серым или более насыщенным. Ползунок светлоты ведёт от чёрного через цвет к белому. Оба ползунка меняют всю палитру через основной цвет. Поэтому после выбора схемы можно сразу сделать набор приглушённее или светлее. Для отдельных оттенков каждого образца понадобится дальнейшая настройка в макете или конвертере HEX, RGB и HSL.
Нажмите на образец палитры, чтобы скопировать его HEX. Ссылка в адресной строке сохраняет основной цвет, выбранную схему и модель круга после изменения настроек. Её можно отправить коллеге. Контраст с основным цветом раскрывается отдельно, когда вы решаете, какие надписи будут стоять на цветном фоне.
Шесть схем сочетания цветов
Схема задаёт отношения тонов, но не распределяет роли за дизайнера. Один и тот же набор может стать спокойной презентацией или пёстрым плакатом в зависимости от площади цветовых пятен, насыщенности и светлоты. Миниатюры ниже показывают геометрию: цветные точки отмечают выбранные тона, линии помогают увидеть расстояние между ними.
Комплементарная: основной цвет и противоположный
Два тона находятся через 180°, по разные стороны круга. В модели Иттена знакомый пример состоит из синего и оранжевого. Такую пару удобно пробовать, когда нужен один основной цвет и заметный акцент: синий фон обложки и оранжевая деталь, холодная иллюстрация и тёплый объект в центре.
Оба цвета необязательно делать чистыми и одинаково яркими. Тёмный приглушённый синий и небольшое охристое пятно сохраняют идею пары. Если отдать двум насыщенным противоположным цветам равную площадь, они могут начать спорить за внимание. Сначала решите, какой объект главный, затем назначьте ему акцент.
Аналоговая: три соседних тона
В нашем генераторе берутся основной тон и соседи на 30° в каждую сторону. Например, рядом с оранжевым окажутся красно-оранжевый и жёлто-оранжевый. Это удобная отправная точка для фона иллюстрации, серии слайдов или набора деталей, которые должны восприниматься как одна семья.
Близость тонов не гарантирует, что элементы различимы. Если три линии на графике почти одинаковы, добавьте разницу светлоты, подписи и разные штрихи. Для спокойной фоновой палитры близость полезна, для кодирования данных она может мешать. Шаг 30° является настройкой этого инструмента; аналоговые палитры бывают и шире.
Триада: три цвета через 120°
Вершины равностороннего треугольника дают три тона с одинаковыми промежутками. В традиционном круге красный, жёлтый и синий образуют такую триаду. Она подходит для проб с тремя самостоятельными объектами: персонажами, категориями на учебном плакате или крупными частями иллюстрации.
Начните с одного ведущего цвета и двух поддерживающих. Если все три сделать насыщенными и раздать им поровну места, получится намеренно энергичная композиция. Для спокойного макета ослабьте два цвета, сделайте их светлее либо уменьшите площадь. Треугольник помогает найти тона, а громкость каждого вы настраиваете отдельно.
Раздельно-комплементарная: два соседа противоположного
Здесь к исходному тону добавляются цвета через 150° и 210°. Вместо одной противоположной точки получаются две по сторонам от неё. Для синего на выбранном RYB-круге это красно-оранжевый и жёлто-оранжевый. Схему удобно попробовать, когда прямой оранжевый акцент кажется слишком однообразным и хочется два связанных тёплых оттенка.
Этот треугольник отличается от триады: промежутки между точками не равны. В макете можно назначить один из двух дополнительных цветов основному акценту, второй оставить мелким деталям. Само название не обещает более мягкий результат: яркие дополнительные цвета всё ещё способны перетянуть внимание.
Прямоугольник: две противоположные пары
Четыре точки стоят на углах прямоугольника. Генератор использует смещения 0°, 60°, 180° и 240°. У каждой точки есть противоположная; между соседними точками по очереди 60° и 120°. Это тетрада, то есть набор из четырёх тонов, с двумя разными промежутками.
Такую палитру можно взять для иллюстрации с несколькими объектами или разделов презентации. Но четыре готовых HEX не обязывают использовать все четыре на одном слайде. Если задача решается двумя, остальные можно оставить для следующих экранов. Добавление цветов полезно, когда появляются новые роли, а не свободное место в палитре.
Квадрат: четыре равномерно распределённых тона
Здесь шаг одинаков и равен 90°. Квадрат тоже образует две противоположные пары, но расположение четырёх точек отличается от прямоугольной схемы выше. Выберите его, если хотите сравнить несколько далеко разнесённых тонов, например для набора иллюстраций или серии постеров.
Особенно тщательно проверьте, как набор выглядит небольшими пятнами. Четыре крупных образца рядом могут нравиться, а четыре тонкие линии на белом фоне уже плохо различаются. Разведите элементы по светлоте, добавьте подписи и посмотрите макет в размере, в котором его увидит читатель.
Готовые палитры и примеры применения
Ниже приведены результаты именно этого генератора в режиме «Иттен · RYB». Коды можно открыть в инструменте и менять дальше. Это исходные сочетания для работы, а не исторический набор HEX-кодов Иттена: экранная палитра является приближением традиционного порядка цветов.
#336699#995933Для #336699 комплементарная схема даёт #995933. Попробуйте синий на крупных элементах, медный на метках или деталях иллюстрации, а фон оставьте светлым. Эти два цвета не нужно ставить мелким текстом один поверх другого: сначала проверьте контраст. Пара помогает выделить акцент, но ещё не определяет цвет надписи.
Открыть палитру в круге «Синий и медный»#C03838#C05A38#C07C38Для #C05A38 аналоговая схема выдаёт #C03838, #C05A38 и #C07C38. Их можно использовать в иллюстрации с глиняными предметами, тёплой обложке или текстильном подборе. Основной цвет находится посередине. Добавьте светлый нейтральный фон, чтобы три близких пятна не сливались в сплошную массу.
Открыть палитру в круге «Терракотовые тона»#527A47#477A64#475D7AАналоговая палитра от #477A64 состоит из #527A47, #477A64 и #475D7A. Здесь зелёная группа постепенно переходит в синюю. Такой набор можно примерить к серии информационных карточек: цвет объединяет материалы, а крупные подписи различают темы. Для диаграммы одного различия этих тонов может быть мало.
Открыть палитру в круге «Приглушённая зелень»#735AA6#A6995AКомплементарная схема для #735AA6 даёт #A6995A. В афише или презентации фиолетовый может стать большим пятном, охра небольшой отметкой. Для светлого фона стоит отдельно подобрать более светлую вариацию исходного тона, а для длинного текста оставить тёмный нейтральный. Пара из круга не обязана красить каждый элемент страницы.
Открыть палитру в круге «Фиолетовый и охра»#336699#993359#998C33Для #336699 триада выдаёт #336699, #993359 и #998C33. Это синий, малиновый и охристый. На учебной схеме ими можно обозначить три объекта, сохранив названия рядом. В интерфейсе лучше сначала проверить уже занятые роли: красноватый тон может восприниматься как ошибка, если именно так он используется на остальных экранах.
Открыть палитру в круге «Синяя триада»#336699#994033#997333Раздельно-комплементарная схема для #336699 состоит из #336699, #994033 и #997333. Попробуйте один тёплый цвет для главной метки, второй для второстепенных деталей. Если разница не даёт нового смысла, вернитесь к простой паре. Хорошая палитра иногда становится лучше после удаления одного образца.
Открыть палитру в круге «Два тёплых акцента»Как перенести сочетание в сайт, одежду или интерьер
Палитру удобнее оценивать в распределении площадей. Возьмём синий #336699 и медный #995933 из первого примера. Для условной обложки оставим 60% площади светлому нейтральному #F3F0EA, 30% синему и 10% медному. Светлый фон даст место тексту, синий соберёт композицию, а медная деталь привлечёт внимание. Это учебное распределение, а не обязательная пропорция для каждого макета.
Три сопоставимых цветовых пятна
60% · 30% · 10%
Схему часто называют правилом 60–30–10. Её удобно использовать как первую пробу: фон, крупный поддерживающий цвет, небольшой акцент. Но в логотипе может быть два равноправных цвета, а на фотографии площади вообще трудно отделить друг от друга. Смысл приёма в видимой иерархии, не в измерении каждой подушки до процента.
Для сайта начните с реального экрана: фон, заголовок, абзац, кнопка. Назначьте цвет каждому элементу и проверьте текст с его непосредственным фоном. Если медная кнопка теряется, иногда достаточно изменить её светлоту или окружение. Добавление ещё одного оттенка без новой функции усложнит макет.
Для одежды вместо цветовых прямоугольников представьте площади вещей. Светлая рубашка, синий жакет и небольшой медный аксессуар дадут другое впечатление, чем медное пальто с синим шарфом, хотя пара цветов осталась прежней. Материал, блеск, рисунок ткани и оттенок рядом с лицом тоже влияют на результат. Круг помогает сузить выбор, а окончательное сочетание стоит посмотреть вместе при обычном освещении.
Для интерьера учитывайте то, что уже нельзя легко заменить: пол, двери, столешницу, крупную мебель. Возьмите их тон за отправную точку, подберите остальные на круге, затем принесите домой реальные образцы. Рассмотрите их утром, вечером и при искусственном свете. Экранный код не сообщает, как именно краска будет выглядеть на стене и рядом с деревом.
Убавлять насыщенность и менять светлоту нужно осознанно. Если увеличить светлоту всех цветов сразу, фон станет мягче, но текст может потерять читаемость. Если приглушить весь набор, акцент может перестать выделяться. После общей настройки вернитесь к ролям: какой объект должен замечаться первым и что нужно прочитать без усилий.
Почему в круге Иттена и HSL разные сочетания
Режим «Иттен · RYB» сохраняет традиционный порядок цветовых семейств: красный, оранжевый, жёлтый, зелёный, синий, фиолетовый и промежуточные тона. В режиме «Цифровой · HSL» тон меняется по шкале, построенной из каналов RGB. HSL расшифровывается как hue, saturation, lightness: тон, насыщенность и светлота.
Самая заметная проверка состоит из чистого красного #FF0000. В нашей экранной версии RYB напротив него находится зелёный #00FF00. В HSL поворот на 180° даёт голубой #00FFFF. Для триады тот же красный в RYB получает жёлтый #FFFF00 и синий #0000FF, а в HSL зелёный #00FF00 и синий #0000FF. Поэтому к палитре полезно прикладывать название модели, а не только слово «триада».
#FF0000#00FF00Красный и зелёный
#FF0000#00FFFFКрасный и голубой
Вычисления здесь используют явное приближение. Двенадцати положениям RYB-круга назначены экранные тона HSL, а между ними тон изменяется плавно. Угол выбранной схемы откладывается на RYB-круге, затем найденная точка переводится обратно в HSL и HEX. Насыщенность и светлота сохраняются от основного цвета. Точные опорные значения приведены в раскрывающемся блоке ниже.
Как рассчитывается экранная модель RYB
От красного, принятого за 0°, опорные углы RYB идут через 30°. Им соответствуют тона HSL: 0°, 15°, 30°, 45°, 60°, 90°, 120°, 180°, 240°, 255°, 270°, 315°. Следующая точка замыкает оба круга на 360°. Между соседними точками используется линейная интерполяция.
Для HEX #336699 тон HSL равен 210°. Он попадает посередине между опорными 180° и 240°, поэтому на RYB-круге занимает 225°. Дополнение находится на 45° после поворота на 180°. Обратное преобразование даёт тон HSL 22,5°; при исходных насыщенности 50% и светлоте 40% получается HEX #995933. Округление каналов RGB выполняется в конце.
Единого исторического соответствия «цвет Иттена → HEX» у такой схемы нет. Другой сервис может выбрать иные экранные оттенки для тех же цветовых семейств, и коды будут отличаться. Наш RYB-режим нужен для знакомой геометрии сочетаний; HSL удобен, когда вы хотите получить именно цифровой поворот тона. Ни один режим не моделирует смешение пигментов или результат печати.
Гармония цвета и читаемость текста
Цвета могут хорошо работать отдельными пятнами и плохо читаться друг на друге. Круг сравнивает тона, а читаемость зависит ещё и от разницы яркости. Например, у красного #FF0000 и зелёного #00FF00 контраст около 2,91:1. Разница цвета заметная, но для обычного текста по WCAG AA этого недостаточно.
Для обычного текста порог AA составляет 4,5:1, для крупного 3:1. Крупным считается текст от 18 пунктов, примерно 24 CSS-пикселей, или от 14 пунктов при жирном начертании, примерно 18,7 CSS-пикселя. Коэффициент нужно сравнивать без округления вверх: 4,499:1 ещё не достигает 4,5:1. Результат не гарантирует удобство всего интерфейса, но позволяет убрать заведомо слабые пары текста и фона. [W3C, WCAG 2.2]
Проверьте два варианта надписи на синем #336699. Белый #FFFFFF даёт около 6:1 и проходит AA для обычного текста. Медный #995933 из комплементарной палитры существенно слабее; его лучше оставить самостоятельным цветовым пятном. В генераторе надписи на образцах автоматически становятся чёрными или белыми, в зависимости от того, какой вариант имеет больший контраст. Это служебная подпись, не новый цвет палитры.
6:1 · белый #FFFFFF
Проходит AA для обычного текста
1,09:1 · медный #995933
Не проходит AA для обычного текста
Для любой выбранной пары откройте проверку контраста текста и фона. Если под текстом фотография или градиент, проверьте самые неблагоприятные участки непосредственно под буквами. Полупрозрачная надпись требует учёта фона, на котором она смешивается. Нельзя проверить один непрозрачный HEX и распространить ответ на все эти условия.
В диаграммах и интерфейсах дублируйте цвет формой или подписью. Ошибка должна обозначаться текстом, а не только красной рамкой; линии графика могут различаться штрихом. Люди по-разному различают цвета, а экран иногда просто оказывается на солнце. Правильный треугольник на круге не решает эти задачи автоматически.
Частые вопросы
Для фотографии, печати и нейтральных цветов нужны дополнительные действия. Эти условия помогают правильно перенести палитру из генератора в свою задачу.
Почему у серого все цвета совпадают?
У нейтрального серого насыщенность равна нулю и нет определённого цветового тона. Поворот по кругу оставляет тот же серый. Чтобы получить цветную палитру, сначала выберите цвет на круге или увеличьте насыщенность. Для разных серых нужен другой параметр: светлота. Белый и чёрный также не меняются от одного поворота тона.
Где монохромная схема?
Монохромная палитра использует один цветовой тон с разной светлотой и насыщенностью. Например, тёмно-синий, средний синий и светло-голубой. Она не требует нескольких точек по окружности, поэтому среди шести геометрических схем её нет. Для такого набора сохраните основной тон и подготовьте несколько его вариантов в конвертере HEX, RGB и HSL.
Можно ли подобрать сочетание по фотографии?
Встроенной загрузки фотографии здесь нет. Возьмите нужный цвет пипеткой в графическом редакторе и вставьте его HEX-код. Лучше выбрать участок со средним освещением, избегая блика и глубокой тени: код пикселя описывает конкретное место снимка, а не неизменный цвет предмета.
Почему не принимается HEX из восьми знаков?
Последние два знака задают альфа-канал, степень непрозрачности. Инструмент принимает только короткую запись из трёх знаков или полную из шести. Если альфа-канал равен FF, его можно убрать: цвет полностью непрозрачен. Для полупрозрачного цвета сначала определите итоговый цвет на нужном фоне, затем подбирайте к нему сочетания.
Можно ли использовать HEX для заказа краски или печати?
HEX описывает экранный цвет sRGB. Для краски нужен образец выбранного производителя, для печати профиль, бумага и цветопроба. Одинаковый код не гарантирует одинаковый результат на мониторе, ткани и стене. Используйте палитру как направление поиска, а материальный результат проверяйте отдельно.
Комплементарный цвет совпадает с инверсией?
Не обязательно. Инверсия RGB заменяет каждый канал на 255 минус его значение и может изменить светлоту. У #336699 инверсия равна #CC9966, дополнение в HSL равно #996633, а в нашем RYB-круге #995933. Поэтому сначала уточните, какую операцию нужно выполнить.
Похожие калькуляторы
Возможно вам пригодятся ещё несколько калькуляторов по данной теме:
- Конвертер HEX, RGB и HSL. Выберите исходный и целевой форматы, задайте цвет и получите нужную запись с компактным предпросмотром.
- Калькулятор контраста цветов. Выберите цвет букв и фона, чтобы узнать, легко ли читать текст.
- Визуальный редактор HTML. Редактируйте бесплатно и онлайн HTML-код, и сразу же смотрите внешний вид текста и страницы в режиме предпросмотра (WYSIWYG).
- Генератор паролей. Создайте сложный и надёжный пароль бесплатно с помощью онлайн-генератора из 8, 10, 12 или большего числа рандомных (случайных) символов.
- Генератор QR-кода. Вставьте ссылку или текст. Готовый QR-код можно скопировать или скачать как PNG.
- Сумма прописью. Переведите сумму в виде цифр в сумму прописью - текстом. Сделайте расшифровку правильно для договоров и других документов.
- Хрономер: время чтения текста. Оцените, сколько времени займёт чтение или произнесение текста вслух. Просто введите текст в форму, и хронометраж рассчитается автоматически.
- Рандомайзер: генератор случайных чисел. Выберите случайное число в нужном диапазоне для любых целей, в частности для розыгрышей и онлайн-лотерей в соцсетях.
- Случайный выбор из списка. Добавьте варианты по одному в строке, укажите количество и выберите режим повторов.
- Перемешать список. Добавьте пункты по одному в строке и укажите, нужно ли сохранять одинаковые значения.
Есть что добавить?
Напишите своё мнение, комментарий или предложение.