Цветовой круг Иттена

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

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

Как устроен цветовой круг Иттена

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

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

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

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

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

Схема	Как строится	Характер	Где уместна на сайте
Монохромная	Один сектор, разная светлота и насыщенность	Спокойный, строгий	Корпоративные сайты, B2B, отчёты, панели
Аналоговая	2–3 соседних сектора	Мягкий, гармоничный	Медицина, услуги, лендинги без агрессии
Комплементарная	Два противоположных сектора	Резкий, заметный	Акцентная кнопка, промоблок, распродажа
Сплит-комплементарная	Основной плюс два соседа его антипода	Контрастный, но мягче	Универсальный вариант для магазина
Триада	Равносторонний треугольник в круге	Живой, детский, яркий	Детские товары, развлечения, образование
Тетрада	Прямоугольник, две пары антиподов	Сложный, легко перегружается	Только при жёсткой дисциплине в пропорциях

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

Правило 60–30–10: как распределить цвета по площади

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

Ошибка новичка — залить акцентным цветом шапку, футер, иконки, заголовки и кнопку. Формально цвет один и «фирменный», фактически кнопка перестаёт выделяться: глаз перестаёт реагировать на цвет, который встречается везде. Акцент работает только за счёт редкости.

Если нужны детали, смотрите «Всплывающее окно на весь экран: Яндекс за него понижает, а вы теряете людей».

• Доминанта (60 %) — фон страницы и крупных секций. Почти всегда это белый, светло-серый или очень светлый оттенок основного тона.
• Вторичный (30 %) — карточки, подложки, разделители, шапка, футер. Здесь живёт фирменный цвет в приглушённой форме.
• Акцент (10 %) — кнопки целевого действия, значки скидок, важные ссылки, индикаторы. Ничего лишнего.
• Нейтрали — текст и границы. Они не входят в проценты, но именно на них держится читаемость.

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

Контраст важнее гармонии

Помогу с продвижением: вывод сайта в ТОП Яндекса — вывожу сайты в топ Яндекса белыми методами.

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

Международный стандарт доступности задаёт измеримые пороги контраста между цветом текста и цветом фона. Это не рекомендация «для инвалидов», а базовое требование к любому тексту, который планируется читать при дневном свете с экрана телефона.

Элемент	Минимальный контраст	Комфортный уровень	Что ломается при нарушении
Основной текст (до 18 px)	4,5:1	7:1 и выше	Чтение с телефона на улице
Крупный текст и заголовки (от 24 px)	3:1	4,5:1	Восприятие структуры страницы
Границы полей формы, иконки	3:1	4,5:1	Человек не видит, куда вводить данные
Текст на кнопке	4,5:1	7:1	Кнопка выглядит неактивной
Плейсхолдер в поле	4,5:1	4,5:1	Подсказка не читается, форма бросается
Неактивные элементы	Не нормируется	2:1	Неактивное путают с активным

Отдельная беда — светло-серый текст на белом фоне. Он выглядит «дорого» на макете в тёмной студии и становится нечитаемым на экране с выцветшей матрицей или на солнце. Если хочется приглушить второстепенный текст, снижайте контраст до 4,5:1, но не ниже: разница между «утончённо» и «не видно» здесь всего пара процентов светлоты.

Как перевести круг Иттена в CSS

Круг удобно переводить в цветовую модель HSL: тон задаётся углом от 0 до 360 градусов, то есть буквально положением на круге. Двенадцать секторов Иттена — это шаг в 30 градусов. Такой подход делает палитру воспроизводимой: вам не нужно подбирать шестнадцатеричные коды наугад.

1. Определите основной тон. Возьмите цвет логотипа или тот, что уже используется в фирменном стиле, и переведите его в HSL. Угол тона — ваша точка на круге.
2. Постройте схему. Комплементарный цвет — плюс 180 градусов. Триада — плюс и минус 120. Аналоговая — плюс и минус 30.
3. Соберите шкалу светлоты. Для каждого тона сделайте 5–7 ступеней: от очень светлой подложки до тёмного текста. Шаг светлоты 10–12 % даёт различимые, но не рваные ступени.
4. Приглушите насыщенность у фонов. Насыщенность выше 60 % годится только для мелких акцентов. Крупная заливка при такой насыщенности давит.
5. Задайте нейтрали. Серые лучше делать не абсолютно серыми, а с примесью основного тона: насыщенность 4–8 %. Палитра сразу становится цельной.
6. Запишите всё в CSS-переменные. Один набор переменных в :root — и перекраска сайта превращается в правку шести строк, а не в поиск по всем файлам стилей.

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

Ошибки, из-за которых цвет съедает конверсию

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

Подробнее об этом — в статье «Хлебные крошки — это не украшение, а карта сайта для робота Яндекса».

Ошибка	Как выглядит	Что делать
Акцент везде	Фирменный цвет на шапке, иконках, заголовках и кнопке	Оставить акцент только за целевым действием
Две конкурирующие кнопки	«Купить» и «Подробнее» одинаково яркие	Второстепенное действие делать контурным
Текст поверх фотографии	Читается на одной фотографии и пропадает на другой	Полупрозрачная подложка или градиент под текстом
Цвет как единственный сигнал	Ошибка формы показана только красной рамкой	Добавить значок и текст ошибки
Чистый чёрный текст на чистом белом	Контраст 21:1, глаз устаёт на длинных текстах	Взять очень тёмный серо-синий, 12–15:1
Насыщенная заливка крупных блоков	Экран «звенит», внимание рассыпается	Снизить насыщенность до 20–40 %
Разные оттенки одного цвета	Шесть похожих синих из разных шаблонов	Свести к одной шкале в переменных

