Цвета сайта: Цвет для сайта — какой выбрать

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

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

• Белый цвет – символ чистоты и совершенства.

• Черный цвет характеризует власть, силу, изысканность.

• Серый цвет олицетворяет спокойствие и рассудительность.

• Красный – цвет страсти и импульсивности.

• Коричневый отождествляется с простотой, надежностью и стабильностью.

• Желтый цвет символизирует общительность, жизнерадостность и непринужденность.

• Синий цвет ассоциируется со спокойствием, надежностью и скромностью.

• Зеленый – это цвет независимости и гармонии.

О психологии цвета мы поговорили, но как выбрать цвет для сайта?

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

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

Белый цвет

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

Не подойдет этот цвет для ресурсов финансовой направленности и рекламы большинства продуктов питания.

Черный цвет

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

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

Серый цвет

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

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

Красный цвет

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

Заказать создание стильного сайта с применением красного цвета можно в том случае, если интернет-портал имеет развлекательную направленность или продвигает экстремальные виды спорта.

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

Коричневый цвет

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

Разрабатывается интернет-ресурс для бизнес-проекта? Можете смело заказать дизайн сайта в этом цвете, так как он вызывает доверие и символизирует надежность.

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

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

Желтый цвет

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

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

Синий цвет

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

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

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

Зеленый цвет

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

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

Оранжевый цвет

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

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

Фиолетовый цвет и его оттенки

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

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

________

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

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

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

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

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

Решение проблемы

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

Ключи к эмоциям

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

+ Белый цвет

Ассоциативный ряд: простота, чистота, невинность.

Для какой тематики бизнеса подходит? Лучше использовать, как фон.

 Черная кнопка «Get started» одной из первых бросается в глаза, когда заходишь на сайт Squarespace

+ Черный цвет

Ассоциативный ряд: солидность, серьезность, сила, изысканность, элегантность, люкс, гламур, роскошь, тайна.

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

Желтый цвет сразу обращает на себя внимание при контрастном сочетании с черным. Торговая марка часов Breitling использовала это свойство при разработке своего официального сайта.

+ Красный цвет

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

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

+ Синий цвет

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

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

+ Зеленый цвет

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

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

+ Желтый цвет

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

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

+ Оранжевый цвет

Ассоциативный ряд: праздник, веселье, творчество, молодежь, комфорт, энергичность, жизнерадостность.

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

+ Розовый цвет

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

Тематика бизнеса: женские сайты и товары, знакомства, косметика и парфюмерия.

+ Коричневый цвет

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

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

+ Серый цвет

Ассоциативный ряд: нейтральность, разумность, рациональность.

Тематика бизнеса: еще один цвет, который стоит минимизировать или вообще не использовать на сайте.

Практические рекомендации

• Цвета выигрывают за счет удачных сочетаний друг с другом. Кроме того, сочетание цветов позволит лучше передать весь спектр эмоций, которые вы хотите заложить в дизайн.
• Некоторые из цветов являются “эмоциональными стимуляторами”: они побуждают посетителей к действиям и провоцируют на импульсивные покупки. В первую очередь, это красный, синий и оранжевый. Эти цвета используют для кнопок или других важный действий на сайте.
• При выборе цвета нужно учитывать, кто ваша основная целевая аудитория: женщины или мужчины. Многочисленные исследования показывают, что женщинам больше нравятся такие цвета, как синий, фиолетовый, зеленый. Не нравятся – серый, коричневый, оранжевый. Мужчинам в целом ближе такие цвета, как синий, зеленый и черный, а оранжевый и коричневый они, скорее, не любят.
• Если ваш бизнес ориентируется на другие рынки, то важно проверить не будет ли выбранный цвет вызывать какие-то дополнительные ассоциации, связанные с культурой данной страны. Например, зеленый цвет в Южной Америке – цвет смерти. Голубой цвет в США ассоциируется с патриотизмом, а в Китае – с исцелением. В некоторых странах Азии белый цвет несет траур. Поэтому правильный цвет сайта нужно выбирать с учетом культурных особенностей целевой аудитории.
• Цвет, который увидят посетители сайта, может быть совсем не таким, как на компьютере посетителей. Например, от уровня освещенности и настроек монитора пользователя. Вы можете сделать свой сайт зеленым, а пользователи увидят его в ядовито-зеленой гамме. Или дама, которая хочет купить красную юбку, увидит её в розовых тонах.
• Чтобы цвет сайта одинаково воспринимался всеми посетителями, мы используем специальные цвета для web, а перед окончательным запуском дизайн тестируем на разных компьютерах/гаджетах и в разных помещениях.

50 великолепных цветовых схем с потрясающих веб-сайтов

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

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

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

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

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

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

СВЯЗАНО: 50 красивых цветовых комбинаций (и как их применить к вашим дизайнам)

1 Красочный и сбалансированный

Активная теория

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

2 ярких акцентных цвета

Paypr

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

3 Натуральный и землистый

Resn

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

4 Прохладный и свежий

Grosse Lanterne

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

5 Смелый и яркий

W&CO

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

6 вермиллионов и русская зелень

Stinkdigital

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

7 Стильный и изысканный

Bordel Studio

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

8 фиолетовых оттенков и тонов

ReedBe

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

9 Deep Purple и Blues

Самсы

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

10 Современные и смелые

Брайан Джеймс

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

11 Живые и манящие

Антон и Ирина

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

12 Поразительно и просто

Берт

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

13 Красный и живой

BrightMedia

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

14 Творчество и творчество

Джули Флогак

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

15 Элегантный, но доступный

Эпический

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

16 Изящный и футуристический

MediaMonks

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

17 Новаторский и смелый

Интерактивный дизайн eDesign

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

18 Текстурированный и динамический

HAUS

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

19 Минимальный, но теплый

Идентификаторы удовольствия

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

20 Яркие и четкие

FCINQ

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

21 Чистый и энергичный

