Цвета для сайта: где найти и как выбрать

где найти и как выбрать

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

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

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

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

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

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

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

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

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

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

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

Подбор цветовой палитры сайта: 5 бесплатных сервисов

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

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

1. Adobe Color CC

2. Khroma

3. Coolors

4. Color Tool — Material Design

5. ColorSpace

01. Adobe Color: изучите готовые цветовые комбинации или создайте новую.

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

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

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

Также обратите внимание на цветовой круг. Здесь вы можете играть с цветами, используя параметры CMYK, RGB, LAB и HSV.

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

Типы правил:

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

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

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

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

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

Тени — используется пять цветов одного оттенка и насыщенности), но с разными значениями яркости.

Настраиваемое — цвета для палитры выбираются вручную.

02. Khroma: бесконечное количество комбинаций и машинное обучение

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

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

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

03. Coolors: профессиональный инструмент охотника

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

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

Кстати, сервис доступен и на смартфонах.

04. Color Tool — Material Design: тест вашего вкуса UI

Material Design — это дизайн система, разработанная Google. Она применяется во всех их продуктах для поддержания единства и согласованности визуального языка.

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

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

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

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

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

05. ColorSpace: один цвет, множество вариантов.

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

Команда Wix ❤️

50 идей от лучших дизайнеров

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

Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших! 

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

Цвета для сайта: 50 палитр

1. Active Theory

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

#E27D60 — #85DCB — #E8A87C — #C38D9E — #41B3A3

2. Paypr

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

#242582 — #553D67 — #F64C72 — #99738E — #2F2FA2

3. Resn

Цветовая палитра выглядит очень естественно. Идеально подойдет для сайтов, связанных с природой и “зеленой” тематикой. 

#8D8741 — #659DBD — #DAAD86 — #BC986A — #FBEEC1

4. Grosse Lanterne

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

#05386B — #379683 — #5CDB95 — #8EE4AF — #EDF5E1

5. W&CO

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

#FC4445 — #3FEEE6 — #55BCC9 — #97CAEF — #CAFAFE

6. Stinkdigital

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

#8EE4AF — #EDF5E1 — #5CDB95 — #907163 — #379683

7. Bordel Studio

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

#5D5C61 — #379683 — #7395AE — #557A95 — #B1A296

8. ReedBe

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

#2E1114 — #501B1D — #64485C — #83677B — #ADADAD

9. Samsy

Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года. 

#0C0032 — #190061 — #240090 — #3500D3 — #282828

10. Bryan James

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

#1A1A1D — #4E4E50 — #6F2232 — #950740 — #C3073F

11. Anton & Irene

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

#E7717D — #C2CAD0 — #C2B9B0 — #7E685A — #AFD275

12. Bert

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

#0B0C10 — #1F2833 — #C5C6C7 — #66FCF1 — #45A29E

13. BrightMedia 

В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа.

#5D001E — #E3E2DF — #E3AFBC — #9A1750 — #EE4C7C

14. Julie Flogeac

Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.

#D79922 — #EFE2BA — #F13C20 — #4056A1 — #C5CBE3

15. Epic

Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко. 

#EDC7B7 — #EEE2DC — #BAB2B5 — #123C69 — #AC3B61

16. MediaMonks

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

#2C3531 — #116466 — #D9B08C — #FFCB9A — #D1E8E2

17. eDesign Interactive

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

#272727 — #747474 — #FF652F — #FFE400 — #14A76C

18. HAUS

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

#2F4454 — #2E151B — #DA7B93 — #376E6F — #1C3334

19. Gusto Ids

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

#EAE7DC — #D8C3A5 — #8E8D8A — #E98074 — #E85A4F

20. FCINQ

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

#D83F87 — #2A1B3D — #44318D — #E98074 — #A4B3B6

21. Change Digital

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

#5680E9 — #84CEEB — #5AB9EA — #C1C8E4 — #8860D0

22. Watson/DG

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

#88BDBC — #254E58 — #112D32 — #4F4A41 — #6E6658

23. Supremo  

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

#25274D — #464866 — #AAABB8 — #2E9CCA — #29648A

24. Umwelt A/S

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

#17252A — #2B7A78 — #3AAFA9 — #DEF2F1 — #FEFFFF

25. Waaark           

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

#F8E9A1 — #F76C6C — #A8D0E6 — #374785 — #24305E

26. Five Hundred 

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

#A64AC9 — #FCCD04 — #FFB48F — #F5E6CC — #17E9E0

27. Immersive Garden

И снова яркий цвет на темном фоне, в этот раз в главной роли зеленый. Выглядит элегантно.

#61892F — #86C232 — #222629 — #474B4F — #6B6E70

28. SMFB

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

#FAED26 — #46344E — #5A5560 — #9D8D8F — #9B786F

29. Nurture Digital 

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

#182628 — #65CCB8 — #57BA98 — #3B945E — #F2F2F2

30. Born05

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

#687864 — #31708E — #5085A5 — #8FC1E3 — #F7F9FB

31. Stinkdigital

Яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости. 

#A1C3D1 — #B39BC8 — #F0EBF4 — #F172A1 — #E64398

32. AILOVE

Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание. 

#59253A — #78244C — #895061 — #0677A1 — #2D4159

33. Superhero Cheesecake

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

#1F2605 — #1F6521 — #53900F — #A4A71E — #D6CE15

34. Burocratik

Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.

#10E7DC — #0074E1 — #1B9CE5 — #6CDAEE — #F79E02

35. Google Brand Studio

Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта.

#4285F4 — #5C2018 — #BC4639 — #D4A59A — #F3E0DC

36. Details

Неожиданное и современное решение поможет любому сайту стать лучшим в своей нише.

#080F5B — #0D19A3 — #15DB95 — #F4E4C1 — #E4C580

37. Cher Ami

Энергичная и оптимистичная палитра создана для ярких проектов.

#FBE8A6 — #F4976C — #303C6C — #B4DFE5 — #D2FDFF

38. Leavingstone

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

#B23850 — #3B8BEB — #E7E3D4 — #C4DBF6 — #8590AA

39. Elespacio

Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм. 

#F78888 — #F3D250 — #ECECEC — #90CCF4 — #5DA2D5

40. SFCD  

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

#19181A — #479761 — #CEBC81 — #A16E83 — #B19F9E

41. Great Works Copenhagen

Бесстрашное сочетание оттенков синего и красного подчеркнет профессионализм и силу проекта. 

#314455 — #644E5B — #9E5A63 — #C96567 — #97AABD

42. Resn

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

#00887A — #FFCCBC — #FFFFFF — #D3E3FC — #77A6F7

43. Play

Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.  

#844D36 — #474853 — #86B3D1 — #AAA0A0 — #8E8268

44. details.ch

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

