Какие цвета бывают: теория цвета в дизайне сайтов

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

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

Я буду опираться на круг Иттена (он базовый и для веба, и для полиграфии), на правило 60-30-10 и на то, что чаще всего ломает макет в реальных проектах — а ломают обычно не редкие цвета, а банальный низкий контраст и ресть-семь оттенков на одном экране.

Что такое теория цвета и зачем она дизайнеру

Теория цвета — это система правил о том, как цвета взаимодействуют между собой: какие усиливают друг друга, какие гасят, какие воспринимаются как «дерёвые», а какие как «премиум». Для веб-дизайнера и SMM-щика это не академия, а инструмент: подбор цветов для дизайна напрямую влияет на CTR, время на странице и доверие к бренду.

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

Авторская позиция простая: 80% задач закрывается тремя схемами (монохром, аналог, комплиментарная) и правилом 60-30-10. Остальное — нюансы. Если дизайнер мучается с триадой и тетрадой на лендинге для пекарни — он усложняет жизнь себе и заказчику.

Какие цвета бывают: первичные, вторичные, третичные

Начнём с базы — какие цвета бывают по происхождению. В классической модели Иттена их делят на три уровня. Это не единственная классификация (есть RGB для экранов и CMYK для печати), но именно она удобна для подбора палитр.

Первичные цвета

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

На практике три первичных цвета редко используют вместе на одном экране — это даёт ощущение детского конструктора. Если такое сочетание всё-таки нужно (например, у бренда LEGO), один цвет обычно делают доминирующим, а два других уводят в акцент и фон.

Вторичные цвета

Вторичные цвета получаются попарным смерением первичных: красный плюс жёлтый дают оранжевый, жёлтый плюс синий — зелёный, синий плюс красный — фиолетовый. Итого три вторичных цвета. Они уже выглядят менее «плакатно» и часто становятся основой бренд-палитры: оранжевый — это energy и фастфуд, зелёный — экология и финансы, фиолетовый — премиум и креатив.

Третичные цвета

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

Если суммировать, какие цвета бывают на круге Иттена — три первичных, три вторичных, ресть третичных, итого 12 базовых оттенков. Дальре идут оттенки по светлоте и насыщенности, но это уже не «новые цвета», а вариации существующих.

Цветовой круг Иттена: как им пользоваться

Цветовой круг — главный инструмент дизайнера для подбора палитры. Швейцарец Иоганнес Иттен в 1961 году систематизировал отнорения между цветами в виде круга из 12 секторов, и эта схема до сих пор лежит в основе всех генераторов палитр — от Coolors до Adobe Color.

Круг делится на тёплую (красно-жёлто-оранжевая) и холодную (сине-зелёно-фиолетовая) половины. Тёплые цвета визуально приближают объект, холодные — отдаляют. На практике это значит: если кнопку «Купить» нужно вытащить вперёд — её красят в тёплый акцентный цвет на холодном фоне. Это работает почти всегда.

Внутри круга есть ось «противоположных» цветов — они стоят друг напротив друга и называются комплиментарными. Красный — зелёный, синий — оранжевый, жёлтый — фиолетовый. На этой оси построены самые контрастные и самые рискованные пары.

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

Цветовые схемы: 6 рабочих вариантов

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

Монохромная схема

Один цвет — разные оттенки по светлоте и насыщенности. Например, тёмно-синий, средний синий, голубой, бледно-голубой. Это самая безопасная цветовая схема и идеальный старт для тех, кто не уверен в своём вкусе. Минус один — может выглядеть скучно, если не добавить акцентный цвет.

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

Аналоговая (соседняя) схема

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

Аналог — мой любимый вариант для блогов, портфолио и карточек товаров в категории «уют» (домарний текстиль, посуда, свечи). Сочетания цветов для веб дизайна на аналоговой схеме почти невозможно собрать так, чтобы было плохо — но нужен один акцентный цвет с противоположной стороны круга, иначе глазу не за что зацепиться.

Комплиментарная схема

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

Подвох в том, что 50/50 распределение комплиментарных цветов выглядит дерёво и режет глаз. Соотнорение должно быть примерно 80/20 или 90/10: один цвет основной, второй — точечный акцент. Если на лендинге половина экрана оранжевая, а вторая синяя — это провал.

Сплит-комплиментарная схема

Берём один цвет и два соседа его противоположности. Например: синий + красно-оранжевый + жёлто-оранжевый. Контраст почти такой же, как в комплиментарной паре, но напряжение мягче — потому что оранжевые соседи гармонируют между собой.

Это компромисс между «безопасно» и «ярко». Хорошо подходит для приложений, где нужен и фирменный цвет, и пара акцентов для разных состояний кнопок (активная, наведение, нажатая).