Изменить цифровой

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

22 Корпоративные и традиционные

Уотсон / ДГ

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

23 Синий и освежающий

Supremo

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

24 Чистый и современный

Umwelt A / S

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

25 Яркий и элегантный

Waaark

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

26 Молодость и веселье

Пятьсот

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

27 Великолепный контраст

Иммерсивный сад

Этот элегантный и ультрасовременный сайт может похвастаться элегантным и привлекательным сочетанием с эффективным контрастом. Яркий желто-зеленый хорошо сочетается с черным и серым фоном.

28 эффективных акцентных цветов

SMFB

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

29 Современность в полном расцвете

Nurture Digital

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

30 Рядом с природой

Дата рождения 05

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

31 Ярко-розовый и пастель

Stinkdigital

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

32 Уникальная комбинация

AILOVE

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

33 ярких цитрусовых цвета

Чизкейк супергероя

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

34 Яркие синие и оранжевые

Бюрократик

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

35 Красная роза и черника

Google Brand Studio

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

36 Смелый и уникальный

Детали

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

37 Веселая и энергичная

Шер Ами

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

38 Снежный, но теплый

Оставляющий камень

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

39 Богатство и красочность

Elespacio

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

40 Модерн и минимализм

SFCD

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

41 Бесстрашный и бесстрашный

Great Works Копенгаген

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

42 цвета Flat Design

Resn

Даже если вы не знакомы с термином «плоский дизайн», вы, вероятно, видели его раньше: веб-сайты без теней, без градиентов, без фаски; Короче говоря, никаких трехмерных элементов.

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

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

43 Эклектичный и мирный

Играть

Это уникальное сочетание кофейного тона с небесно-голубым и различными оттенками коричневого делает эту цветовую схему успокаивающей и успокаивающей: чем-то напоминающим вашу любимую кофейню или гостиную.

44 Классный и традиционный

details.ch

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

45 ярких акцентных цветов

stinkdigital

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

46 Корпоративное и серьезное

EPIC

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

47 Гламурно и модно

Апартаменты

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

48 Привлекательный и элегантный

ФУТУРАМО

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

49 Громко и прямо в лицо

Паника

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

50 Живых, но успокаивающих

madeo

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

Лучшие цветовые палитры веб-сайтов для повышения вовлеченности (2020)

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

У всех есть любимые цвета, к которым они стремятся, когда дело касается работы или чего-то еще.

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

Хороший выбор цвета требует тщательного планирования.

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

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

Почему ваша цветовая схема так важна?

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

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

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

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

Вот как:

1. Повышение узнаваемости бренда

Ваш сайт — это, по сути, дом вашей компании в Интернете.

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

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

К счастью, цвет увеличивает узнаваемость бренда на 80%.

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

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

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

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

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

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

2. Сформируйте отношение посетителей к вашему сайту

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

В определенной степени причина этого ясна.

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

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

Многие компании пользуются этими связями, как показано логотипами на следующей диаграмме.

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

Это напрямую связано с «индивидуальностью» вашего бренда.

В одном исследовании личности бренда психолог и профессор Стэнфордского университета Дженнифер Аакер пришла к выводу, что пять основных параметров играют роль в индивидуальности бренда:

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

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

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

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

Например, синий часто считается самым безопасным выбором.Отчасти это связано с тем, что это самый распространенный «любимый» цвет среди большинства населения.

На самом деле 57% мужчин и 35% женщин считают, что это их любимый цвет.

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

Также стоит отметить, что синий цвет также часто ассоциируется с чувством доверия, авторитета и надежности.

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

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

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

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

3. Развивайте чувство порядка

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

Лучший способ сделать это — изучить несколько основных принципов теории цвета.

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

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

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

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

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

При этом аналогичные цветовые схемы также являются одними из самых ярких.

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

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

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

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

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

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

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

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

Трехцветная цветовая схема — один из основных вариантов.

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

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

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

4.Выделение определенных элементов

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

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

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

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

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

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

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

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

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

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

5. Упростите конструкторские решения

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

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

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

Это особенно верно, если вы нашли время, чтобы документировать свою палитру простым в использовании способом, как это было в этом бизнесе:

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

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

Так что вместо того, чтобы ломать голову над всеми различными возможностями, вы можете выбрать цвета из заранее заданного списка. И как только вы выберете несколько для использования или тестирования, все коды HEX и RGB уже будут прямо перед вами.

Сколько цветов нужно добавить?

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

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

Как выбрать цветовую схему веб-сайта

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

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

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

16 отличных цветовых палитр для повышения заинтересованности веб-сайтов (2020)

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

1. Меа Чаппа

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

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

2. Большая вершина

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

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

3.Глаз Тори

Наш третий пример взят из инструмента визуализации Twitter Tori’s Eye. Это отличный пример монохромной цветовой схемы. Здесь мы видим эффекты простой, но мощной цветовой палитры, сосредоточенной вокруг оттенков зеленого.

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

4. BarkBox

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

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

5. Набор для выживания с сыром

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

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

6. Северный рубин

Nordic Ruby, конференция в Стокгольме, имеет красивый веб-сайт, оформленный в ярких тонах. Цвета, выбранные для цветовой палитры этого веб-сайта, придают ему изысканность и выделяют его среди менее эффектных дизайнов.

7. Озеро Нона

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

8. Лимонная стойка

И снова неудивительно, что у компании Lemon Stand будет желтый цвет в цветовой палитре своего веб-сайта. Синий и серый красиво сочетаются с желтым и помогают смягчить его яркость.

9. Монетный двор

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

10. Одопод

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

11. Fiverr

Вы могли заметить, что многие компании резервируют определенный цвет — в случае Fiverr, зеленый — исключительно для CTA.Его больше нет на сайте. Фактически, ColorFav даже не выбрал его, потому что в нем преобладают более нейтральные цвета.

12. Школа цифровой фотографии

