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

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

Цвет в веб–дизайне — очень мощный инструмент, который требует к себе очень внимательного отношения, крайне взвешенных решений и продуманных действий. Цвет способен «убить» сайт или, наоборот, показать его посетителям только с самой привлекательной стороны.

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

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

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

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

По крайней мере, у меня так. Когда мне нужно подобрать цветовую палитру для сайта клиента, я словно погружаюсь в другую реальность с полным отсутствием ощущения времени. Потому я всегда говорю о себе, что я счастливый обладатель цвето–зависимости (это можно увидеть в блоке «Об авторе» в конце каждой статьи, даже этой).

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

>> Проверьте, готов ли ваш сайт к запуску

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

>> Вы допустили эти ошибки на своем сайте WordPress?

Да, вы попали в нужное место.

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

Почему цвета важны для сайта

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

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

Маркетинговое исследование HubSpot показало, что 46% пользователей оценивают дизайн сайта как основной фактор для формирования доверия к сайту и вообще к бренду.

Потому создание сайта — это серьезный процесс с большим пластом подготовительной работы.

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

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

Более 80% людей узнает бренд по его цвету. Поэтому ваш сайт будет работать на повышение узнаваемости бренда благодаря цветовой палитре.

Цвет говорит громче, чем слова.

Цвет — это первое, что пользователи замечают в дизайне сайта. Цвет вызывает эмоции и способен влиять на поведение посетителей сайта.

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

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

Согласны?

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

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

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

Продолжаем наши поиски гармоничной цветовой палитры для сайта.

Для этого обратимся немного к теории цвета.

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

И это не сложно!

Основы теории цвета

В 17 веке Исаак Ньютон наблюдал прохождение луча света сквозь призму. В результате своего эксперимента он увидел сложную структуру луча света.

В школе вам показывали этот опыт? Мне тогда спроецированные цветные пятна на белую стену класса  показались просто волшебством!  

Для понимания взаимосвязей между отдельными цветами используют цветовой круг (круг Иттена).

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

Вторичные цвета получаются путем смешивания в равных пропорциях двух основных цветов:

• Красный + желтый = оранжевый
• Синий + красный = фиолетовый
• Желтый + синий = зеленый

При смешивании первичного и вторичного цветов получают третичные цвета.

• Красный + фиолетовый = красно-фиолетовый (пурпурный)
• Красный + оранжевый = красно-оранжевый (киноварь)
• Синий + фиолетовый = сине-фиолетовый (фиолетовый)
• Синий + зеленый = сине-зеленый (бирюзовый)
• Желтый + оранжевый = желто-оранжевый (янтарный)
• Желтый + зеленый = желто-зеленый (зеленовато -желтый )

Их размещают в круге между смешиваемыми цветами.

Цвета делятся на теплые (желтый, оранжевый и красный) и холодные (синий, зеленый, фиолетовый).

Уместно упомянуть о характеристиках цвета.

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

Первичные (основные), вторичные и третичные цвета являются чистыми цветами, наиболее насыщенными, т.к. в них не содержится белый или черный цвет.

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

Потому часто дизайнеры употребляют термин «оттенок» в качестве синонима к слову «цвет».

Светлые (выбеленные) оттенки получаются при добавлении белого цвета, а темные  (затененные) — черного.

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

При добавлении серого цвета меняется тональность цвета.

В цветовом круге отсутствуют белый, серый и черный цвет, т.к. их нет в физическом спектре света.

Но для дизайна эти цвета крайне важны. И для дизайна сайта мы эти цвета обязательно используем. Мы еще к ним вернемся.

Психология цвета

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

Психология цвета соединяет в себе науку и искусство. Это достаточно большая и очень интересная область знаний.

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

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

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

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

А сейчас прочтите последнее предложение и обратите особое внимание на концовку фразы. Запомните эти слова.

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

Значение цвета в дизайне сайта

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

Например, белый — цвет траура в некоторых странах Востока, на юге Африки — это красный, в Европе — это черный.

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

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

Красный

Самый сильный и активный цвет. Это цвет страсти, силы, доминирования, авторитетности, энергичности, азарта.

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

Часто используется для дизайна сайтов спортивной и околоспортивной тематики.

Не рекомендуется использовать для дизайна сайтов стоматологических клиник, авиакомпаний, производителей диетического или детского питания.

Известные бренды: Coca Cola, CNN.

Удачные сочетания цвета: красный сочетается с желтым, белым, зеленым, синим и черным.

Синий

Цвет надежности, предсказуемости, доверия, профессионализма, миролюбия, логики.

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

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

Не рекомендуется использовать в дизайне сайтов производителя продуктов питания, ресторанов, кафе.

Известные бренды: Dell, Twitter, Vimeo, WordPress, VK, Facebook.