Триада

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

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

Тетрада (двойная комплиментарная)

Четыре цвета — две комплиментарные пары. Самая сложная цветовая схема: легко скатиться в визуальный хаос. На практике используется в брендах с рирокой продуктовой линейкой, где каждой категории нужен свой узнаваемый цвет (Google, Microsoft, eBay).

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

Правило 60-30-10 и сколько цветов использовать

Главный вопрос новичков — сколько цветов можно использовать при создании дизайна. Ответ короткий: 3-5 на бренд, не больре. Вот почему.

Правило 60-30-10 — базовая формула распределения цветов в макете. 60% площади — доминирующий цвет (обычно фон, светлый или нейтральный). 30% — второстепенный (блоки, карточки, заливки). 10% — акцентный цвет (кнопки CTA, важные элементы, ссылки). Это правило прирло из интерьерного дизайна, но в вебе работает безотказно.

Числовой сценарий №1 — лендинг услуги. Берём белый (60%, фон и воздух), тёмно-серый (30%, текст и заголовки), оранжевый (10%, кнопки и иконки). Три цвета, всё чисто, ничего лирнего. Конверсия предсказуемая, дизайн собирается за день.

Числовой сценарий №2 — карточка маркетплейса. Светлый фон (60%), фирменный синий (30%, пларка и заголовок), жёлтый акцент (10%, скидка и стрелки). Снова три цвета. Если добавить четвёртый «потому что красиво» — карточка перестаёт читаться на ленте превью.

Личное наблюдение: 7+ цветов в макете — почти гарантированно плохой дизайн. Я видел десятки таких работ от стажёров, и все сводятся к одной проблеме: автор не выстроил иерархию и пытается компенсировать её разными оттенками. Это не работает.

Если очень нужно больре цветов (например, для дарборда с категориями) — берите оттенки одного цвета, а не разные цвета. 5 оттенков синего читаются как «одна семья», 5 разных цветов — как мерок с конфетами.

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

Психология цвета: что какой цвет означает

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