Можно ожидать, что у компании, специализирующейся на графике, будет отличная цветовая палитра веб-сайта, и Школа цифровой фотографии вас не разочарует. Яркие цвета помогают привлечь внимание зрителя. И, как и Fiverr, оранжевый цвет, используемый в CTA, даже не отображается на палитре сайта, потому что он используется экономно для воздействия.

13. Ahrefs

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

14. Millo.co

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

15.Брайан Гарднер

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

16. Ткацкий станок

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

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

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

Во-первых, нужно ли вам вдохновение?

1: BrandColors

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

Ищете готовую палитру?

2: ColourLovers

ColourLovers — это форум, посвященный дизайну палитр, пользователи которого прислали почти 2 миллиона палитр. Вы можете искать «палитры, включающие этот цвет», просматривать или подписываться на дизайнеров. Часто вы найдете варианты одной и той же палитры, дающие вам готовые варианты оттенка и насыщенности.

(В комплекте с причудливыми названиями.)

3: ColoRotate

ColoRotate поставляется с библиотекой цветовых схем, которые вы можете просматривать, выбирать и изменять. Если вы хотите создать свой собственный с нуля, вы можете это сделать с помощью инструмента 3D-цвета. И вы можете использовать созданную вами схему прямо в PhotoShop или Fireworks с помощью плагина ColorRotate и приложения для iPad.

Соответствие вашему бренду

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

4: Охотник за цветом

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

5: Прекрасный

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

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

6: Цветовое колесо Adobe Color CC

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

7: Палетон

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

8: Color Spire

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

9: Цветовая сфера MudCube

