Как подобрать правильные сочетания цветов для сайта?

Сделайте свои цвета одинаково «красочными»

Зачастую, задача визуализатора заключается в том, чтобы некоторые цвета выделялись на фоне остальных. Есть разные способы добиться этого. Цвета становятся заметнее по разным причинам, например:

• они намного темнее ⬤⬤
• они намного светлее ⬤⬤
• они более насыщенные ⬤⬤
• они более «чистые» ⬤⬤

Обычно вам нужно выделить один или два цвета

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

Увеличьте насыщенность темных цветов.
Еще вы можете выбрать менее чистый оттенок: на изображении выше зеленый ⬤ и синий ⬤ очень чистые, поэтому я затемнила их (вот как они выглядят при 100% яркости: ⬤⬤).
Затем я хотела добавить красный… но ярко-красный был бы слишком интенсивным, так как это чистый оттенок: ⬤⬤⬤. Так что у меня было два варианта:

• просто затемнить его: ⬤⬤⬤.
• переместить оттенок (и только оттенок) на 30°, чтобы сделать его более оранжевым ⬤⬤⬤.

Я выбрала второй вариант, чтобы он выглядел немного более спокойно, но оба этих варианта хороши.

Правило 2: Придерживайтесь природных цветовых шаблонов

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

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

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

Фотографии от Кайла Пирса, Уэсли Фрайера и Джона Салливана.

То же самое можно сказать про переход от светло-зеленого к фиолетово-синему, от светло-желтого к темно-зеленому, от коричневато-оранжевого к холодному серому и т.п.

Фотографии от Kbh3rd, Йена Бриттона и Джона Салливана.

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

Возраст вашей ЦА

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

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

Зеленый (второстепенный цвет)

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

Зеленый цвет несет в себе “успокаивающие” характеристики синего, а также энергию желтого. В дизайне зеленый балансирует и гармонизирует, создает ощущение стабильности. Зеленый будет уместен в дизайнах, связанных с процветанием, стабильностью, обновлением и природой. Более яркие оттенки зеленого выглядят энергичнее, а оливковые оттенки обычно ассоциируются с миром природы. Темно-зеленый выглядит более стабильно и презентабельно.

Примеры:

Ярко-зеленый хедер сайта в сочетании с листочком создают очень естественное и живое впечатление.

Зеленый оливкового оттенка выглядит естественно и “природно”, что очень соответствует содержимому страницы.

Яркие “ретро” оттенки зеленого создают очень свежий и энергичный облик.

Еще один оливковый сайт с духом природы.

Почему цветовые схемы для веб-сайтов так важны?

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

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

1. Цвета и оттенки, в гармоничном их сочетании друг с другом, улучшают опыт использования сайта.
2. Различные цвета имеют свои психологические эффекты. Это означает, что вы можете “заставить” своих посетителей чувствовать или думать в нужном направлении.
3. Использование определенных цветов для кнопок и окон призыва к действию (CTA) может помочь увеличить конверсию. Некоторые исследования доказали, что определенные цветовые контрасты играют важную роль в увеличении конверсии на 10-50%.

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

Как выбрать фоновый цвет

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

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

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

Избегайте чистых цветов

«Чистые» оттенки — это те, которые расположены точно под 60°, 120°, 180°, 240°, 300° и 360°/0° на цветовом круге:

Давайте разберем пример, чтобы научиться определять “чистый” цвет. В HSV/HSB значение оттенка (hue) этого ярко-синего ⬤. равно 180°, значение насыщенности (saturation) — 67%, а значение яркости — 91%. Вы также можете проверить значения RGB: если хотя бы два значения совпадают, цвет — «чистый». Например, наш ⬤. — это rgb (77, 232, 232).
Чтобы ваши цвета выглядели более естественными и приятными для глаз читателей, вы можете либо уменьшить насыщенность чистых цветов, либо сделать их темнее. Если вы хотите получить яркие, насыщенные цвета, полагайтесь на смешанные цвета на расстоянии не менее 5-10° от чистых цветов.
На изображении выше красный, оранжевый, синий и зеленый имеют одинаковую насыщенность и яркость. Единственная разница — оттенок! Красный ⬤ (0°), синий ⬤ (240°) и зеленый ⬤ (120°) выглядят более красочно, чем оранжевый ⬤ (40°), светло-синий ⬤ (211°) и ярко-сине-зеленый ⬤ (170°). Почему бы тоже не выбрать их, ведь всем хочется яркой, красочной визуализации? Давайте разбираться.

Цветовой круг – как пользоваться

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

Круг состоит из секторов разных цветов, которые плавно переходят друг в друга. От края круга к его центру цвета становятся светлее, а самый центр круга – белый, это показывает изменение оттенков внутри одного цвета.

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

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