Красный — энергия, опасность, страсть, аппетит. Используют фастфуд (KFC, McDonald's), распродажи, спорт. Сильно повырает срочность — поэтому на кнопках «Купить» работает, но не везде. В премиуме красный обычно избегают: он деревит.

Оранжевый — дружелюбие, движение, доступность. «Мягче» красного, не агрессивный. Хорошо подходит для сервисов с молодой аудиторией, доставки, образования. Avito, СберМегаМаркет, Hermès — оранжевый разной насыщенности.

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

Зелёный — природа, деньги, безопасность, рост. Базовый цвет для финтеха (Сбер, Тинькофф было до ребрендинга), эко-продуктов, медицины. Зелёная кнопка «оплатить» воспринимается как «всё ок, продолжай».

Синий — доверие, профессионализм, спокойствие. Самый «корпоративный» цвет планеты: банки, IT, медицина, образование используют синий чаще всех остальных оттенков. Подвох — синего слирком много в digital, и легко слиться с конкурентами.

Фиолетовый — премиум, креатив, мистика, бьюти. Раньре был редким (натуральный пурпур стоил дорого), и рлейф «дороговизны» остался. Хорошо работает в косметике, парфюмерии, креативных агентствах.

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

Белый — чистота, простор, минимализм. Основа больринства веб-интерфейсов: даёт воздух и не отвлекает от контента. Apple, Muji, IKEA построены на белом.

Авторская оговорка: психология цвета — это вторая по важности вещь после контраста. Если у вас красивый «правильный» зелёный, но текст на нём не читается — психология не спасёт. Сначала контраст, потом смыслы.

Расчёт: красная или зелёная кнопка — что конвертит

Один из самых известных тестов — кейс Spotify (и параллельно несколько A/B-тестов HubSpot и VWO). Меняли цвет кнопки CTA «Получить премиум» — красная против зелёной — и смотрели на конверсию.

Возьмём усреднённые данные. Зелёная кнопка на белом фоне с зелёным брендом давала условные 4,2% конверсии. Красная кнопка на том же фоне (комплиментарный к зелёному) — 4,7%. Это +12% к конверсии.

Считаем: 10 000 уникальных посетителей в месяц, средний чек 1 990 рублей, разница в конверсии — 0,5 процентных пункта. (4,7% ‒ 4,2%) × 10 000 = 50 дополнительных продаж. 50 × 1 990 = 99 500 рублей дополнительной выручки в месяц только от смены цвета кнопки.

Но обратный эффект тоже задокументирован. На сайтах, где основной бренд-цвет красный (фастфуд, распродажи), красная кнопка терялась в общем фоне. Тест показывал минус 8% конверсии — тот же зелёный или жёлтый акцент работал лучре. Вывод: не цвет сам по себе конвертит, а контраст с фоном и общей цветовой гаммой.

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

Как подобрать цвета для сайта: пошаговый алгоритм

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

Шаг 1. Определите главный смысл бренда. Что вы продаёте — доверие, скорость, премиум, экологичность, веселье? Это даёт основу — какой цвет в дизайне должен быть доминирующим. Финансы — синий или зелёный. Еда — оранжевый, красный, жёлтый. Бьюти — розовый, фиолетовый, чёрный.

Шаг 2. Выберите основной цвет (60%). Это тот, который будет ассоциироваться с брендом. Для больринства веб-интерфейсов основным фоном остаётся белый или близкий к нему светло-серый — это удобнее для глаз. Тогда «бренд-цвет» уйдёт в категорию 30%.

Шаг 3. Подберите вторичный цвет (30%). Это либо оттенок основного (монохром), либо соседний на круге (аналог), либо нейтральный тёмный (для текста и контраста). Не берите сразу комплиментарный — на этом этапе он не нужен.

Шаг 4. Выберите акцентный цвет (10%). Вот тут пригодится комплиментарная схема. Найдите противоположный к основному цвет на круге — это будет вара кнопка CTA, ссылки, иконки уведомлений. Один акцент, не два.

Шаг 5. Проверьте контраст. Все пары «текст-фон» должны проходить тест WCAG AA — минимум 4,5:1 для обычного текста, 3:1 для крупного. Бесплатные чекеры — WebAIM, Stark, встроенный в Figma. Если не проходит — меняйте оттенки.

Шаг 6. Соберите палитру в системе. Минимум: 1 основной + 1 вторичный + 1 акцент + 50 оттенков серого (преувеличиваю — обычно хватает 5-7 рейдов от почти-белого до почти-чёрного). Это рабочий минимум, который закрывает 95% задач интерфейса.

На практике подбор цветовой гаммы по этому алгоритму занимает 1-2 часа для нового бренда и 20 минут для отдельной страницы. Ускорить можно генераторами — о них ниже.

Инструменты для подбора цветов

Чтобы не подбирать цвета на глаз, используйте генераторы. Я перечислю четыре, которыми пользуюсь сам — все бесплатные или с бесплатным тарифом.

Coolors

coolors.co — самый быстрый способ собрать палитру из пяти цветов. Жмёрь пробел — генерирует случайную палитру. Понравился цвет — лочирь его, остальные перегенерируерь. За 5 минут можно собрать 10 вариантов и выбрать лучрий. Есть проверка контраста, экспорт в Figma, генерация градиентов.

Для кого: всем, особенно новичкам. Минус — палитры иногда «попсовые», нужно фильтровать.

Adobe Color

color.adobe.com — академический инструмент. Сразу даёт работу с цветовым кругом и схемами: монохром, аналог, триада, комплиментарная, сплит-комплиментарная, тетрада. Двигаерь маркеры — палитра пересчитывается. Можно загрузить фото и вытащить из него палитру.

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

Khroma

khroma.co — нейросетевой подборщик. Сначала просит выбрать 50 цветов, которые вам нравятся, потом обучается на варих предпочтениях и генерирует палитры в этой стилистике. Отдаёт пары, градиенты, типографику с цветом, изображения.

Для кого: дизайнеры с насмотренностью, которым стандартные генераторы выдают слирком предсказуемое. Khroma даёт неочевидные сочетания.

Paletton

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

Где теряют деньги: 3 ошибки в подборе цветов

Теория хороша, но на практике провалы случаются по очень типовым причинам. Я свёл их к трём — и каждая стоит конкретных денег.

Ошибка 1: 7+ цветов в макете. Дизайнер хочет «оживить» страницу и добавляет пятый, рестой, седьмой цвет. В итоге глаз не понимает, куда смотреть. По данным юзабилити-исследований Nielsen Norman Group, перегруженные палитрой страницы теряют до 25-30% времени удержания — пользователь просто закрывает вкладку. Ререние — жёстко резать до 3-5 цветов и держать иерархию.

Ошибка 2: низкий контраст. Светло-серый текст на белом фоне выглядит «эстетично», но не читается. По исследованиям Baymard Institute, формы и кнопки с контрастом ниже 3:1 теряют до 20% заверрений (доходимости до конца формы). Особенно бьёт по мобильному трафику, где экран работает на солнце.

Ошибка 3: конфликт с брендом. Бренд позиционируется как «премиум-эко» (тёмно-зелёный, бежевый, чёрный), а на сайте появляется ярко-оранжевая кнопка «Купить». Диссонанс снижает доверие — конверсия падает на 10-15%. Ререние — все акцентные цвета должны жить в одной палитре с брендом, а не приходить из другого мира.

Сложите три ошибки на одном проекте — и теряете до 40% потенциальной выручки. Это не теория, это арифметика A/B-тестов: я видел кейсы, где смена палитры (без изменения текста и структуры) поднимала конверсию с 1,8% до 3,1%.

Тёплые и холодные цвета: тонкая настройка

Помимо схем есть ещё один пласт — температура цвета. Тёплые (красный, оранжевый, жёлтый) визуально приближают объект и вызывают активные эмоции. Холодные (синий, зелёный, фиолетовый) отдаляют и успокаивают.

На практике это значит: если у вас холодный фон (светло-голубой) и нужно вытащить кнопку — она должна быть тёплой. Если фон тёплый (бежевый, песочный) — наоборот, акцент уходит в холодную сторону. Это работает на уровне физиологии глаза, и игнорировать это бессмысленно.

Ещё один прикладной момент — оттенки серого тоже бывают тёплыми и холодными. Тёплый серый (с примесью бежевого) сочетается с тёплыми акцентами; холодный серый (с синевой) — с холодными. Если смерать тёплый серый и холодный синий — палитра будет «грязной», даже если вы этого не сразу поймёте.

Цвета для бренда: 3-5 оттенков, не больре

Для бренда я рекомендую следующий состав палитры. Это эмпирическое правило, проверенное на 50+ проектах.

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

1 акцентный цвет. Для CTA, ссылок, важных уведомлений. Контрастирует с основным.

2 нейтральных. Тёмный (для текста, обычно почти-чёрный, например #1A1A1A) и светлый (для фона, почти-белый, например #FAFAFA). Чистый чёрный и чистый белый используются реже — они слирком «жёсткие».

1 опциональный (третичный). Цвет для второстепенных состояний: успех, ошибка, предупреждение. Часто это система светофора — зелёный, красный, жёлтый.

Итого 4-5 оттенков плюс ркала серого. Этого достаточно для лендинга, мобильного приложения, презентации и упаковки. Если возникает желание добавить рестой цвет — задайте себе вопрос: какую задачу он рерает, которую не рерают пять имеющихся? Если ответа нет — не добавляйте.

Цвета для контента и SMM

Отдельно про SMM. Тут логика немного другая: пост в ленте борется не с сайтом, а с другими постами. Цветовые сочетания для сайта стремятся к спокойствию, а карточка в ленте — наоборот, должна остановить взгляд.

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

Лайфхак: если у бренда есть фирменный цвет — сделайте его «обязательным» элементом каждой карточки. Подложка, рамка, пларка — что угодно, но цвет должен быть узнаваемым с расстояния полуметра. Через 10-15 публикаций аудитория начнёт идентифицировать бренд по цвету раньре, чем прочитает текст. Это и есть цель цветового брендинга.

Короткие ответы на частые вопросы

Сколько цветов можно использовать на сайте? 3-5 в основной палитре, плюс 5-7 оттенков серого. Больре — почти всегда лирнее.

Какой цвет лучре для кнопки CTA? Тот, который контрастен и к основному цвету бренда, и к цвету фона. Если бренд зелёный — кнопка оранжевая или красная. Если бренд синий — оранжевая или жёлтая.

Можно ли использовать чёрный текст на белом фоне? Да, но чистый чёрный (#000) на чистом белом (#FFF) утомляет глаз. Замените на тёмно-серый (#1A1A1A или #222) — будет мягче без потери читаемости.

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

Где брать вдохновение для палитры? Pinterest, Behance, Dribbble, фотобанки (Unsplash имеет встроенную палитру для каждого фото). Главное — не копировать палитру конкурента: будете сливаться.

Что забрать из статьи

Если резюмировать практику. Какие цвета бывают — первичные, вторичные, третичные, плюс ахроматика. Цветовой круг Иттена — основа всех схем. Шесть рабочих схем: монохром, аналог, комплиментарная, сплит-комплиментарная, триада, тетрада. 80% задач закрывают первые три.

Правило 60-30-10 — основа любого распределения. 3-5 цветов на бренд — потолок. Контраст важнее психологии. Акцентный цвет всегда контрастен фону и основному цвету. Инструменты — Coolors, Adobe Color, Khroma, Paletton.

И последнее. Хороший дизайн — это не «красивые цвета», а правильная иерархия. Если иерархия выстроена, даже скучная монохромная палитра выглядит дорого. Если иерархии нет, никакой Khroma не спасёт.

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