#5F6366 — #4D6D9A — #86B3D1 — #99CED3 — #EDB5BF

45. stinkdigital

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

#802BB1 — #2D283E — #564F6F — #4C495D — #D1D7E0

46. EPIC

Приглушенные оттенки синего, красного и зеленого выглядят традиционно и профессионально. 

#265077 — #022140 — #494B68 — #1E4258 — #2D5F5D

47. Apart

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

#806543 — #33266E — #111111 — #542F34 — #A6607C

48. FUTURAMO

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

#501F3A — #CB2D6F — #CCCCCC — #14A098 — #0F292F

49. Panic

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

#C34271 — #F070A1 — #16FFBD — #12C998 — #439F76

50. madeo

Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.

#026670 — #9FEDD7 — #FEF9C7 — #FCE181 — #EDEAE5

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

Подбор цветов и генерация цветовых схем

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

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

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

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

Модель цветовой тетрады (двойной контраст). Эта цветовая схема образована парой цветов и их контрастов. Она основана на Тетраде — четверке цветов, равномерно распределенных по цветовому кругу (90°). Тетрада — очень агрессивная цветовая схема, требующая хорошего планирования и деликатный подход к отношениям этих цветов.

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

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

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

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

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

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

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

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

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

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.

URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.

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

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

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

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

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

Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.

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

Сервисы подбора цвета для веб-дизайна

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

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

Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь .

Сервисы подбора цвета для веб-дизайна

colorscheme.ru

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

color.adobe.com

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

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

paletton.com

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

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

Следующие два сайта генерируют палитру из выбранного вами изображения.  It is magic 🙂

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

Color Palette Generator

На этом сайте необходимо указать ссылку на изображение.

palettegenerator.com

На этот сайт нужно загрузить картинку со своего компьютера.

palettable.io

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

flatcolors.net

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

materialpalette.com

Еще один модный тренд —  материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

getuicolors.com

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

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

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

Нужен сайт с правильными цветами? Пишите, сделаем 🙂

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Цвета для сайта | Подбор цвета сайта

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

Цветовые предпочтения среди мужчин и женщин

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

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

Маркетинговый подход к выбору цвета для сайта

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

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

Цветовые ассоциации

Безопасные цвета для сайта

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

Для удобства выбора цветов сайта, разрабатывая бриф (см. страницу брифа на картинке слева), специалисты студии RBS-Webmarket учли рекомендации лидеров рынка и собственные наработки в этой области.

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

В брифе, над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).

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

Какие 3 самых популярных цвета для оформления сайтов?

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

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

Цвет очень важен

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

В интернет-маркетинге ситуация не менее серьезна — цвет существенно влияет на показатели продаж. 42% покупателей формируют мнение о веб-сайте на основе его дизайна, в том числе и благодаря цветовой гамме. Более того, 52% покупателей не посетят лендинг или сайт снова, если им не понравилось его оформление.

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

1. Голубой символизирует безопасность

Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Но что подразумевается под словом «безопасность» в данном контексте?

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

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

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

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

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

Twitter не отстает.

И, да, даже LinkedIn любит синий цвет.

Wal-Mart — крупнейшая в мире розничная сеть — пошла той же дорогой.

Многие банки используют этот подход. Основной цвет Citibank — синий с ярко-красной дугой.

Bank of America использует красный, но основной цветовой акцент в их логотипе — на синем цвете.

У Chase Bank светло-синий сайт и логотип.

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

USAA, Американская ассоциация автосервисов — основной дистрибьютор страховых полисов. На их сайте преобладает синий цвет.

New York Life, один из лидеров по страхованию жизни, использует хорошо известный синий квадратный логотип.

Среди российских брендов можно выделить Yota:

И, конечно же, социальная сеть ВКонтакте:

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

Карен Галлер (Karen Haller), специалист в области прикладной психологии цвета, пишет о синем следующее:

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

2. Зеленый символизирует рост

Основной посыл зеленого — рост. Причины ассоциации очевидны: большинство растений — зеленые.

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

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

Зеленый используется в оформлении крупнейшего IT блога Techcrunch.

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

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

Российский пример напрашивается сам собой. Разумеется, это Сбербанк:

3. Будьте осторожны с оранжевым

Оранжевый — один из тех цветов, которых стоит опасаться. Как утверждают психологи, он наиболее тесно связан с риском. Но почему? Прислушайтесь к инстинктам. Когда вы видите надпись оранжевого цвета, что-то внутри говорит: «Стой! Здесь может быть опасно!»

Охотники носят оранжевые жилеты, чтобы их не подстрелили по ошибке. Строители в опасных ситуациях тоже надевают оранжевые жилеты или каски.

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

Home Depot апеллирует к духу авантюризма у покупателей товаров категории DIY («Сделай сам»). Цвет их логотипа красноречиво отражает эту философию.

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

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

Обозреватель Washington Post Джефф Туринтайн (Jeff Turrentine) предпринял мучительную попытку реабилитировать оранжевый цвет. Он отметил, что «нет ничего сомнительного в ярко-оранжевом», но признал, что иногда тот вызывает «вульгарные ассоциации».

Независимо от вашего намерения, будьте осторожны с этим цветом.

У HootSuite в логотипе присутствует оранжевый.

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

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

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

Вывод

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

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

Голубой внушает чувство спокойной уверенности, при этом он наиболее легкий для восприятия. Менее 1% пользователей считают этот цвет раздражающим. Поэтому большинство успешных социальных сетей оформлены в оттенках синего и голубого — люди проводят многие часы своей жизни, читая ленты новостей ВК или Facebook, постоянно проверяют Twitter и т. д. А чтобы человек мог провести в социальной сети действительно долгое время, ее оформление должно минимально отвлекать и не раздражать посетителя.

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

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

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

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

Высоких вам конверсий!

По материалам: blog.crazyegg.com, image source splitshire 

16-12-2014

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 глубоких фиолетовых и блюзовых оттенков

Самсы

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

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 Живых, но успокаивающих

Мадео

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот как:

1. Обеспечение узнаваемости бренда

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но это не всегда легко перевести, когда вы смотрите на тысячи потенциальных цветовых комбинаций. Давайте посмотрим на 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 позволяет выбрать до пяти оттенков из палитры на всю страницу, что дает вам возможность четко видеть цвета. Затем сайт отображает все изображения в своей базе данных с этой цветовой комбинацией. Он четко показывает вам шестнадцатеричные числа и позволяет вам нажимать на отдельные шестнадцатеричные числа. Вы можете сохранять изображения в коллекции на сайте, а также скачивать их.

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Последние сообщения Дэвида Чжэна (посмотреть все)

Лучшие примеры цветовой схемы веб-сайтов

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

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

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

Что такое цветовая схема веб-сайта?

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

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

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

Эстетика

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