Отдельно про цветовую слепоту: различные формы дальтонизма встречаются примерно у 8 % мужчин и менее чем у 1 % женщин. Для сайта это значит, что красно-зелёная пара как единственный способ различить «доступно» и «нет в наличии» не работает для заметной доли аудитории. Дублируйте цвет формой, значком или подписью — это дешевле любой переделки.

Цвет кнопки: почему «красная лучше зелёной» — миф

В сети до сих пор гуляют пересказы старых тестов, где кнопка одного цвета якобы дала прирост конверсии. Механика там была не в цвете как таковом, а в контрасте кнопки с окружением конкретной страницы. Тот же цвет на другом фоне даст обратный результат.

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

• Проверьте кнопку в оттенках серого: если она не выделяется без цвета, ей не хватает разницы по светлоте.
• Держите один цвет на все целевые кнопки сайта — человек быстро запоминает, куда нажимать.
• Состояния наведения и нажатия делайте изменением светлоты на 8–12 %, а не сменой тона.
• Не используйте цвет кнопки нигде больше — ни в иконках, ни в подчёркиваниях.
• Проверьте кнопку на мобильном под прямым солнцем: там выживает только высокий контраст.

Тёмная тема и температура цвета

При переключении на тёмный фон палитру нельзя просто инвертировать. На тёмном фоне насыщенные цвета кажутся ярче и начинают «светиться», а тонкий шрифт визуально утолщается. Практика такая: для тёмной темы насыщенность акцентов снижают на 10–20 %, светлоту поднимают, а чистый чёрный фон заменяют на очень тёмный серо-синий — он мягче для глаз и не даёт ореолов вокруг светлого текста.

Если нужна помощь по теме — обучение SEO-продвижению.

Температура цвета работает и здесь. Холодный тёмный фон с тёплым акцентом читается спокойнее, чем тёплый тёмный фон с холодным акцентом: во втором случае возникает ощущение мутного экрана. Если сомневаетесь, оставьте фон нейтрально-холодным.

Параметр	Светлая тема	Тёмная тема	Почему так
Фон страницы	Белый или очень светлый серый	Тёмный серо-синий, не чистый чёрный	Чистый чёрный даёт ореол вокруг светлых букв
Насыщенность акцента	Исходная	Ниже на 10–20 %	На тёмном фоне цвет кажется ярче, чем есть
Светлота акцента	Средняя	Выше	Тёмный акцент на тёмном фоне пропадает
Толщина шрифта	Обычная	На ступень легче	Светлый текст визуально утолщается
Тени и границы	Тени для отделения карточек	Осветление фона карточки	Тень на тёмном фоне не читается
Изображения	Без изменений	Лёгкое приглушение яркости	Яркая фотография слепит на тёмном экране

Ещё одна деталь, о которой узнают только после жалоб: тёмная тема не отменяет требований к контрасту. Порог 4,5:1 действует одинаково для обеих схем, и приглушённый серый текст на тёмно-сером фоне нарушает его так же легко, как светло-серый на белом. Проверять нужно обе палитры, а не одну.

Тему разбирал отдельно: «Как заблокировать накрутку поведенческих через .htaccess: реальный кейс, 6 подсетей и −95% ботов за час».

Как собрать палитру за час: порядок действий

1. Выпишите задачу страницы: одно главное действие, которое должен совершить посетитель.
2. Возьмите базовый тон из логотипа или из ниши, переведите его в HSL.
3. Выберите схему по таблице выше — для коммерции обычно аналоговая плюс один акцент.
4. Постройте шкалы светлоты для каждого тона и шкалу нейтралей с лёгкой примесью базового.
5. Назначьте роли: фон, подложка, границы, основной текст, второстепенный текст, акцент, состояния.
6. Проверьте контрастные пары по таблице требований, поправьте светлоту там, где не хватает.
7. Посмотрите макет в оттенках серого и через симулятор дальтонизма.
8. Занесите итог в CSS-переменные и запретите себе цвета вне этого списка.

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

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

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

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

Обязательно ли брать фирменные цвета из логотипа? Не обязательно буквально. Логотип часто нарисован в насыщенных цветах, непригодных для крупных заливок. Правильный подход — сохранить тон, но подобрать под интерфейс собственную шкалу светлоты и насыщенности.

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

Работает ли психология цвета — «синий про доверие», «зелёный про здоровье»? В виде жёстких правил — нет. Ассоциации сильно зависят от культуры, контекста и конкретного оттенка. Что действительно работает — соответствие ожиданиям ниши: если у всех конкурентов интерфейс спокойный, ядовитая палитра будет читаться как несерьёзность, а не как смелость.

Разбор живого сайта: что мешает ему продвигаться:

2:29

Коротко

• Круг Иттена задаёт только тон; светлоту и насыщенность подбирают отдельно, поэтому одну схему нельзя считать готовой палитрой.
• Для коммерческого сайта чаще всего достаточно аналоговой схемы плюс один комплементарный акцент под целевое действие.
• Пропорция 60–30–10 важнее самой схемы: акцент работает только тогда, когда его мало.
• Читаемость держится на разнице в светлоте, а не в тоне; минимум 4,5:1 для основного текста и 3:1 для крупного.
• Цвет не должен быть единственным сигналом состояния — дублируйте его значком, формой или подписью.
• Палитра, записанная в CSS-переменные, переживает смену подрядчика; палитра «в голове дизайнера» — нет.

Если сайт получает трафик, но посетители не доходят до заявки, приходите на SEO-консультацию — посмотрим вместе, где именно теряются люди: в поиске, в структуре страницы или в интерфейсе.