(Источник: http://htmlcolorcodes.com/resources/best-color-palette-generators/)

MudCube’s Color Sphere — это плагин Chrome, который помогает согласовывать цвета, контролировать дальтонизм и определять шестнадцатеричные коды. Вы также можете экспортировать цветовые схемы прямо в Illustrator, PhotoShop и CoIRD.com.

10: Сплошные цвета

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

11: Генератор шестнадцатеричных цветовых схем

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

Создайте свои цвета

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

12: Цветное приложение

Этот инструмент iOS позволяет вам принимать точные решения между похожими цветами, четко распределяя их с некоторым промежутком между ними, а не градиентами, как в цветовых кругах и сферах. Большие цветные сетки позволяют использовать весь экран (пользователи iPad Pro, радуйтесь!), А также позволяют выбирать цвета, находить значения RGB, Hex и HSLA и создавать цветовые палитры с нуля.

13: Цвет

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

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

Получить коды для цвета

Если вы где-то видели цвет и не знаете точно, как его назвать, это инструменты для вас.

14: SpyColor

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

15: цветовые коды HTML

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

Проверьте свою палитру

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

16: Проверь мои цвета

Check my Colors позволяет вам проверять цвета переднего плана и фона вашей цветовой палитры, чтобы убедиться, что они обеспечивают достаточный контраст для людей с дефицитом цвета. Если вы хотите защитить свой сайт от дальтонизма или просто получить наиболее эффективные и интуитивно понятные цветовые комбинации с точки зрения UX, этот инструмент неоценим.Введите URL-адрес, и он выдаст отчет:

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

Соответствующие изображения

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

17: TinEye

TinEye более известен как альтернатива поиску картинок Google. Но он также работает как способ изучения цветовых комбинаций, используя базу данных, содержащую более 10 миллионов лицензионных фотографий Creative Commons, собранных с Flickr.Если вы ищете изображения с идеальным сочетанием цветов, это отличный и простой в использовании способ их найти.

18: Дизайн

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

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

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

Подумайте об этом. Вы тестируете свои CTA, заголовки и другие элементы веб-сайта. Почему цвет должен быть другим?

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

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

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

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

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

Вы не узнаете, пока не протестируете.

Начать использовать Crazy Egg

Создайте бесплатную учетную запись Crazy Egg, чтобы начать бесплатную пробную версию, или войдите в систему, чтобы настроить отчеты о поведении пользователей.

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

Заключение

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

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

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

Дайте себе возможность сделать свой сайт максимально привлекательным и запоминающимся.

Дэвид Чжэн — выпускник и бывший сотрудник The Daily Egg.

11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру

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

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

Учет психологии цвета для цветовых схем веб-сайта

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

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

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

Выбор идеальной цветовой палитры для вашего сайта создает положительное восприятие и доверие потребителей

Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но также можете использовать их для управления тем, как они воспринимают ваш веб-сайт. Почему именно Facebook всегда придерживался синей цветовой схемы? Неужели это действительно потому, что Марк Цукерберг дальтоник к красно-зеленому, а это значит, что синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый цвет.Фактически, синий цвет присутствует более чем в половине всех логотипов. Имея это в виду, давайте посмотрим на основные психологические принципы всех ключевых цветов:

1. Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем на веб-сайтах электронной коммерции, а также в ресторанах и приложениях для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Оранжевый : оптимизма и счастья.Оранжевый цвет повсеместно считается «забавным» цветом, и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленая: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда.Зеленый — также отличный выбор цвета, чтобы подчеркнуть экологичность и устойчивость.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
6. Purple : креативность, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет, который можно использовать в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
7. Pink : креативность и изобилие.Pink сейчас радуется своей жизни, больше, чем когда-либо, его принимают люди всех полов и идентичностей, а это означает, что бренды следуют этому примеру и включают его в целый ряд отраслей.
8. Коричневый : доброта, тепло и честность. Коричневый цвет удобен в использовании в веб-дизайне. Он придает веб-сайтам естественную, практичную атмосферу и часто сочетается с традиционным винтажным дизайном.
9. Черный: современный, гладкий, нейтральный. Его минимализм отлично подходит для роскошных сайтов; многие косметические бренды используют черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
11. Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.

Мы только что отправили вам ваш первый урок.

11 красивых цветовых схем веб-сайта, которые вдохновят вас

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

1. Цвета для продуманных экологически чистых продуктов

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

Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:

2.

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

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

Бледно-персиковый, апельсиновый, мятный и темно-зеленый:

3. Стильные, тщательно подобранные цветовые схемы

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

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

Сирень, ржавчина, крем и уголь:

4.Веселые, юные цветовые палитры

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

Нежно-розовый, зеленый, оранжевый и фиолетовый:

5.Цвета для креативщиков, кружащие голову

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

Желтый, неоновый синий и черный:

6.Успокаивающие и оптимистичные нейтральные палитры

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

Персик, сливки и уголь:

7.Надежные тона

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

9. Современные модные цветовые схемы

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

Фиолетовый, лиловый, мята и апельсин:

10. Веселые и благотворительные цветовые палитры

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

Синий, желтый, шалфейный и белый:

11. Сильные и женственные цветовые схемы

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

Пудрово-розовый, фуксия и нефрит:

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

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

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

Ищете единственную в цветовой гамме?

Позвольте нашим дизайнерам подобрать ваши оттенки.

Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.

Как выбрать хорошие цветовые схемы для веб-сайтов (2021)

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

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

Почему важны цвета веб-сайта

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

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

Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий всплеск или снижение конверсии. Например, компания Beamax, производящая проекционные экраны, заметила колоссальный рост числа кликов по красным ссылкам на 53,1% по сравнению с синими ссылками.

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

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

Как выбрать цветовую схему для вашего сайта

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

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

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

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

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

• Красный: Coca-Cola или Nintendo — Подразумевает волнение или счастье
• Оранжевый : Nickelodeon или Fanta — Подразумевает, что впереди дружелюбное, веселое время
• Желтый: Nikon или McDonalds — Подразумевает оптимизм и счастье
• Зеленый: Whole Foods или Animal Planet — Подразумевает свежесть и природу
• Синий: Walmart или American Express — Подразумевает надежность и уверенность
• Фиолетовый: Hallmark или Cadbury — Подразумевает выдающийся бренд, который имеет историю качества
• Коричневый: Nespresso или UPS — подразумевает надежный продукт, который может использовать кто угодно
• Черный: Chanel или Adidas — Подразумевает роскошь или элегантность
• Белый: Apple или Nike — Подразумевается гладкие, удобные для пользователя продукты

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

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

Выберите дополнительные цвета

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

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

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

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

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

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

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

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

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

Посмотрите на наш собственный веб-сайт, чтобы увидеть, что может выделить пустой серый фон.

Выберите цвет шрифта

4. Выберите цвет шрифта

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

Черный шрифт на белом фоне может вызвать утомление глаз, так как здесь 100% контраст — и люди с большей вероятностью отойдут, если ваш веб-сайт трудно читать.

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

Беглый взгляд на эту страницу веб-сайта Penguin Books показывает, что они выбрали более мягкий серый тон для своего текста. Это намного менее агрессивно, чем резкий контраст черного и белого, и позволяет создать более мягкую атмосферу.

Советы по выбору цвета веб-сайта

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

Используйте постоянную насыщенность

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

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

Используйте тот же цвет, но изменяйте насыщенность

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

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

Дополнительные советы

Дополнительные советы можно найти в нашей инфографике ниже.

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

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

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

Существует также Color Safe, еще один веб-сайт, который позволяет вам создавать и просматривать цвета по типу, что позволяет вам найти идеальный красный или зеленый.

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

Как выбрать цвет для вашего веб-сайта: Резюме

Вот шаги, которые вы захотите предпринять при выборе цветов для своего веб-сайта:

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

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

Часто задаваемые вопросы

Сколько цветов должно быть на сайте?

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

Где использовать броские цвета?

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

Какие цвета самые распространенные?

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

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

Получите в свои руки полный контрольный список для создания веб-сайтов — бесплатно!

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

Введите адрес электронной почты

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

О Конни

Проектирование и создание вашего веб-сайта (особенно вашего первого) — непростая задача. Если вы такой же дизайнер, как я, то вы уже далеко впереди всех. Но что, если вы один из 99% владельцев бизнеса, которые не обладают техническими или творческими способностями? Я хочу поделиться с вами своим опытом в дизайне веб-сайтов, чтобы помочь вам создать профессионально выглядящий веб-сайт для развития вашего бизнеса.

Посмотреть все сообщения Конни →

Мы используем файлы cookie. Просматривая наш сайт, вы соглашаетесь на использование файлов cookie.

26 вдохновляющих цветовых схем веб-сайтов в 2021 году (палитры для дальтоников)

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

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

В этой статье мы рассмотрим более 25 фантастических цветовых схем веб-сайтов для целевых страниц, электронной коммерции и личных сайтов, а также то, как вы можете выбрать свою, не теряя времени.

Как выбрать цветовую схему для вашего сайта

Глаза нецветного взрослого человека могут видеть более 1 000 000 различных цветов. Как быстро и эффективно выбрать правильную цветовую схему со всеми этими вариантами? Это проблема, с которой сталкиваются все веб-дизайнеры, пытающиеся создать цветовую схему или палитру для своего дизайна с нуля.

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

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

Выбор цвета по отрасли

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

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

Цвета бренда по отраслям (Источник изображения: towergateinsurance.co.uk)

Какие эмоции вы хотите, чтобы потенциальные клиенты вызывали у вашего бренда, продукта или услуги?

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

Синие конвейеры:

Синий цвет надежности

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

Это не апеллирует к спонтанности или эмоциям. Вместо этого он инициирует спокойный и логичный процесс принятия решений.

Наиболее часто встречается в следующих отраслях:

• Банковское дело
• Авиакомпания
• Связь
• Потребительское финансирование
• Электроэнергетика
• Тяжелая техника
• Товары для дома
• Отели
• Фармацевтические препараты

Красный цвет передает внимание и страсть

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

Наиболее часто встречается в следующих отраслях:

• Рестораны
• Напитки
• Розничная торговля продуктами питания
• Недвижимость
• Одежда

Зеленый передает ощущение жизненной силы

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

Наиболее часто встречается в следующих отраслях:

• Продукты питания и напитки
• Универмаги
• Недвижимость
• Химические вещества

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

Наиболее часто встречается в следующих отраслях:

• Одежда
• Принадлежности
• Поставщики услуг Интернета и мобильной связи
• Универмаги
• Отели

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

Сколько цветовых схем следует использовать на одном веб-сайте?

Для стандартной цветовой схемы веб-сайта вы можете выделить от трех до семи отдельных цветов в одной схеме или палитре.

Но сколько разных цветовых схем вы должны использовать на одном веб-сайте?

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

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

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

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

Как получить точные цветовые схемы на веб-сайте

Colorzilla

Чтобы идентифицировать каждый цвет, используемый на веб-сайте, вплоть до точного оттенка и шестнадцатеричного кода, вы можете использовать расширение Google Chrome или надстройку Firefox, например ColorZilla.

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

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

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

Какую цветовую схему веб-сайта мы используем в Kinsta?

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

Медиа-комплект Kinsta

Мы используем темно-фиолетовый (# 5333ed) в качестве основного цвета, бирюзовый (# 2cd4d9), чтобы сопоставить и создать эффектные, но сбалансированные градиенты, и приглушенный серый цвет для текста (# 6E7076).

Но что делают другие компании?

Давай узнаем!

26 лучших примеров цветовых схем для веб-сайтов

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

Цветовые схемы веб-сайта Great Ecommerce

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

1. Средство для ухода за кожей: яркое и игривое

Bliss

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

2. Бренд одежды: Clear and Concise

Le Bonnet

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

3. Магазин одежды: Simplicity

Редакция

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

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

4. Посуда: надежность и профессионализм

Моя посуда

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

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

5. Жевательная резинка: натуральная и импульсная

Neuro

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

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

6. Наручные часы: изысканность и роскошь

Премьер-посол

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

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

7. Брюки: креативные и доступные

Алдай

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

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

8. Фруктовые закуски: элегантные и подчеркнутые цвета

Мэдис

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

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

9. Джинсовая ткань нестандартного кроя: это живо

Без вращения

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

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с советами по WordPress!

Цветовые схемы личных и туристических веб-сайтов

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

10. Творческая простота

Мадлен Далла

Мадлен Далла — фотограф из Нью-Йорка с большим чутьем в дизайне веб-сайтов (и впечатляющим портфолио).

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

11. Оттенки серого с всплеском

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

12. Единство с природой

iFly 50

iFly 50 — это онлайн-журнал, выпущенный KLM в честь своего 50-летия.

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

13. Чистота и профессионализм

Бенедиктас Гилис

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

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

14. Прагматические цвета

BucketListly

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

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

15. Элегантная простота

Ларс Францен

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

16. Футуристическая накладка

Точечное легкое

Dot Lung отлично справляется с задачей максимизировать простую цветовую палитру с наложениями и чистой фоновой графикой.Фиолетовый цвет на заднем фоне создает единое впечатление от страницы к странице.

17. Свет и тьма

Любовь к Исландии

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

Цветовые схемы целевой страницы

Ниже мы выделили различные целевые страницы с уникальными или эффективными цветовыми схемами.

18. Резкие контрасты

Зенли

Zenly использует резко контрастирующие цвета, чтобы подчеркнуть фактическую функциональность приложения Live Map (кстати, именно так вы встраиваете Google Maps на сайты WordPress). Космический фон выделяет глобальный дизайн приложения и придает ему футуристический оттенок.

19. Цвет для выделения

Slack

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

Обязательно ознакомьтесь с нашим подробным сравнением Microsoft Teams и Slack.

20. Яркие цвета вызывают эмоции

Spotify

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

21. Цветовые контрасты создают порядок в хаосе

Автономность

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

22. Футуристический ансамбль цветов

Багснаг

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

23. Живые цвета

Connect Homes

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

24. Консервативные цвета, игривый дизайн

Plink

Plink основана на относительно консервативном оттенке темно-синего, но уравновешивает его игривой и веселой анимацией и дизайном в целом.

25. Природная жизненная сила

Travelshift

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

26. Яркие краски надежды

Мазок в мире

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

Генераторы цветовых схем веб-сайтов

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

Colormind

Colormind

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

Coolors.co

Coolors.co

Coolors.co — это веб-приложение и мобильное приложение, которое помогает создавать палитры с нуля. В нем есть альтернативные оттенки для каждого варианта цвета и другие продвинутые инструменты, которые помогут вам принимать эффективные решения о ваших цветовых схемах.

Палетон

Палетон

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

ColorSpace

ColorSpace

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

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

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

Различные виды дальтонизма

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

Красно-зеленая дальтонизм (дейтеранопия и протанопия) — наиболее распространенная форма дальтонизма. Это поражает примерно 1 из 12 лиц североевропейского происхождения. Учитывая такое большое количество людей, затронутых этим, это стоит учитывать при разработке и / выборе темы WordPress.

Сине-желтая цветовая слепота встречается гораздо реже и в равной степени поражает мужчин и женщин.

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

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

• Не контрастируйте зеленый цвет с желтым и наоборот.
• Не контрастируйте желтый с красным или оранжевым.
• Не противопоставляйте фиолетовый цвет аналогичным оттенкам синего.

Выбирая отдельные основные цвета для вашего логотипа или дизайна, вы должны учитывать, остается ли он фирменным для потребителей с дальтонизмом. Например, фиолетовый Kinsta по-прежнему имеет цвет от темно-синего до красно-зеленого для слепых потребителей, что свидетельствует о надежности и надежности.Для нас это 100% фирменный стиль, поэтому у наших потенциальных клиентов нет потенциального конфликта.

Сводка

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

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

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

А теперь пора выбрать шрифты, не так ли?

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу Kinsta! Ознакомьтесь с нашими тарифами

12 основных советов по выбору цветовой схемы веб-сайта

Знаете ли вы, что 85 процентов покупателей принимают решение о покупке товара на цвете?

Это правда.

Сначала я обнаружил, что этот показатель просто потрясающий.

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

Визуальные стимулы направляют почти все, что мы делаем.

Так почему же все должно быть иначе, когда дело доходит до покупки?

И только подумайте о некоторых из крупнейших мировых брендов.

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

В «Макдоналдсе» — красно-желтый.

Для Dell он синий.

И так далее.

Как мы все знаем, создание прочной торговой марки жизненно важно.

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

А что является неотъемлемой частью бренда?

Его логотип.

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

Согласно исследованию, «Цвет увеличивает узнаваемость бренда на 80 процентов.”

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

Есть еще кое-что, о чем нужно помнить. Цвет бренда коррелирует со значением бренда .

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

Ценные бренды заботятся о цвете . Много!

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

Взгляните на эти примеры с сайта TheLogoFactory.com

Вы можете мгновенно обнаружить искусственные логотипы, и вы почувствуете нечто иное, окружающее этот бренд!

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

Вы не хотите выбирать цветовую схему наугад или основывать ее на том, «что вам нравится».

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

Почему?

«Люди подсознательно оценивают окружающую среду или продукт в течение 90 секунд после первого просмотра. От 62 до 90 процентов этой оценки основано только на цвете ».

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

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

Первое, что я рекомендую, — это ознакомиться с тем, как цвет влияет на человека на эмоциональном уровне.

Вот пример того, как различные цвета кнопок CTA влияют на покупателей в Северной Америке.

Обратите внимание, что влияние цвета может варьироваться в зависимости от географического положения.

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

Я также наткнулся на справочник Color Emotion Guide , в котором объясняются эмоции, которые мы связываем с цветами, и приводятся некоторые примеры брендов, использующих каждый цвет.

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

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

С кем вы пытаетесь связаться и продать?

Какие эмоции вы пытаетесь вызвать?

Это чрезвычайно важные вопросы, которые стоит задать себе.

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

Учитывайте индивидуальность и эмоции вашей целевой аудитории.

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

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

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

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

Исследование, проведенное на основе Color Assignments Джо Хэллока, показало, что в среднем каждый пол имеет определенные цветовые предпочтения.

Вот что я имею в виду.

Как видите, мужчинам очень нравится синий и не нравится коричневый и фиолетовый.

Женщины любят синий и фиолетовый и не любят коричневый и оранжевый.

Это еще один фактор, о котором следует помнить.

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

Знаете ли вы, что цветовые предпочтения человека могут меняться с возрастом?

Согласно исследованию Джо Хэллока, это правда.

Вот любимые цвета людей по возрастным группам.

Вот наименее любимый цвет людей по возрастным группам.

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

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

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

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

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

И это на основании их личных предпочтений, а не психологии.

Если ваш любимый цвет — синий, очень заманчиво сделать его основным цветом.

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

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

Итак, на этом этапе вы должны иметь в виду основной цвет.

А теперь пора выяснить, сколько всего цветов вы хотите использовать.

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

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

Вот как все это ломается.

• 60 процентов доминирующего цвета
• 30 процентов вторичного цвета
• 10 процентов основного цвета

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

Если вам нужен пример правила 60-30-10, не ищите ничего, кроме Quick Sprout.

Обратите внимание на то, что зеленый является основным цветом, белый — второстепенным, а черный — основным.

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

Три.

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

Использование более четырех цветов может сделать вещи сложными и совершенно уродливыми.

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

Я не эксперт по дизайну, но одна вещь, которую вы обязательно захотите, — это контраст.

Лично я предпочитаю сайты со светлым фоном и более темными контрастами на переднем плане.

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

Вот хороший пример.

Однако есть сайты, которые неплохо справляются с темным фоном.

Возьмем, к примеру, «Чудо-хлеб».

Помните, в классе рисования вы узнали о «цветовом круге»?

Что ж, это может быть огромным подспорьем при выборе цветовой схемы сайта.

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

Вот о чем я.

Один из возможных вариантов дополнительных цветов — желтый и фиолетовый.

Еще бы зеленый и оранжевый.

Один из вариантов аналогичных цветов — оранжевый и красный.

Еще бы зеленый и синий.

Вот совет по оптимизации процесса.

Используйте такой инструмент, как Colorspire.

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

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

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

Вы также можете многому научиться у конкурентов в вашей отрасли.

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

Это должно дать вам представление о том, какие типы тонов они используют.

Оттуда у вас есть один из двух вариантов.

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

Я лично сторонник второго варианта, если вы хотите создать свой собственный бренд.

Вот в чем дело.

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

На самом деле, это может быть очень ограничивающим фактором.

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

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

Затем сузьте его, пока не найдете цветовую схему, соответствующую вашему бренду, до T.

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

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

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

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

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

Все это может иметь огромное влияние на ваш бизнес.

Какие факторы вы принимаете во внимание при выборе цветовой схемы?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

39 вдохновляющих цветовых схем веб-сайта, которые пробудят ваши творческие способности

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

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

Вы хотите узнать о главных тенденциях веб-дизайна 2021 года?

I. Мягкие и бледные цветовые схемы веб-сайта: Feelin ’Comfy

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

Мягкие и бледные цветовые решения веб-сайта приятны и уютны.Вот подборка сайтов, выполненных в таких цветовых решениях. Вы ощутите комфорт и уют?

1. Beauregard

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

• ISABELLINE
• БЫСТРЫЙ СЕРЕБРЯНЫЙ
• AUROMETALSAURUS
• СВЕТЛО-СЕРЫЙ
• ЧЕРНЫЙ ОЛИВКОВЫЙ

2.Squilla Fund

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

• ЧЕРНЫЙ СИНИЙ
• ЛУННЫЙ КАМЕНЬ
• СИНИЙ ПОРОШОК
• ВОЛШЕБНАЯ МЯТА
• БЕЛЫЙ ДЫМ

3. Либенар

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

• СНЕГ
• РОЗОВЫЙ ИСПАНСКИЙ
• ПЫЛЬНАЯ БУРЯ
• МЫЛО
• ЯЛЕ СИНИЙ

4. Mont Roucous

Чистый и красивый сайт, рекламирующий детские товары. Дизайнеры сделали ставку на бледно-розовые оттенки в сочетании с более лиловыми нюансами, чтобы создать красивую цветовую палитру сайта, а именно:

• КАРОЛИНА СИНИЙ
• ПАСТЕЛЬНЫЙ РОЗОВЫЙ
• ЧАЙНАЯ РОЗА
• МАКСИМАЛЬНЫЙ СИНИЙ ФИОЛЕТОВЫЙ
• СИНИЙ
ОРГАНИЗАЦИЯ ОБЪЕДИНЕННЫХ НАЦИЙ

5.Велосипеды ковбойские

Сайт о новом поколении электровелосипедов. Этот дизайн был выполнен с мягкими золотисто-розовыми оттенками, яркими цветами типографики и забавными золотыми деталями. Цветовая гамма сайта состоит из:

• ЛАВАНДОВАЯ РУМАЯ
• ЧАЙНАЯ РОЗА
• РОЗОВОЕ ЗОЛОТО
• РАДИКАЛЬНЫЙ КРАСНЫЙ
• СВЕТЛЫЙ ФРАНЦУЗСКИЙ БЕЖЕВЫЙ

Вдохновляющие цветовые схемы веб-сайта фиолетовый пастельный фиолетовый и розовый веб-сайт

6. Сахель

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

• ТЕМНОЕ ЗОЛОТО
• ТАН
• ПЫЛЬНАЯ БУРЯ
• БЕЛЫЙ ДЫМ
• VAN DYKE КОРИЧНЕВЫЙ

7. Я и мистер Дарси

Блог в очень женственном веб-дизайне радует глаз красивыми теплыми цветами. Этот блог о «жизни и любви», по словам владельца, был выполнен в цветовой гамме с этими ведущими цветами:

• МИНДАЛЬ
• РОЗОВЫЙ ШАМПАНСКИЙ
• СРЕДНИЙ ФИОЛЕТОВЫЙ
• КОБИ
• СОЛНЕЧНИК

8.Спасаем воздух

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

• АЭРО СИНИЙ
• ОРХИДЕЯ СВЕТЛАЯ СРЕДНЯЯ
• HONEYDEW
• СВЕТЛЫЙ КОРАЛЛ
• НЕБЕЛЫЙ ШЕЛК

9. Менд Зельцер

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

• ПЛАТИНОВЫЙ
• ТАНГО РОЗОВЫЙ
• ОРАНЖЕВО-ЖЕЛТЫЙ
• ЯЩИК ИНСТРУМЕНТОВ
• ЯРКАЯ ЛАВАНДА

Inspiring Website Цветовые схемы красочные пастельные тона сайт

10. Лобстер

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

• ЯРКИЯ
• СИНИЙ ПОРОШОК
• ЗЕЛЕНО-СИНИЙ
• БЕЛЫЙ
• РОЗОВЫЙ ФАНДАНГО

Вас также может заинтересовать эта статья: Психология цвета — как улучшить ваш веб-дизайн

II. Пастельные и землистые цветовые схемы веб-сайта: навеяны природой

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

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

11. Лечение ногтей

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

• ПЛАТИНОВЫЙ
• ЧЕРЕПАХА ЗЕЛЕНЫЙ
• СЕРЫЙ-СИНИЙ
• ТАН
• КОКОС

12. Горный человек

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

• БЕЛЫЕ ЗОЛОТО
• ОЛЕНЬ
• АРТИШОК
• ТЕМНО-КОРИЧНЕВЫЙ-ТАНГЕЛО
• СОЛОМА

Вдохновляющий веб-сайт Цветовые схемы ретро-цвета веб-сайт

13.Андрис Гауракс

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

• ПУЧКИ СИНИЕ
• ФРАНЦУЗСКИЙ НЕБО-СИНИЙ
• АЛИСА СИНИЙ
• БЕЛЫЙ
• МЕДЬ

14. Зеленый экологически чистый голландец

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

• BISTRE
• VEGAS GOLD
• ПУСТЫННЫЙ ПЕСК
• БЕЛЫЙ
• ПАЛЬМОВЫЙ ЛИСТ

15. 10 × 18

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

• БЕЛЫЙ ДЫМ
• DEEP SPACE SPARKLE
• СЭНДИ БРАУН
• ПАСТЕЛЬ ОРАНЖЕВЫЙ
• СВЕТЛЫЙ КОРАЛЛ

Объявление

16.Адриан Лоран

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

• ПЫЛЬНАЯ БУРЯ
• УПЛОТНЕНИЕ КОРИЧНЕВОЕ
• ОРАНЖЕВЫЙ (PANTONE)
• БЕЛЫЙ МЕДНЫЙ
• БЕЛЬЁ

Вдохновляющие цветовые схемы веб-сайта в теплых тонах

17. Бронзовая коллекция Bang Olufsen

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

• ACAJOU
• СТАРОБОРДОВЫЙ
• БЕЛЫЙ
• ИНДИЙСКИЙ ЖЕЛТЫЙ
• РУССЬ

Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для вашего интернет-магазина

III. Яркие и смелые цветовые схемы веб-сайта: кричащие о внимании

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

18. MA-TEA

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

• PARADISE PINK
• КОСМИЧЕСКИЙ КОБАЛЬТ
• AUREOLIN
• КЕЛЛИ ГРИН
• МУДРЕЦ

19. Мяу Волк

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

• AUREOLIN
• AERO
• MANTIS
• СВОБОДА
• РОЗОВЫЙ МЕКСИКАНСКИЙ

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

• PARADISE PINK
• ПАЛАТИНАТ СИНИЙ
• ПОЛУНОЧНО-СИНИЙ
• ТЕМНАЯ ОРХИДЕЯ
• RICH ELECTRIC СИНИЙ

21. Анимат Креатик

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

• КОБИ
• HAN ФИОЛЕТОВЫЙ
• СРЕДНИЙ СИНИЙ
• МАКСИМАЛЬНЫЙ ЖЕЛТЫЙ
РУБ.

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

22. Счастливый онлайн

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

• ЯНКИ СИНИЙ
• СИНИЙ
• ФОЛЛИ
• ОРАНЖЕВЫЙ (WEB)
• СРЕДНИЙ МОРСКИЙ ЗЕЛЕНЫЙ

23. Саммит Грамаду

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

• ЦЕРИЗ РОЗОВЫЙ
• ГРУША
• СИНИЙ
• УЛЬТРАМАРИНОВЫЙ СИНИЙ

24.La Phase 5

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

• RICH CARMINE
• ЗОЛОТОЙ МАК
• КАРОЛИНА СИНИЙ
• SEA SERPENT
• ISABELLINE

25. Синдикат ICO

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

• ЦВЕТОЧНЫЙ БЕЛЫЙ
• банановая мания
• БЕЗОПАСНЫЙ ЖЕЛТЫЙ
• MAUVE
• БОГАТАЯ ЛАВАНДА

26. Securinvest

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

• ПОЛУНОЧНО-СИНИЙ
• ГОЛУБОЙ
• БЕЛЫЙ РОЗОВЫЙ
• МАНДАРИН
• СРЕДНИЙ АКВАМАРИН

27. HtmlBurger

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

• ЖЕЛТЫЙ (CRAYOLA)
• ГЛУБОКОЕ МОРКОВНО-ОРАНЖЕВОЕ
• ВЕРМИЛИОН
• AERO
• НЕБЕСНЫЙ СИНИЙ

28.Сочная еда

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

• AUREOLIN
• РОЯЛ ПУРПУРНЫЙ
• БЕЛЫЙ АНТИВСПЫШКА
• БЕЛЫЙ
• ОКСФОРД СИНИЙ

IV.Мрачные и драматические цветовые схемы веб-сайта: разгадывайте тайну

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

29. Зеркало My 360

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

• ONYX
• ТАУП СЕРЫЙ
• БЕЛЫЙ ДЫМ
• КОРОЛЕВА СИНИЙ
• СРЕДНЯЯ БИРЮЗА

30. Марго Леруа

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

• KEPPEL
• GUNMETAL
• НАРУЖНОЕ ПРОСТРАНСТВО
• МЫШИ
• РИТМ

31.Иван Ибаньес

Черно-белый дизайн веб-сайта с монохромными серыми иллюстрациями и яркими фиолетовыми оттенками. Этот сайт представляет собой внештатного UX-дизайнера и выполнен в следующей цветовой гамме:

• ТРОЛЛЕЙ СЕРЫЙ
• ТЕМНО-ФИОЛЕТОВЫЙ
• СВЕТЛО-СЕРЫЙ
• ДЭВИ ГРЕЙ
• JET

32. Производство Portugal

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

• БЕЛЫЙ
• ИСПАНСКИЙ СЕРЫЙ
• ВИНТОВКА ЗЕЛЕНЫЙ
• ЧЕРНЫЙ ЧЕРНЫЙ
• ПОСТОЯННОЕ ОЗЕРО ГЕРАНИЕВ

33. Microsoft в цифрах

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

• ЧАРЛСТОН ГРИН
• ТЕМНАЯ ПЕЧЕНЬ
• СВЕТЛО-СЕРЫЙ
• РОЗОВАЯ ОРХИДЕЯ
• ЧАЙНАЯ РОЗА

Вы хотите проверить несколько удивительных примеров параллакса CSS?

В.Монохромные цветовые схемы веб-сайтов: один цвет для победы

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

34. Ефрем Иосиф

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

• ИНДИГО КРАСИТЕЛЬ
• СИНИЙ ОКЕАН
• ЯЩИК ИНСТРУМЕНТОВ
• ДЕТСКИЙ ПОРОШОК
• ПАЛЕ АКВА

35. Джин Whitetail

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

• БЕЛЫЙ
• ЯРКИЯ
• ОКСФОРД СИНИЙ
• PAYNE’S GREY
• КОРОЛЕВСКИЙ СИНИЙ

36. Fitspirit Fashion

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

• ТИРИАНСКИЙ ПУРПУРНЫЙ
• АМАРАНТ ГЛУБОКИЙ ФИОЛЕТОВЫЙ
• СРЕДНИЙ ФИОЛЕТОВЫЙ
• ЛАВАНДОВАЯ РУМАЯ
• ГОЛЛИВУДСКИЙ ЦЕРИЗ

37.Sikkema

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

• ТАНЖЕРИН
• СЕЛЕКТИВНЫЙ ЖЕЛТЫЙ
• ПЕСЧАЯ БУРЯ
• МИНЬОН ЖЕЛТЫЙ
• ВКУС

38. Готэм-Сити

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

• ТАУП СЕРЫЙ
• ИЗЮМ ЧЕРНЫЙ
• ТЁМНЫЙ СЕРЫЙ
• СЕРЕБРЯНЫЙ
• РЕГИСТРАЦИЯ ЧЕРНЫЙ

39. Аджа Уилсон

Дизайн веб-сайта, который приветствует посетителя багрово-серым монохромным видео для области героя со следующими оттенками и оттенками:

• БЕЛЫЙ АНТИВСПЫШКА
• СВЕТЛО-СЕРЫЙ
• СТАРАЯ ЛАВАНДА
• ИЗЮМ ЧЕРНЫЙ
• ПУРПУРНАЯ КОЛПАЧКА

Вот и все!

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