Восприятие бренда

Знаете ли вы, что цвет связан с психологией? Разные цветовые схемы вызывают разные чувства: например, красный — уверенный, желтый — забавный, а синий — надежный. Согласно Buffer, более 90% нашей оценки продукта основывается только на цвете, и это касается и вашего веб-сайта. Это означает, что вы можете задать тон своему сайту, выбрав цветовую схему, которая отражает то, как вы хотите, чтобы ваши посетители чувствовали себя.

Преобразование

Цветовая палитра вашего веб-сайта также может определить, действительно ли посетители вашего веб-сайта покупают у вас. Фактически, цвет настолько силен, что одно недавнее тематическое исследование показало, что выбор правильных цветов может увеличить конверсию до 24%! Например, многие люди считают, что красная кнопка CTA на странице продаж приносит больше продаж, чем синяя или фиолетовая. Точно так же реклама с зеленым баннером будет давать другие результаты, чем та же реклама с желтым или красным фоном.

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

Via G Hacks

Когда вы думаете о платформе социальных сетей Facebook, скорее всего, на ум приходит один цвет: синий! Оказывается, на самом деле это так по интересной причине: основатель Марк Цукерберг не различает красно-зеленый цвет. «Синий для меня самый богатый цвет; Я вижу весь синий цвет », — сказал он однажды.

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

eBay

Через eBay

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

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

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

Цветовая схема веб-сайта №1: Веселая и профессиональная

Mark Dearman

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

Цветовая схема веб-сайта № 2: Неоновые тона и резкий контраст

Play.agency

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

Цветовая схема веб-сайта № 3: Теплый и жирный

Lush Digital

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

Цветовая схема веб-сайта # 4: Чистая и выделенная

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

Цветовая схема веб-сайта # 5: Теплые тона

Studio Recode

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

Цветовая схема веб-сайта # 6: Четкий и современный

Frost Festival

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

Цветовая схема веб-сайта № 7: Смелая и яркая

Magoz

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

Цветовая схема веб-сайта № 8: Вдохновение истории искусства

Fabrique

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

Цветовая схема веб-сайта № 9: Оттенки и тона

Ромен Бушеро и Винсент Фреман

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

Цветовая схема веб-сайта # 10: Всплеск цвета

Magnium Themes

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

Эта цветовая схема более тонко включена в шаблон Waffle Blog Banner. Оцените это в Canva уже сегодня!

Цветовая схема веб-сайта № 11: Элегантная и утонченная

Julian Damy

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

Цветовая схема веб-сайта № 12: Летнее вдохновение

StrADegy Advertising

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

Цветовая схема веб-сайта № 13: Профессиональная и современная

Avondale Type Co.

Ищете палитру, которая выглядит профессионально, но не скучна и не устарела? Вдохновляйтесь этим дизайном Avondale Type Co. Сочетание серых, глубоких и ярких желтых тонов в сочетании с четким, плоским современным дизайном создает авторитетный, но свежий дизайн.

Цветовая схема веб-сайта # 14: Яркие черные и яркие акценты

Cantina dei Colli Ripani

Если вы ищете более яркий, современный дизайн, попробуйте объединить смелые черные и белые пятна с некоторыми яркими всплески цвета, как в этом примере для Cantina dei Colli Ripani.Контраст между выделенными цветами и черным создает эффектный, смелый и забавный эффект.

Цветовая схема веб-сайта № 15: Чистые градиенты и свежий синий цвет

SHIBUI

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

Цветовая схема веб-сайта # 16: Веселая и элегантная

Huemor

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

Цветовая схема веб-сайта № 17: Современная и чистая

Benedict Leicht

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

Цветовая схема веб-сайта № 18: Роскошный и современный

Zach Klein

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

Цветовая схема веб-сайта №19: Симпатичные пастели

B / C Designers

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

Цветовая схема веб-сайта № 20: Уникальная и яркая

Great Works Copenhagen

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

Цветовая схема веб-сайта # 21: Неожиданные сочетания цветов

Intesys S.r.l.

Фиолетовый и зеленый — это не два цвета, которые часто смешивают, но этот сайт Intesys S.r.l. доказывает, что, возможно, они должны быть! Насыщенный фиолетовый цвет разительно контрастирует с ярким лаймовым и резким белым цветом, создавая уникальный и запоминающийся дизайн сайта.

Цветовая схема веб-сайта # 22: В стиле ретро

Lowdi

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

Цветовая схема веб-сайта № 23: Античный и чистый

Pier-Luc

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

Цветовая схема веб-сайта № 24: Ярко и энергично

Hyperakt

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

Цветовая схема веб-сайта № 25: Свежая и яркая

Baesman

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

Цветовая схема веб-сайта № 26: Чистая и четкая

BrightMedia

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

Цветовая схема веб-сайта № 27: Красочная без колличества

Ярмо

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

Цветовая схема веб-сайта № 28: Приглушенная и минималистичная

Инга Гудоньен / MIOS

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

Цветовая схема веб-сайта № 29: Прохладный и спокойный

Roll Studio

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

Цветовая схема веб-сайта №30: Современная и приглушенная

Расслабьтесь, мы хорошие ребята

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

Цветовая схема веб-сайта № 31: Землистый и свежий

AQuest

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

Цветовая схема веб-сайта # 32: Высокая насыщенность и высокая энергия

El Burro

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

Цветовая схема веб-сайта # 33: Теплая и прекрасная

Fieldwork

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

Цветовая схема веб-сайта # 34: Винтажный шарм

Cafe Frida

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

Цветовая схема веб-сайта # 35: Холодные тона драгоценных камней

GrowCreate

На этом веб-сайте Business Benchmark on Farm Animal Welfare от GrowCreate используются красивые фиолетовые и синие оттенки драгоценных камней с тонкими градиентами для создания простой, но привлекательной цветовой палитры.Случайные всплески ярко-розового цвета делают дизайн привлекательным, свежим и привлекательным.

Цветовая палитра веб-сайта # 36: Яркие оттенки

Cinco Design

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

Цветовая схема веб-сайта № 37: Холодное против теплого

Cinco Design

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

Цветовая схема веб-сайта # 38: Чистый и коллегиальный

details.ch

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

Цветовая схема веб-сайта # 39: Простая и свежая

MadeByShape

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

Цветовая схема веб-сайта # 40: Тропические тона

Thomas Schrijer

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

Цветовая схема веб-сайта # 41: Полужирные основные цвета

Joy Intermedia

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

Цветовая схема веб-сайта # 42: Античные тона

Leibowitz Branding & Design

Веб-сайт Athena Art Finance, созданный Leibowitz Branding & Design, использует красивые старинные тона для создания элегантного и утонченного дизайна с большим шармом. Черпая вдохновение в истории искусства и используя темно-фиолетовый, синий, зеленый и теплый золотой, вы можете превратить любую веб-страницу в изысканное потрясающее зрелище.