Ахроматические комбинации – это любой цветной оттенок, дополненный белым, черным или обоими классическими цветами. Ахроматическими также называют телесный и серебристый оттенки.

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

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

Проще всего создать ансамбль из трех цветов, если использовать:

• три оттенка одного цветового сектора;
• три оттенка в пределах одного цвета;
• два гармонирующих между собой оттенка и ахроматический цвет;
• два ахроматических цвета и один яркий оттенок;
• два цвета из одного сектора и один – из противоположного.

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

Базовые определения цвета

Я часто упоминаю такие термины, как насыщенность, яркость и оттенок. Цветовые пространства HSB (оттенок, насыщенность, яркость) или HSV (оттенок, насыщенность, значение) достаточно хорошо подходят для их проверки:
Оттенок варьируется от 0° до 360° — это типичный цветовой круг: ⬤⬤⬤
Насыщенность варьируется от 0% (серый) до 100% (супер красочный!): ⬤⬤⬤
Яркость/значение варьируются от 0% (черный) до 100% (фактический цвет): ⬤⬤⬤
Для того чтобы преобразовать цвета из HEX (например, #cc0000) или RGB (например, rgb (207, 176, 58)) в HSB/HSV, используйте такой инструмент, как colorizer.org.
Родственником HSB/HSV является цветовое пространство HCL. Используются те же параметры (Hue, Chroma = Saturation, Lightness), но параметры ближе к тому, «как мы действительно видим цвета». Datawrapper использует цветовое пространство HCL для выбора палитры цветов:

Так как вы не найдете параметры цвета HCL в Adobe Photoshop или colorizer.org, то каждый раз, когда я упоминаю градусы (например, 0°) или проценты, я буду говорить о цветовом пространстве HSB/HSV.
Теперь, когда мы разобрались с базой, давайте погрузимся в тему цвета в визуализации.

Особенности цветового решения в зависимости от аудитории

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

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

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

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

Копируйте цвета или разбирайтесь в них

Выбрать хорошие цвета действительно сложно. Совершенно нормально плохо разбираться в цветах, продолжать в них не разбираться и просто копировать цвета. Серьезно, в том чтобы воровать нет ничего постыдного. Я написала отдельную статью о том, где черпать вдохновение: фильмы (примечание переводчика: фильмов Уэса Андерсона, например!), художники, цветовые палитры, созданные другими, и т. д. И позвольте мне добавить: чужие визуализации данных — тоже отличный источник. Если вы хотите лучше понять, какие цвета подходят друг другу: проанализируйте их. Вот несколько способов сделать это:

Фотография niko photos с сайта Unsplash

• Выберите изображение в цветах, которые считаете красивыми, например картину или фотографию природы. Затем выберите из них цвета с помощью пипетки, например с помощью Photoshop или image-color.com и попробуйте использовать именно их в следующем графике.
• Установите Adobe Capture, это то же самое, но для «живых изображений»: этот инструмент позволяет брать цвета из вашего окружения. (Приятно видеть, как много цветов вокруг нас ненасыщены!)
• Играйте в «ручную подборку цветов»: посмотрите на свой экран. Какие цвета вы видите? Насколько темные и насколько они насыщенные? Какие оттенки рядом; какие из них находятся на противоположной стороне цветового круга?
• Выбирайте цвета из красивых визуализаций данных. Измените несколько цветов. Они по-прежнему хорошо работают вместе?

Кроме того, в следующий раз, когда вы будете создавать визуализацию данных и не будете довольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например с colorizer.org:

• Насколько они насыщены — и выглядят ли они лучше, если вы увеличите или уменьшите насыщенность на несколько (или много) процентных пунктов?
• Какое у них значение оттенка? Что произойдет, если вы измените оттенок всего на несколько градусов?
• Ваши цвета по-разному яркие?

Со временем ваше понимание изменится от «это красиво, но я не знаю почему» к «это красиво, потому что…». И вы обнаружите, что можете нарушать все больше и больше правил, которые я объяснила здесь, и при этом создавать отличные цветовые комбинации!

Источник вдохновения

Я считаю, что внезапно стать успешным колористом или дизайнером по цвету – невозможно. Но можно понемногу приучить глаза и голову видеть и воспринимать цвет, сочетания цветов, замечать оттенки.
Именно таким источником вдохновения является бесплатный онлайн ресурс IN COLOR BALANCE ( https://color.romanuke.com/ ). Здесь создана отменная коллекция невероятно красивых фото . К каждой фотографии добавлена подборка цветов, составляющих цветовую композицию.

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

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

Используйте насыщенность и яркость, чтобы ваши оттенки сочетались

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

Улучшенные комплементарные цвета из Adobe Color

Я уменьшила насыщенность голубого ⬤ и светло-оранжевого ⬤ и сделала все цвета темнее, кроме светло-оранжевого. Черт возьми, теперь с этим можно работать!
Поэтому, если ваша цветовая комбинация еще не выглядит потрясающе, не добавляйте сразу другой оттенок. Сначала измените насыщенность и яркость и посмотрите, станет ли лучше.
Вот что я сделала со всеми этими цветовыми палитрами: ⬤⬤⬤⬤, ⬤⬤⬤⬤⬤ и ⬤⬤⬤⬤. Все они примерно дополняют друг друга, и имеют разную насыщенность и яркость. Вот что заставляет их работать.

Лучше избегать ярких, насыщенных цветов

Неоновые цвета обязательно привлекут внимание читателей. Но эти читатели не будут вам благодарны

Большинство из нас немного нервничают, когда видят их: «Сильно насыщенные светлые цвета НЕ подходят Серьезности, Доверия или Спокойствия», — объясняют Бартрам, Патра и Стоун в своей статье «Аффективный цвет в визуализации» 2017 года.
Если ваши цвета близки к 100% насыщенности и 100% яркости, скорее всего, ваши цвета чересчур красочные. Это определенно относится к чистым цветам, таким как ⬤⬤⬤⬤.
«Но я ведь видел такие сумасшедшие цвета раньше, и они хорошо смотрятся», — скажете вы, имея в виду такие проекты:

Но если вы сравните цвета из этих примеров с такими цветами, как ⬤⬤⬤⬤, вы увидите, что все первые менее насыщенные или более темные. 100% насыщенный и 100% ярко-зеленый ⬤. становится менее насыщенным в New York Times ⬤, менее насыщенным и темным как в статье Bloomberg ⬤., так и в статье Pudding ⬤⬤⬤ выглядят в оттенках серого вот так: ⬤⬤⬤.
Чтобы эта ошибка не резала глаза читателю, у вас есть два варианта:

• “Сделайте все правильно в черно-белом”: измените яркость каждой области, сделав некоторые светлее, а некоторые темнее, например: ⬤⬤⬤. Так они выглядят в оттенках серого: ⬤⬤⬤.
• Разделите области, к примеру, белой каймой.

Я настоятельно рекомендую первый вариант (однако, вы все равно можете обвести его белой рамкой, если вам нравится стиль): цвета будут выглядеть более динамичными, и люди с дальтонизмом смогут понять диаграмму ничуть не хуже остальных. На самом деле, все будут вам благодарны, независимо от способности видеть цвета!
Фактически, правильный способ подобрать палитру для категориальных данных — это выбрать цвета из градиентов, подобных этим:

Все эти градиенты плавно переходят от светлого к темному, поэтому цвета, которые вы выбираете оттуда, будут иметь разную яркость: ⬤⬤⬤⬤⬤ или ⬤⬤⬤⬤⬤. Попробуйте этот генератор цветовой палитры, если вам нравится такой подход.

Определите точный цвет (его тон и насыщенность)

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

Общее правило заключается в том, что светлые оттенки создают ощущение энергии, свежести, веселья, более темные – стабильности и профессионализма.

После этого необходимо определить точное числовое значение цвета в системах RGB, CMYK, HEX или Pantone, чтобы использовать его в процессе создания дизайна.

6 наиболее эффективных схем выбора цвета для сайта

В цветовой гамме любого ресурса преобладающий оттенок используют для заполнения большей части пространства. Помните о воздействии цвета на настроение и разум человека и подбирайте его очень тщательно.

Как сочетать цвета для сайта? Есть множество различных вариантов, но в данной статье мы рассмотрим 3 самых эффективных способа.

1. Триада (тройная гармония, треугольник)

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

Выберите на цветовом круге любые 3 оттенка (1 для фона и 2 для навигационной панели и контента), находящиеся в 120 градусах друг от друга.

Двойная комплиментарная система

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

Страница Florida Flourish создана по данной схеме. Выглядит замечательно, правда? Зеленый и красный цвета для сайта создают контраст в текстовых блоках и растениях, а оранжевая пустыня и голубой фон усиливают эффектность картины.

Аналоги (последовательная система)

В данном случае главным образом используются оттенки, которые дополняют друг друга. Благодаря этому можно вызвать определённые эмоции или особенно ярко подчеркнуть какие-то качества.

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

Атмосфера умиротворения и спокойствия царит на сайте Blinksale благодаря сочетанию зеленого, бирюзового и голубого. Посмотрите, как жёлтый подчеркивает особенно важные детали.

Раздельный выбор

Комбинация преобладающего оттенка с двумя вспомогательными образует на спектральном круге равносторонний треугольник.

Прямоугольник

Здесь задействуют 4 цвета: 1 преобладающий, 2 вспомогательных и 1 акцентирующий.

Квадрат

Это самое энергичное, яркое и динамичное решение.

Мы ознакомили вас лишь с основами цветовой теории, которая позволяет создавать впечатляющие веб-дизайны. А то, насколько далеко вы зайдете в своих творческих экспериментах, зависит от вас самих.

Сервисы подбора цветовых схем для сайта

Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

Сервис Adobe Color CC

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

Сервис Colormind

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

Сервис Colors

Color Safe — этот инструмент понравится тем, кому небезразлична аббревиатура WCAG (Руководство по обеспечению доступности веб-контента, в которое входит множество рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям — например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.

Сервис Color Safe

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

Сервис

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

Сервис Paletton

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

Сервис Colordot

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

Сервис Colourcode

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

Сервис Material Design Palette

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

Какие схемы бывают?

Чтобы понять принципы сочетания цветов, понадобится цветовой круг и немного теории.

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

1. Оттенок. Выражает основное название: зеленый, синий, оранжевый, белый.
2. Насыщенность. Чем «чище» тон, тем большей насыщенностью он обладает. В случае с желтым, например, самыми насыщенными будут лимонный и канареечный, наименее насыщенные оттенки — ванильный, соломенный, цвет шампанского. На критерий влияет примесь не только белого, но и черного: медовый или горчичный, например, тоже не считаются насыщенными.
3. Светлота или яркость. Показатель определяет близость подтона к белому. В зеленой гамме светлыми считаются мятный, весенний. Темными — хаки, оливковый, хвойный, изумрудный.

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

Монохромная

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

Не обязательно сочетать всю гамму от самого светлого до почти черного — достаточно выбрать 3-4 подтона. Этого достаточно, чтобы создать динамичный стильный интерьер.

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

На фото пример гостиной в голубом монохроме

Аналогичная

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

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

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

Комплементарная

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

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

Подобная гармония также близка к природе: вспомните вид цветочного поля или морского берега.

Важно! Полярное сочетание белого и черного также считается комплементарным

На фото контрастное сочетание желтого с розово-фиолетовым

Триада

При реализации этой идеи сочетания цветов в интерьере, в игру вступает не дуэт, а трио.

Существует 2 варианта:

1. Классическая триада. Возьмите три оттенка, расположенные на равном удалении (через 3 ячейки). Фиолетовый, салатный, оранжевый или небесный, желтый, алый.
2. Раздельно-комплементарное сочетание. За основу берется принцип комплементарности, но вместо одного противоположного, выбранный цвет сочетается с цветами, размещенными по бокам. Пример: красно-фиолетовый, лимонный, травяной. 

На фото зеленые стены в союзе с сине-оранжевой мебелью

Прямоугольная

Тетрада — самый сложный вариант палитры сочетания цветов в интерьере. Соединить между собой необходимо 4 цвета, для этого существует 2 способа:

1. Классическая тетрада (прямоугольник). Один оттенок выступает в роли основы, два его дополняют, последний используется для выделения небольших акцентов.
2. Квадрат. По сути представляет собой 2 комплементарные пары. Чтобы не получилось хаоса, следует соблюдать равные пропорции, либо выбрать один ведущим, а остальные будут выступать в роли акцентов.

Как использовать программу для подбора акцентных цветов

Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:

Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:

На основе преобладающего цвета

Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.

Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:

Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.

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

Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:

• Последовательная;
• Монохромная;
• Треугольная;
• Комплементарная;
• Составная;
• Оттенки.

Выберите цветовую схему

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

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.

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

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

CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.

На основе понравившейся фотографии

Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.

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

Шаг 1. Загрузите фотографию:

Нажмите на значок камеры, чтобы загрузить изображение.

Шаг 2. Выберите одно из пяти цветовых настроений:

• Красочное;
• Яркое;
• Приглушенное;
• Насыщенное;
• Темное.

Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:

Выберите цветовое настроение.

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

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

Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.

Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:

Нажмите на цветное колесико, чтобы увидеть коды цветов:

Скопируйте цветовые коды (HEX) для вашей цветовой схемы.

Заключение

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

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

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

И поскольку выбор цветовой палитры для вашего сайта — дело не случайное, нужно предпринять набор действий для его оформления, а именно выбрать:

• для сайта правильный преобладающий цвет;
• для преобладающего цвета правильные вспомогательные цвета;
• соответствующий фоновый цвет.

Следуя приведенным выше рекомендациям, вы сможете создать достойные цветовые схемы для сайта, даже не являясь профессионалом в дизайне.