Удачные сочетания: с желтым, белым, черным, красным, голубым, фиолетовым, оранжевым.

Желтый

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

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

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

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

Известные бренды: Ferrari, Snapchat, McDonald’s.

Удачные сочетания цвета: с красным, синим, лиловым, голубым, фиолетовым, серым, черным, коричневым.

Зеленый

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

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

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

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

Известные бренды: Android, Land Rover, Starbucks.

Удачные сочетания цвета: с коричневым, оранжевым, желтым, серым, черным, белым, красным, фиолетовым.

Оранжевый

Цвет игривости, восторженности, непринужденности, энергии, веселья, авантюризма, свободы.

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

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

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

Известные бренды: Fanta, Amazon.

Удачные сочетания цвета: оранжевый с голубым, синим, лиловым, фиолетовым, белым, черным, оливковым.

Фиолетовый

Цвет превосходства, таинственности, изысканности, духовности, замкнутости, роскоши.

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

Часто используется в дизайне сайтов салонов красоты, индустрии развлечений, кинотеатров.

Не рекомендуется в дизайне сайтов производителей продуктов питания, ресторанов и кафе.

Известные бренды: Viber, Yahoo!, Milka.

Удачные сочетания цвета: с оранжевым, розовым, оливковым, серым, желтым, белым.

Розовый

Цвет женственности, нежности, мягкости, наивности, влюбленности, незащищенности, признательности, благодарности, сентиментальности.

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

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

Не рекомендуется в дизайне сайтов банков, юридических компаний, ресторанов.

Известные бренды: Barbie, Pupa, Wildberries.

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

Коричневый

Цвет практичности, полезности, надежности, природы, искренности, безопасности, защиты, мудрости, традиций, качества, комфорта.

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

Часто используется в дизайне сайтов юридических компаний, производителей кофе и шоколада, кондитерских изделий.

Не рекомендуется в дизайне сайтов аптек и учреждений здравоохранения.

Известные бренды: M&M’s, Cotton, Nespresso.

Удачные сочетания: коричневый сочетается с голубым, кремовым, розовым, зеленым, бежевым.

Серый

Цвет мудрости, стабильности, мастерства, универсальности, умеренности.

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

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

Известные бренды: Apple, Audi, Mercedes.

Удачные сочетания цвета: с цветом фуксии, красным, фиолетовым, розовым, синим, голубым. 

Белый

Цвет пространства, воздушности, легкости, чистоты, покоя, ясности.

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

Часто используется для фона сайта — на таком фоне легко читать темный текст.

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

Удачные сочетания цвета: белый сочетается со всеми цветами. Наилучшее сочетание с синим, красным и черным.

Черный

Цвет стиля, профессионализма, современности, изысканности, элегантности, роскоши.

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

Часто используется в дизайне сайтов «мужской» тематики, производителей часов, дорогих украшений и одежды.

Известные бренды: Chanel, Jeep, WWF, Prada, Gilette.

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

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

Как подобрать цветовую палитру для сайта

Даже при огромном желании (насколько бы странным оно ни было) дизайн сайта не может быть выполнен в одном цвете (ура!).

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

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

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

Я знаю, что сейчас вы можете испытать жестокое разочарование, но не используйте в своей палитре для сайта больше 5 цветов. Большое количество цветов «размазывает» основной посыл сайта, и он становится «невидимым», малозаметным для посетителей.

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

Дизайн сайта разрабатывается именно в такой логической связке после разработки брендинга.

Для разработки логотипа и брендинга для вашего бизнеса свяжитесь со мной >>

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

Что нужно учитывать при подборе цветовой палитры сайта

— ваш бренд служит основой для подбора палитры для сайта, чтобы создать единство и преемственность,

— вашу целевую аудиторию, потому что ваш сайт создается с учетом (я надеюсь, у вас именно такой подход к созданию сайтов) потребностей и особенностей вашей целевой аудитории,

>> Как определить целевую аудиторию сайта

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

>> Как выбрать нишу для сайта

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

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

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

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

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

— меньше — значит лучше, не стоит «раздувать» свою палитру за счет включения большого количества цветов, если вы не знаете, как это можно сделать правильно, ограничьтесь 3–5 цветами.

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

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

>> 50+ причин создать сайт на WordPress

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

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

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

При подборе комбинаций цветов для сайта ориентируйтесь на следующие рекомендации:

— ограничьтесь 3-5 цветами,

— избегайте «чистых» цветов,

— используйте типы цветовых палитр для подбора цветов сайта.

Типы (схемы) цветовой палитры для сайта

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

Монохроматическая (одноцветная) схема

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

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

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

Расщепленно–аналоговая схема

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

Дополнительная (комплиментарная) схема

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

Раздельно–комплиментарная схема

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

Триада