Цветовая схема веб-сайта # 43: Неоновый и жирный

Calvi on the Rocks

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

Цветовая схема веб-сайта # 44: Приглушенные тона

The Martin Agency

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

Цветовая палитра веб-сайта # 45: Простая, но смелая

Mambo Mambo

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

Цветовая схема веб-сайта # 46: Корпоративный и элегантный

Райан Боркер, Джермейн Крейг, Майк Парсонс и Кайл Миллер

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

Цветовая схема веб-сайта # 47: Современная и минималистичная

Huemor

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

Цветовая схема веб-сайта # 48: Веселая и веселая

Marie Catribs

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

Цветовая схема веб-сайта # 49: Солнечно и спокойно

TRAFFIC

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

Цветовая схема веб-сайта # 50: Поп-арт

Visualsoft

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

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

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

Воспользуйтесь цветовым кругом

Вам не нужно изобретать колесо, когда вы выбираете цвета для своего бренда — просто воспользуйтесь нашим! Цветовой круг Canva — это удобный инструмент, используемый в теории цвета, чтобы определить, какие оттенки смотрятся вместе. Есть два типа цветовых кругов — RYB и RGB. Первый — это красный, желтый, синий цветовой круг, который обычно используется художниками для комбинирования цветов краски. Затем есть красный, зеленый и синий цветовой круг, который используют графические дизайнеры, поскольку он включает смешивание света для использования в Интернете.

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

Рассмотрим демографию

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

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

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

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

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

Создаете что-нибудь для более молодой аудитории? Шаблон веб-сайта Canva для малого бизнеса Pink and Blue Pet Care отличается забавной и свежей эстетикой, которую можно легко перенастроить для вашего собственного бренда.

Создание цветовой палитры

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

Веб-сайт Фаррелла Уильяма красочный и динамичный

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

Как использовать цветовую палитру из фирменного набора

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

Активы ThisThatApp от Хелены. Изображение через Dribbble.

В большинстве наборов брендов есть раздел, посвященный вашей цветовой палитре, где вы определяете цвета своего бренда и соответствующие коды. Они могут включать коды Pantone (специальные цвета) и CMYK (стандартные цвета печати), но для веб-дизайна вам в основном нужны коды RGB и HEX (шестнадцатеричные). В зависимости от эстетики вашего бренда вы также можете использовать разные оттенки и оттенки одного и того же цвета.

Благодаря тому, что ваша цветовая палитра будет легко доступна в вашем фирменном наборе, вы гарантированно получите точное соответствие цветов каждый раз, когда вы создаете somedeskg new для своего бренда. Функция Brand Kit в Canva Pro позволяет вам установить цвет и коды вашего бренда для облегчения доступа при разработке дизайна в приложении.

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

7 удивительных цветовых схем веб-сайта 2021 + Color Mood Board

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

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

Ниже мы расскажем, почему цветовые схемы имеют значение, и дадим вам 58 цветовых схем веб-сайта на 2020-2021 годы!

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

38 процентов посетителей перестанут взаимодействовать с веб-сайтом, если его содержание или макет непривлекательны. (Blue Corona)
Если дать 15 минут на просмотр контента, две трети людей предпочтут прочитать что-то красиво оформленное, чем что-то простое. (Источник: Adobe)

8 новых цветовых схем на 2021 год

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

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

1. Инфракрасный и фиолетовый

Ярко-красный: # DE354C

Deep Red: #

2

Чистый пурпурный: # 3C1874

Пурпурный серый : # 283747

Облако: # F3F3F3

2. Земляной красный и зеленый

Выделение красным цветом 9252 : # 004E7C

Maroon 6: # 591COB

Gray Water: # 5C5F58

Светло-серый: # DCE1E3

3.Цветовая схема веб-сайта Tan + Green 2021 от Gatto Web

Makeup Tan: # DDAF94

Румяна: # E8CEBF

Бесплатный зеленый: # 266150

22 9482 9482 9482 Слегка не совсем белый: # FDF8F5

4. Классическая двойная синяя цветовая схема

Темно-синий: # 12232E

Светло-синий: # 007CC7

223DA

23DA DA9 Тень темно-синего: # 203647

Тень светло-синего: #EEFBFB

5.Оттенки серого + один (желтый) 2021 Цветовая схема веб-сайта

Черноватый: # 202020

Темно-серый: # 3F3F3F

Средний серый: # 707070

2 Fgg3 C 9142F Yellow Белый: #FFFFFF

6. Цветовая схема веб-сайта Greenery + Gradients 2021 от Анны Сеньковой

Темно-зеленый: # 164A41

Средне-зеленый: # 4D774E 3 # 9DC88D

Естественный желтый: # F1B24A

Белый: #FFFFFF

7.Цветовая схема веб-сайта Greenery + Pearl 2021 от Delightful Designs

Olive: # A3BCB6

Green Leaf: # 39603D

Brown Grey: # 3C403D

# Tanly : #FFFFFF

Color Mood Board на 2021 год

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

Вот оригинальный пост! Цветовые схемы веб-сайта 2020-2021

Веб-дизайн может быть забавным!

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

Вот почему мы собрали самые лучшие из лучших 50 эпических цветовых схем из далеких уголков Dribbble, Awwwards, Pinterest, Behance и пары отличных блогов.

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

Обновление лета 2020 — 13 новых цветовых схем веб-сайта на 2020 год

1. Минимальные цвета, мягкий пляж от Думинды Перера

Ярко-синий: # 51e2f5

Синий зеленый: # 9df9ef

Пыльный белый : # edf756

Pink Sand: # ffa8B6

Dark Sand: # a28089

2.Минимальные цвета — пурпурная цветовая схема 90-х годов Думинда Перера

Ice Cold: # a0d2eb

Freeze Purple: # e5eaf5

Medium Purple: # d0bdf4

23

Heavy Purple: # a28089

3. Bright Power от Думинды Перера

Yass Queen: # ff1d58

Sister Sister: # f75990

22 Crown # Blue 96821422 96821422 Crown Light 9682142 : # 00DDFF

Брутальный синий: # 0049B7

4.Переосмыслить. Цветовая схема от Sajon

Ярко-оранжевый: # ff1e00

Тускло-синий: # e8f9fd

Предупреждение / выделение зеленого цвета: # 59ce8f

Веб-сайт Charity 5.

Ярко-оранжевый Номер 2: # f43a09

Дедушка Оранжевый: # ffb766

Серый Синий Зеленый: # c2edda

Живой Зеленый: # 68d388

6.Цветовые схемы веб-сайта «Банки и финансы» от Джулиены Ренвой

Pinky: # fbe3e8

