Цветовая палитра сайта: 7 сервисов для подбора

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

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

Как выбрать идеальный цвет

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

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

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

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

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

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

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

Правило трех оттенков

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

В дизайне существуют три вида оттенков:

1. Основной — цвет, с которым вас будут ассоциировать. Им нужно оформлять главные элементы страницы, которые несут основной, самый важный посыл.
2. Акцентный — оттенок, работающий на контрасте с основным. С его помощью можно выделить важные объекты, например, кнопки, шапку, подвал, названия разделов или заголовки.
3. Фоновый — фон страницы. Чаще всего вы можете встретить белый фон, потому что он не отвлекает внимание посетителей от продуктов и хорошо выделяет содержание. А вот творческие проекты могут использовать самые необычные и креативные решения.

Чтобы будущий сайт смотрелся стильно, используйте пропорцию 60/30/10.

• 60 — для основного цвета,
• 30 — для фонового,
• 10 — для акцентного. 

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

Colordot

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

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

Кроме того Colordot — хороший сервис, чтобы просто «залипнуть» и расслабиться. 👨‍🎨

Adobe Color

Adobe Color — бесплатный популярный инструмент как среди профессионалов, так и среди «недизайнеров». 

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

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

И нельзя не упомянуть одну из отличительных особенностей Adobe Color. Это обширное комьюнити, в котором можно делиться палитрами, брать чужие цветовые схемы и настраивать их под себя. Схемы можно фильтровать по различным критериям: «Самые популярные», «Часто используемые», «Произвольно», темы, опубликованные вами, или темы, которые вам понравились ранее.

Не сервис, а находка для каждого дизайнера и веб-мастера. 

Khroma

Сервис Khroma создан проект-дизайнером Джорджем Хастингсом на основе AI для определения ваших любимых цветов. 

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

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

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

Material Design Palette

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

Coolors

Любите подбрасывать монетку, принимая решение? Тогда вам понравится инструмент Coolors.

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

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

Еще одна крутая фишка Coolors в том, что инструмент может сгенерировать цветовую палитру по фотографии. 

Material Design

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

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

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

ColorSpace

И завершает нашу подборку сервис ColorSpace, который расположился на космическом домене .SPACE, о котором мы рассказывали совсем недавно. 

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

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

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

⌘⌘⌘

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

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