Триада образуется 3 равноудаленными друг от друга на 120 градусов цветами в цветовом круге. Такие палитры гармоничны в восприятии и требуют аккуратного отношения, поскольку могут быть очень вибрирующими из–за высокого контраста цветов.

Тетрада

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

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

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

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

Примеры гармоничных цветовых палитр сайтов

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

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

На сайте авиаперевозчика «Аэрофлот» используется сочетание оттенков синего цвета с акцентным оранжевым цветом.

Цветовая палитра ориентирована на целевую аудиторию бренда — молодое поколение, энергичных, любящих «тусовки».

Цветовая палитра сайта бренда «Ferrari» сдержанная, изысканная и выдержана в оттенках черного, с использованием красного как акцентного.

Цвета на сайте производителя детского питания «Heinz» демонстрируют главную характеристику их продукции — ее экологичность и безопасность для детей.

Цвета на сайте производителя кофе «Jardin» характерные для продукта, учтена специфика сферы бизнеса.

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

Цвета на сайте бренда «Kinder»перекликаются с их миссией — поддержка родителей в воспитании счастливых детей.

Цветовая палитра на сайте онлайн–бухгалтерии для предпринимателей «Контур Эльба» подчеркивает серьезность компании и вызывает доверие пользователей.

Цвета на сайте платформы email–маркетинга для сайтов WordPress связаны с миссией компании — отправляйте письма легко и весело, будьте всегда на связи с подписчиками и радуйте их своими красивыми и креативными письмами.

Цвета на сайте бренда «Milka» далеки от традиционной палитры производителей шоколада, цвета подчеркивают уникальность продукции бренда.

Цветовая палитра хостинговой компании «Спринтхост» характерна для компаний IT.

Используйте промокод при заказе хостинга для сайта SPH305447R и получите в подарок 25% от суммы первого платежа

Вам понравились эти примеры? Какой вывод вы сделали при ознакомлении с палитрами дизайна сайтов известных брендов?

Я надеюсь, вы сейчас не вздыхаете тяжело.

Подбор цветовой гаммы для сайта не такой уж и простой процесс, да?

Не спешите расстраиваться.

У вас есть инструменты, с помощью которых можно получить много красивых вариантов цветовых сочетаний.

Генераторы цветовой палитры для сайта

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

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

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

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

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

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

MyColor Spase — найдите отличную цветовую палитру для своего сайта без долгих поисков, можно задать код основного цвета (если вы его знаете) и сервис сгенерирует варианты палитры, или начните с установленного по умолчанию оттенка фиолетового. На сайте можно подобрать и 3–цветные градиенты (очень модный тип градиентов).

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

С такими инструментами, я думаю, вам не составит труда подобрать превосходные цвета для вашего сайта! Не больно и не страшно!

Как использовать цветовую палитру в дизайне сайта

Что ж, теперь вы получили отличную палитру для сайта с превосходным сочетанием цветов.

Как применить эту палитру в дизайне сайта, как перенести ее в дизайн?

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

Каждый цвет в веб–дизайне обозначается своим собственным кодом.

Это 16–ричный код, который представляет собой неповторимые комбинации из 6 символов: цифр от 0 до 9 и букв (a,b,c,d,e,f). Всего существует 16 777 216 комбинаций.

Эти 6 символов образуют три пары, каждая пара символов отвечает за передачу интенсивности трех основных цветов (красного, зеленого и синего) в цвете для веб–дизайна (это RGB система): от 00 для обозначения самой низкой интенсивности основного цвета до FF как показателя самой высокой интенсивности основного цвета.

Немного визуальной математики (это не скучно, обещаю!):

16–ричный цветовой код белого цвета #FFFFFF — получается в результате смешивания всех трех основных цветов с их полной интенсивностью.

У черного не хватает интенсивности, поэтому его код #000000.

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

Это так называемые «безопасные» цвета — они отображаются на всех устройствах одинаково, без искажений.

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

Но это не значит, что стоит бояться использовать «небезопасные» цвета! Не волнуйтесь, вместо вашего сногсшибательного красного (синего, зеленого и проч.) пользователи не увидят ядовитый оттенок фиолетового. Будет показан оттенок, наиболее близкий к вашему цвету.

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

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

>> Что такое тема оформления WordPress и как выбрать для своего сайта

>> Как правильно сменить тему WordPress и не сломать сайт

Ошибки при подборе цветовой палитры для сайта

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

Какие ваши неосторожные действия с цветом могут «развалить» весь дизайн сайта:

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

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

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

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

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

Наиболее частые вопросы о выборе цветовой палитры для сайта

Спасибо, что дочитали до конца! Публикация вышла приличная, но оно того стоило, не так ли?

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

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

Заключение

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

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

Одна небольшая просьба: если вам понравилась эта статья, то поделитесь ею на вашей любимой социальной платформе, — это сделает мой день! Спасибо!

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