Blue Greeny: # 5cbdb9

Teeny Greeny: # ebf6f5

синий и синий цветовая схема

Ярко-зеленый: # beef00

Electric Red: # ff0028

Deep Green: # 657a00

Power Blue: # 1400c6

8.Белое пространство, загар, пурпурный, желтый цвет схема сайта

Фоновый загар: # fceed1

Purple-y: # 7d3cff

Желтые перчатки: # f2d53c

# Redhead: 000 c80e

9. Deep blue and tan — цветовая палитра

Sand Tan: # e1b382

Sand Tan Shadow: # c89666

Night Blue: # 2d545e

Night Blue Shadow 121423 # #

10.Цветовая гамма: желто-коричневый, розовый и красный

Ragin Beige: # fff5d7

Кораллово-розовый: # ff5e6c

Sleuthe Yellow: # feb300

Pink Leaf358143 Pink Leaf35814 , Зеленая и Фиолетовая цветовая схема веб-дизайна иллюстраций

Grassy Green: # 9bc400

Purple Mountains Majesty: # 8076a3

Misty Mountain Pink: # f9c5bd

Factory Purple # 7c677f

12.Яркая и красочная — схема для 2020 года

Green Treeline: # 478559

Фиолетовая базовая линия: # 161748

Розовое выделение: # f95d9b

Bluewater lowlight: 000 Yellow , Красный / Розовый / Оранжевый — Яркая схема

Желтый фон: # ffde22

Розовый / Красный круг: # ff414e

Оранжевый круг: # ff8928

White Layffover:

03 #

Цветовые схемы веб-сайта 2019:

1.В стиле 70-х — современная цветовая палитра

Mountain Shadow Blue: # 101357

Old Makeup Pink: # fea49f

Goldenrod Yellow: # fbaf08

Bluebell

a

a Bold 2019 Green: # 007f4f

2. Lightning Blue Purple — простая цветовая палитра Web

Lightning Blue: # 51d0de

Lightning Purple: # bf4aa8

9143 9142d 9000d #

3.Синий металлик, пурпурный, красный — Цветовая палитра веб-сайта

Blue Popsicle: # 0f2862

Redline: # 9e363a

Purple Shadow: # 091f36

1476 Gray Blue Leaf: 4. Apricot Avalanche — Цветовые схемы веб-дизайна

Blueberry: # 6B7A8F

Apricot: # F7882F

Citrus: # F7C331

2 # Apple Core:Сильный контраст и надежность

Левый синий: # 1561ad

Правый синий — приглушенный: # 1c77ac

Сине-зеленый: # 1dbab4

Красно-оранжевый:

5000 # fc3 Классическая палитра цветов веб-сайта «Красное золото»

Краснее, чем вы: # ff3a22

Goldi-lot: # c7af6b

Темнее золото: # a4893d

Silver Tongue: Утонченная и сочная цветовая схема Web

Barely Green: # acb7ae

Коричневые рубашки: # 82716e

Светло-коричневый: # e4decd

00 Photographic Память

Зеленая гора: # 3d7c47

Голубая гора: # 09868b

Голубой фон: # 76c1d4

Едва серый край: # f7f73587 9.Футуристический Lightbrite

Серо-серебристый: #bccbde

Lightsaber Blue: # c2dde6

Фиолетовый: # 431c5d

Оранжевый: # ebr3000 # ebr3159222 # ebr3000 8 Trapper Keeper Red & Purple

Painful Red: # eb1736

35 Years Old Purple: # 5252d4

Светло-фиолетовый на градиенте: # 7575dd

Shadow Purple Red1a

11.Бутерброд с пасхальным яйцом

Зеленый: # 8bf0ba

Иронический блюз: # 0e0fed

Синий подчиненный: # 94f0f1

Pinky Ring: 8 # f20003000 Yellow

Ищете опытную команду веб-дизайнеров? Ниши веб-дизайна, которые мы обслуживаем: Сантехника, HVAC, Строительство и Кровля. От HVAC ведет к строительному подрядчику — мы делимся всеми идеями в нашем блоге!

Оригинальный набор цветовых схем сайта:

1.Интеллектуальная небрежность

Голубой зеленый: # 6ed3cf

Мягкий фиолетовый: # 9068be

Вкусный серый восьмидесятилетний: # e1e8f0

Насыщенный красный цвет: # Ярко-красный: от Awwwards

2. Extra Snug

French Laundry Blue: # 3a4660

Comfortably Tan: # c9af98

Peachy Kreme: # ed8a63

Найдено: на рубашке Desi от Филиппа Дуеску на Behance

3.Dark Horse

Я желтая?!: # feda6a

Silver Fox: # d4d4dc

Deep Matte Grey: # 393f4d

Dark Slate: 23 # 1d Концепция Creativa Studio на Dribbble

4. Сонно-зеленые полосы

Simpler Lime Green: # 7dce94

потертый темно-серый: # 3d3d3f

0 Vanilla Grey:

003 # f : # f9f8fd

Найдено на веб-сайте Книги джунглей Watson D / G для Disney

5.Драгоценные металлы

Розовое золото: # bd8c7d

Мягкое золото: # d1bfa7

Серебро: # 8e8e90

Onyx: 3 # 494

Design 9000 от Socio: . European Bodies

Yellow Hand: # fbf579

Lonely Blue: # 005995

Стационарный розовый красный: # fa625f

Purpledration: # 600472 Сайт найден на сайте Mind Sparkile 9. Маг

7.Простые бриллиантовые акценты

Красный наложенный: # cd5554

Коричневый на снимке: #

a

Зеленые водоросли: # 00c07f

Heritage Blue, найденный на сайте Mind 3: . Mag

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

Часть вторая — Наблюдения за взаимодействием и цветом в контексте

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

8. Синий красный

Deep Red: # b11a21 — в наложении, наложенном на плоский синий, фотографический фон придает глубину.

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

Blue Beans: # 7acfd6 — плоский синий цвет создает контраст с фотографией за красным.

Light Classy Grey: # f1f0ee — Простой светло-серый цвет используется для обеспечения глубины позади более поздней части фотографии, а белый — внизу.

Найдено на веб-сайте Вдохновение от Mind Sparkle Mag

9. Солнечное и спокойное

Утреннее небо: # CAE4DB — Никогда не недооценивайте цветовую палитру, созданную с помощью фотографии, чтобы задать тон вашему дизайну.

Honey: # DCAE1D — в этом случае палитра устанавливается вместе с фотографией, а затем отображается в субтитрах.

Cerulean: # 00303F — Cerulean невероятно классный как черная или темно-серая альтернатива, если использовать ее постоянно.

Mist: # 7A9D96 — Этот чистый, естественный цвет хорошо виден на фотографии, но его также можно использовать на нижнем полноразмерном блоке или кнопках.

Найдено на Canva Цветовые схемы на вдохновляющем веб-сайте

9. Темно-оранжевый

Темно-серый: # 3

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

Deep Orange: # FF5A09 — с разными оттенками апельсина, есть глубина и градиент, не отваживаясь на совершенно новые цвета.

Светло-оранжевый: # ec7f37 — Использование иллюстративных элементов требует некоторой гибкости для естественной легкости и темноты для контуров объектов.

Оранжевый желтый: # be4f0c — Использование цвета поверх цветового круга может сделать палитру стильной, жирной и сдержанной.

Обнаруживается на больших цветовых схемах одним дополнительным пикселем

10.Писклявый

Свежий: # 4ABDAC — И снова цвет, наложенный на фотографические элементы, придает стильный современный вид

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

Sunshine: # F7B733 — Желтый обеспечивает только совмещенный призыв к действию и выделяет важные части

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

Найдено на Canva Цветовые схемы на вдохновляющем веб-сайте

11. Базовый сине-зеленый

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

Зеленый цвет акцента: # 7ebc59 — Корпоративный синий + Экологичный зеленый = Каждый веб-сайт когда-либо.Но не забывайте об использовании общих цветовых схем только потому, что они общие. Совместно используйте знакомые цвета, когда это служит вашей цели — вы чувствуете, что вам доверяют.

Dark Slate: # 33363b — Разделение пустого пространства более темным верхним, нижним колонтитулом или полноразмерными разделами помогает избавиться от слишком повторяющихся вещей.

Светло-серый: #eaeaea — Это действительно одна из наиболее распространенных цветовых схем на веб-сайте, особенно для технологических компаний.Тебе это еще надоело? Мне это нравится.

Найдено на потрясающих бесплатных темах WordPress от ColorLib

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

Часть третья — Об отсутствии цвета и хорошо выполненных монохроматических цветовых схемах

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

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

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

12. Яркий контраст

Slate: # 262626 — Повторяйте за мной, все оттенки серого не равны

Серый подержанный: # 3f3f3f

Белизна: # f5f5f5 — Повторите белые после всех не равны

Светло-серый: #dcdcdc

Найдено на One Page Love, создано Питером Тотом

13.Настоящее черно-белое изображение + фотография

Черный: # 000000

Белый: #ffffff

Найдено на веб-дизайне Ledger — 20 красивых портфолио, работа Майкла Шмида

14. Goldifox

Золотая пшеница: # a39274

Мягкая пшеница : # dfd8c8

Глубокий серый: # 252523

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

15. Мятный обновленный

Монетный двор: # 4cb69f

Touch of Gray: # f5f5f5

Deep Purple: # 201d3a — Не совсем черно-белый + 1 — намек на фиолетовый в углу фотография

Найдена в Dapper Ink Джоэлом Ридом на сайте Dribbble

16. Синий + белый

Синий Оптимизм: # 269ccc

Голубые водоросли: # 9ed2c5

70003 70002 Flat Grey Найдено на fltdsgn.com

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

16. Экспериментальная простая фотография — квадратное разделение

Найдено на InspirationDE, Сэм Тис

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

Найдено на flatdsgn.com Роландом и «We Ain’t Plastic»

18. Прямоугольник вокруг букв, креативная блокировка букв

Найдено на Behance, Diana Polar

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

Часть четвертая — О взаимодействии типографики и цвета

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

19. Угольно-черный, золотой и множество белых пятен

Золотой верх: # d8ab4e

Золотой нижний: # b48c36

Угольно-черный: # 040404

19B. Сочетания шрифтов для дополнения выбора цвета — Gin Rough и Amiri

Gin Rough — от Fort Foundry, доступно на MyFonts — Взяв высококачественный золотой градиент и соединив его с очень намеренными типографскими элементами, дизайнеры этого сайт противопоставил грубоватому и элегантному.

Amiri Rough — Доступно через Google Fonts — Великолепно выглядит как отзыв или цитата.

Найдено на веб-дизайне Вдохновение для джентльменских парикмахерских клубов (вам необходимо просмотреть весь сайт)

20. Чистый красный хаки

Красный хлопок: # c53211

Чистый глубокий серый: # 2e3830

Хаки: # e6dbc9

20B. Пары шрифтов, дополняющие выбор цвета — Futura Bold и Museo Slab

Futura Bold — столь же классичны, сколь и просты.Общие похожие шрифты, такие как Gotham Black, Montserrat или Proxima Nova, могут дать вам похожий, но другой вкус. Тем не менее, Futura Bold будет полезен во многих ситуациях — и хорошо сочетается с этой простой красно-серой и коричневой цветовой схемой в качестве заглавных букв.

Museo Slab — Как и вес 100 в цитате выше, так и текст абзаца (font-weight: 400), Museo Slab обеспечивает удобочитаемость, будь то большой или маленький. Futura, Museo Slab поверх этих удобных простых цветов кажутся не обязательно классическими, но современными и оригинальными.Сдержанность как в выборе цвета, так и в типографике приводит к очень сплоченному ощущению, которое оставляет весь веб-сайт интегрированным и фирменным.

21. Модные пастельные тона

Пастельный персик: # dea6af

Небесно-голубой: # 8cbcd0

c # 83523c

c #

Подбор шрифтов в дополнение к выбору цвета — Калибр — Кетчуп европейского дизайна

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

Дизайн, представленный на CSS Design Awards — Купите шрифт Caliber

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

Несколько слов ободрения

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

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

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

[bctt tweet = »« Величайшие дизайнеры тоже гадали и пробовали что-то новое ».]

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

Часть пятая — Что такое современная цветовая палитра?

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

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

22. Элегантная современная цветовая палитра

Темно-синий / фиолетовый: # 111c30

Темно-розовый макияж: # 9a4d55

Комфортный бежевый диван: # 80756b 9000 Subdued

Цветовая палитра:

Tiny Sweet Blue: # b5e9e9

Creamy Light Tan: # fef6dd

Pinkie Pie: # ffe1d0

Yellow Horse3 Green Horse3 # f dcf3d0

24.Свежая современная цветовая палитра

Deep Purple: # 1d1145

Trapper Keeper Green: # 0db4b9

Pink Boot: # f2a1a1

Anonymous Pink # 07635814 Палитра землистых современных цветов

Красные ветви: # de493c

Зеленые деревья: # 608074

Синий / зеленый туман: # daefd9

26. Ржавая современная цветовая палитра

Ржавый красный: # c1432e

Серебряный головной убор: # 4b6777

Ржавое золото: # ce9e62

Черный для контраста: # 2c2c2c

5 лучших генераторов цветовых схем, которые вы запустили

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

Плоские цвета пользовательского интерфейса

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

Color Supply

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

Кулеры

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

Генератор палитры

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

Paletton

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

62 процента опрошенных предприятий заявили, что, по их мнению, веб-сайт следует обновлять каждые 2-3 года! Источник: Hook Agency

Часто задаваемые вопросы о цветовых схемах веб-сайта

Какой цвет лучше всего подходит для веб-сайта?

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

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

Учтите, что 51% брендов выбирают монохромные логотипы, 39% используют двухцветные логотипы и только 19% компаний выбирают полноцветные логотипы.Помимо фотографий, веб-сайты с 1, 2 и 3 цветами, кажется, легче сделать хорошо, чем пытаться создать веб-сайт с радугой цветов. При этом, если у вас есть профессиональный дизайнер, очевидно, что Microsoft и Google считают, что есть преимущество работы с большим количеством цветов, поскольку они оба используют как минимум 4 сплошных цвета в своем дизайне.

Почему я могу рассмотреть вопрос о найме профессионального дизайнера веб-сайтов?

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

Вы открыли секретный выход во внутренние механизмы Интернета! 😉

Мы знаем, как делать удивительные вещи, такие как это очень интересное дополнение FAQ к нашему списку здесь, в Google. Мы знаем, как использовать ваш веб-сайт в Google с помощью практики, называемой «поисковой оптимизацией». Итак, помимо цветовых схем веб-сайта, мы знаем, как УПРАВЛЯТЬ БИЗНЕСОМ от трафика Google.Если вы хотите работать с командой профессиональных веб-дизайнеров, отправьте нам сообщение по адресу [email protected]!
Еще одна тактика, которую мы используем для оптимизации рейтинга, — это так называемое создание взаимных ссылок. Так что, если вы когда-нибудь задумывались, кто самый сексуальный мужчина в Миннесоте, или хотели прочитать руководство по SEO для сантехников, прочтите его!

Социальные сети для подрядчиков Курс + ежедневные подсказки

Мы потратили 3 месяца, собирая это только для подрядчиков — и это совершенно бесплатно!

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

🎥 10 оригинальных видео

📝 6 недель ежедневных подсказок в социальных сетях

Есть ли вы или кто-то из вашей команды, кто хотел бы это сделать? Введите их (или свои) данные ниже!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Красные конвейеры:

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

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

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

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

Зеленые конвейеры:

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

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

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

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

Черный: уверенность, изысканность

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

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

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

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

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

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

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

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

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

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

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

62–90% первоначального впечатления потребителей основывается только на выборе цвета … а это означает, что поиск правильной цветовой схемы для вашего сайта — это не просто эстетическое, а деловое решение. 🎨✨Нажмите, чтобы написать твит

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

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 — это линия закусок из сублимированных фруктов, ориентированная на потребителей, более приверженных моде, чем сухофрукты без марочного производства, продаваемые оптом.

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

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

Хотите узнать, как мы увеличили трафик более чем на 1000%?

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

Подпишитесь сейчас

9.Джинсовая ткань индивидуального кроя: It’s Alive

Без вращения

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

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

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

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! Ознакомьтесь с нашими тарифами

50 цветовых схем веб-сайта для вашего вдохновения

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

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

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

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

01. Смелая и дерзкая

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

02. Шикарный и элегантный

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

03. Осенний бриз

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

04. Чистый и минималистичный

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

05. Candy delight

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

06. Dreamy skies

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

07. Изящный и аккуратный

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

08. Естественный и нежный

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

09. Флуоресцентный зеленый

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

10. Городское и промышленное строительство

Выбор цветовой схемы для веб-сайта фотографии может оказаться сложной задачей. В этом портфолио, посвященном фотографии и архитектуре, Béton Brut от Kimberley Jane Harris, домашняя страница представляет собой полноэкранную фотографию бетонного здания. Тусклые промышленные оттенки коричневого меняются от темного к светлому, образуя интересные композиции, несмотря на монохроматичность изображения.Белый шрифт меню виден, не отвлекая внимание от фотографии.

11. Поп-ретро

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

12. Футуристические градиенты

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

13. Яркий и энергичный

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

14. Землистый и минималистичный

Керамическая студия Noni São Paulo использует цветовую палитру, которая идеально отражает их бренд и продукцию. Теплые оттенки коричневого и другие землистые тона заставят вас захотеть сидеть за чашкой горячего чая в красиво оформленной кружке.Белый фон уравновешивает естественные оттенки, чтобы сайт выглядел профессионально и качественно.

15. Техническая изысканность

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

16. Золотые лучи

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

17. Пурпурный с оттенками серого

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

18. Кобальтовый синий

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

19. Радужная пастель

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

20. Успокаивающий и естественный

В этом блоге о стиле жизни, Styling by Why Dee, есть идеальные для Pinterest фотографии и подходящая цветовая схема. Нейтральные оттенки в сочетании с текстурой дерева и мрамора создают поистине успокаивающую цветовую палитру. Минимальное использование черного делает атмосферу легкой и воздушной, а несколько более ярких цветов, разбросанных вокруг, добавляют приятный штрих.

21. Теплый с холодными оттенками

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

22. Мягкие осенние оттенки

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

23. Глубокий и мистический

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

24. Крутой и освежающий

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

25. Изысканный и яркий

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

26. Классический двухцветный комбо

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

27. Посыпать вечеринку

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

28. Легкий и профессиональный

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

29. Смелая и радостная

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

30. Эффектный черный фон

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

31. Приглушенная винтажная тема

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

32. Простой и монохромный

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

33. Резкий контраст

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

34. Сюрреалистичный и металлический

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

35. Яркие акцентные цвета

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

36. Игривый, но изысканный

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

37. Черничный молочный коктейль

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

38. Поразительно высокая контрастность

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

39. Пастельные тона

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

40. Темный и жуткий

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

41. Аппетитные оттенки

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

42. Мощный и смелый

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

43. Яркий и веселый

Смелый выбор оранжевого цвета на веб-сайте Dogs on the Streets сразу вызывает положительные эмоции, особенно в сочетании с белым. В дополнение к этому очень живому оранжевому, они выбрали вторичный цвет — темно-серый, в отличие от черного, чтобы тон оставался дружелюбным и доступным.

44. Простота космического пространства

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

45. Bubblegum Shades

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

46. Нейтральный и элегантный

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

47. Основные цвета с изюминкой

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

48. Уникальные комбинации

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

49. Контрастный акцентный цвет

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

50. Оттенки серого с оттенками цвета

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

Авторы Wix Team

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

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

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

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

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

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

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

1. Beauregard

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

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

2. Фонд Squilla

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

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

3. Либенар

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

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

4.Mont Roucous

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

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

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

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

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

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

6. Сахель

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

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

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

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

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

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

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

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

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

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

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

Вдохновляющий веб-сайт Цветовые схемы красочные пастельные тона веб-сайт

10. Лобстер

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

• ЯРКИЯ
• СИНИЙ ПОРОШОК
• ЗЕЛЕНО-СИНИЙ
• БЕЛЫЙ
• РОЗОВЫЙ ФАНДАНГО

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

II. Пастельные и землистые цветовые схемы веб-сайта: навеяны природой

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

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

11. Лечение ногтей

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

• ПЛАТИНОВЫЙ
• ЧЕРЕПАХА ЗЕЛЕНЫЙ
• СЕРЫЙ-СИНИЙ
• ТАН
• КОКОС

12. Горный человек

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

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

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

13.Андрис Горакс

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

• ТЮФТЫ СИНИЙ
• ФРАНЦУЗСКИЙ НЕБО-СИНИЙ
• АЛИСА СИНИЙ
• БЕЛЫЙ
• МЕДЬ

14. Зеленый органический голландец

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

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

15. 10 × 18

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

• БЕЛЫЙ ДЫМ
• ГЛУБОКОЕ КОСМИЧЕСКОЕ Блеск
• СЭНДИ КОРИЧНЕВЫЙ
• ПАСТЕЛЬ ОРАНЖЕВЫЙ
• СВЕТЛЫЙ КОРАЛЛ

Объявление

16.Адриан Лоран

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

• ПЫЛЬНАЯ БУРЯ
• УПЛОТНЕНИЕ КОРИЧНЕВОЕ
• ОРАНЖЕВЫЙ (PANTONE)
• БЕЛЫЙ МЕДНЫЙ
• БЕЛЬЁ

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

17. Бронзовая коллекция Bang Olufsen

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

• ACAJOU
• СТАРОБОРДОВЫЙ
• БЕЛЫЙ
• ИНДИЙСКИЙ ЖЕЛТЫЙ
• РУССЕТ

Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для вашего интернет-магазина

III. Яркие и смелые цветовые схемы веб-сайта: кричать о внимании

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

18. MA-TEA

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

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

19. Мяу Волк

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

• ОРЕОЛИН
• АЭРО
• MANTIS
• СВОБОДА
• РОЗОВЫЙ МЕКСИКАНСКИЙ

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

• РАЙСКИЙ РОЗОВЫЙ
• ПАЛАТИНАТ-СИНИЙ
• ПОЛУНОЧНО-СИНИЙ
• ТЕМНАЯ ОРХИДЕЯ
• RICH ELECTRIC СИНИЙ

21. Анимат Креатик

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

• КОБИ
• HAN ФИОЛЕТОВЫЙ
• СРЕДНИЙ СИНИЙ
• МАКСИМАЛЬНЫЙ ЖЕЛТЫЙ

РУБ.

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

22. Счастливый онлайн

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

• ЯНКИ СИНИЙ
• СИНИЙ ПИКТОР
• ФОЛЛИ
• ОРАНЖЕВЫЙ (WEB)
• СРЕДНИЙ МОРСКИЙ ЗЕЛЕНЫЙ

23. Саммит Грамаду

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

• ЦЕРИЗ РОЗОВЫЙ
• ГРУША
• СИНИЙ ПИКТОР
• УЛЬТРАМАРИНОВЫЙ СИНИЙ

24.La Phase 5

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

• RICH CARMINE
• ЗОЛОТОЙ МАК
• КАРОЛИНА СИНИЙ
• МОРСКОЙ ЗМЕИ
• ИЗАБЕЛЛИН

25. Синдикат ICO

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

• БЕЛЫЙ ЦВЕТОЧНЫЙ
• банановая мания
• БЕЗОПАСНЫЙ ЖЕЛТЫЙ
• MAUVE
• БОГАТАЯ ЛАВАНДА

26. Securinvest

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

• ПОЛУНОЧНО-СИНИЙ
• ГОЛУБОЙ
• БЕЛЫЙ РОЗОВЫЙ
• МАНДАРИН
• СРЕДНИЙ АКВАМАРИН

27. HtmlBurger

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

• ЖЕЛТЫЙ (CRAYOLA)
• ГЛУБОКОЕ МОРКОВНО-ОРАНЖЕВОЕ
• ВЕРМИЛИОН
• АЭРО
• НЕБЕСНЫЙ СИНИЙ

28.Сочная еда

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

• ОРЕОЛИН
• КОРОЛЕВСКИЙ ПУРПУРНЫЙ
• БЕЛЫЙ АНТИВСПЫШКА
• БЕЛЫЙ
• ОКСФОРД СИНИЙ

IV.Темные и драматические цветовые схемы веб-сайтов: разгадывайте тайну

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

29. Зеркало My 360

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

• ОНИКС
• ТАУП СЕРЫЙ
• БЕЛЫЙ ДЫМ
• КОРОЛЕВА СИНИЙ
• БИРЮЗОВЫЙ СРЕДНИЙ

30. Марго Леруа

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

• KEPPEL
• ГУНМЕТАЛЛ
• ВНЕШНИЙ ПРОСТРАНСТВО
• МЫШИ
• РИТМ

31.Иван Ибаньес

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

• ТРОЛЛЕЙ СЕРЫЙ
• ТЕМНО-ФИОЛЕТОВЫЙ
• СВЕТЛО-СЕРЫЙ
• ДЭВИ ГРЕЙ
• JET

32. Производство Portugal

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

• БЕЛЫЙ
• ИСПАНСКИЙ СЕРЫЙ
• ЗЕЛЕНАЯ ВИНТОВКА
• ЖАРАЧНЫЙ ЧЕРНЫЙ
• ПОСТОЯННОЕ ГЕРАНИЕВО ОЗЕРО

33. Microsoft в цифрах

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

• ЧАРЛСТОН ГРИН
• ТЕМНАЯ ПЕЧЕНЬ
• СВЕТЛО-СЕРЫЙ
• РОЗОВАЯ ОРХИДЕЯ
• ЧАЙНАЯ РОЗА

Вы хотите проверить несколько удивительных примеров параллакса CSS?

В.Цветовые схемы монохромных веб-сайтов: один цвет для победы

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

34. Ефрем Иосиф

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

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

35. Джин Whitetail

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

• БЕЛЫЙ
• ЯРКИЯ
• ОКСФОРД СИНИЙ
• PAYNE’S GREY
• КОРОЛЕВСКИЙ СИНИЙ

36. Fitspirit Fashion

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

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

37.Sikkema

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

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

38. Готэм-Сити

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

• ТАУП СЕРЫЙ
• ИЗЮМ ЧЕРНЫЙ
• ТЁМНЫЙ СЕРЫЙ
• СЕРЕБРЯНЫЙ
• РЕГИСТРАЦИЯ ЧЕРНЫЙ

39. Аджа Уилсон

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

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

Вот и все!

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