Цветовая схема сайта: Как создать цветовую схему для сайта / Skillbox Media

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

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

2. Понимание цветовых сочетаний

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

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

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

Аналоговые цвета: Рядом

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

Дополнительные цвета: противоположности притягиваются

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

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

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

Триадные цвета: Равномерно расположенные

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

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

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

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

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

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

4. Адрес Визуальная иерархия

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

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

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

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

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

5. Сосредоточьтесь на действенности, особенно на кликабельности

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

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

6. Не забывайте об адаптивном дизайне

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

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

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

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

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

7. Используйте нейтральные цвета

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

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

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

2. JOCO

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

3. Embacy.io

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

4. Odopod

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

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

Следование правилам

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

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

Ищете свежий контент?

Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.

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

Orlee Gillis

Orlee — создатель контента в Elementor, увлеченный дизайном UX/UI и написанием UX. Она проводит много времени, практикуя свои дизайнерские навыки и заваривая холодный кофе.

Вам также может понравиться

Комментарии

Запустите свой облачный веб-сайт

20 лучших цветовых комбинаций, которые можно попробовать на вашем веб-сайте [Руководство с закладками]

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

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

Лучшие цвета для веб-сайта

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

Вместо этого при выборе цветов для своего веб-сайта следует учитывать две вещи: 

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

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

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

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

1. Кораллово-красный и Viking
2. Восточный залив, Moon Raker и Ghost
3. Викинг и Карри
4. Tan Hide, Vermilion и Acapulco
5. Боттичелли, Непал и серый корабль
6. Персидско-зеленый, Виста-синий, Лиловый и Подсолнух
7. Желтые календулы, Холодный лед и Синий перламутр
8. Специи, Тоскана, Яффо, Калико и желтый металл
9. Швейцарский кофе, шхуна, фарлап и шахта
10. Тюльпановое дерево и Пунга
11. Лебединая пучина, Монте-Карло и обсерватория
12. Твой розовый, горько-сладкий и ализариновый малиновый
13. Пампасы, твой розовый и Мелани
14. Горный луг и магнолия
15. Терракота, Порох, Лунный рейкер, Акапулько и Манхэттен
16. Сладко-горький, Космос, Нильский синий и Чайка
17. Malibu, Aero Blue, Picton Blue и Boston Blue
18. Белый навахо и яркий мандарин
19. Голубовато-серый и аэросиний
20. Красный и черный жемчуг Milano

Конечно, группа загадочных названий цветов не поможет, если не увидеть их в действии. (Что вообще такое «Pharlap»?)

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

1. Кораллово-красный и Viking

• Кораллово-красный: #F93943
• Викинг: #7EB2DD

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

Источник изображения

2.

• Восточный залив: #424874
• Лунный рейдер: # DCD6F7
• Призрак: #CACFD6

Если вам когда-либо наскучили текстовые элементы предсказуемого черного и темно-серого цветов, East Bay — темно-синий цвет, который станет отличной альтернативой. Замените белый фон на бледно-серый, как в Ghost, для более красивого белого пространства. Затем добавьте бледные акценты, такие как лавандовый Moon Raker для мягкой палитры, или выберите более насыщенные акценты, такие как розовый в примере ниже.

Источник изображения

3. Викинг и Карри

• Викинг: #7EB2DD
• Гарри: #FFE8D4

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

В приведенном ниже примере палитра еще более развита с более яркими и насыщенными аналогами Viking и Karry в качестве акцентных цветов.

Источник изображения

4. Желто-коричневая шкура, Vermilion и Acapulco

• Желто-коричневая шкура: #F98866
• киноварь: #FF420E
• Акапулько: #80BD9E

Если вы любите апельсины, но ищете что-то более яркое, чем Karry, Tan Hide и Vermilion — прекрасные цвета заката.

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

Источник изображения

5. Непал, Шип Грей и Боттичелли

• Непал: #90AFC5
• Корабельно-серый: #3E363F
• Боттичелли: #C4DFE6

Серый корабль — еще одна фантастическая альтернатива скучному черному тексту с его сверхтемным контрастом. Это хорошо сочетается с бледно-голубыми серыми тонами Непала и Боттичелли.

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

Источник изображения

6. Персидско-зеленый, Виста-синий, Лиловый и Подсолнух

• Персидский зеленый: #00A6A6
• Виста синий: #98DBC6
• Чудесный: #F18D9E
• Подсолнух: #E6D72A

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

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

Источник изображения

7. Желтые календулы, Ледяной и Синий

• Желтые бархатцы: #F6E278
• Ледяной холод: #BCF4F5
• Виста синий: #98DBC6

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

Источник изображения

8. Специи, Тоскана, Яффо, Калико и желтый металл

• Специи: #6E352C
• Тоскана: #CF5230
• Яффо: #F59A44
• Бязь: #E3C598
• Желтый металл: #6E612F

Пастель вам не по душе? Насладитесь ярко-красными оттенками Spice и Tuscany и темно-желтыми оттенками Jaffa и Yellow Metal. Они придают остроту и пикантность любому дизайну. Кроме того, с бязью можно получить яркий контраст, не прибегая к белому цвету, который может быть слишком холодным для палитры.

Источник изображения

9. Swiss Coffee, Schooner, Pharlap и Mine Shaft

• Швейцарский кофе: #E1DCD9
• Шхуна: #8F868
• Фарлап: #A67F78
• Шахтный ствол: #3E3C3C

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

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

Источник изображения

10. Тюльпановое дерево и Пунга

• Тюльпановое дерево: #F2AB39
• Пунга: № 563C16

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

Источник изображения

11. Лебединый пух, Монте-Карло и обсерватория

• Пух лебедей: #D1EDE1
• Монте-Карло: #7BC5AE
• Обсерватория: #028C6A

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

Источник изображения

12. Ваш розовый, горько-сладкий и ализариновый малиновый

• Ваш розовый: #FFC2C3
• Сладко-горький: #FE7773
• Ализарин малиновый: #EA3238

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

Источник изображения

13. Пампасы, твой розовый и Мелани

• Пампасы: #F1EBE9
• Ваш розовый: #FFC2C3
• Мелани: #E6CBDD

Еще одна комбинация яркого розового цвета Your Pink с акцентом на тему жевательной резинки с более светлыми цветами Pampas и Melanie.

Источник изображения

14. Горный луг и магнолия

• Горный луг: #1B998B
• Магнолия: #F8F1FF

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

Источник изображения

15. Терракота, порох, Moon Raker, Акапулько и Манхэттен

• Терракота: #E07A5F
• Порох: #3D405B
• Лунный рейдер: # DCD6F7
• Акапулько: #80BD9E
• Манхэттен: #F2CC8F

Сочетание пастельных тонов с глубоким, насыщенным темно-фиолетовым синим порохом создает мягкую, но модную и смелую цветовую гамму. Terracotta, Moon Raker, Acapulco и Manhattan — отличный выбор для цветного фона (как показано ниже) с порохом в качестве контраста для текста и элементов навигации.

Источник изображения

16. Сладко-горький, Космос, Нильский синий и Чайка

• Сладко-горький: #FE7773
• Космос: #FFD8D8
• Синий Нил: #194049
• Чайка: #87CEEB

Бледно-голубой цвет Seagull и бледно-розовый цвет Cosmos хорошо сочетаются с ярко-коралловым цветом Bittersweet и темным цветом Nile Blue (темно-голубоватый изумруд).

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

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

Источник изображения

17. Malibu, Aero Blue, Picton Blue и Boston Blue

• Malibu: #4DD7FF
• Aero Blue: #AEFFF1
• Синий пиктон: #32C3EE
• Бостонский синий: #3B8FA1

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

Источник изображения

18. Белый навахо и яркий мандарин

• Белый навахо: #FFE0AC
• Яркий мандарин: #FF8C8C

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

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

Источник изображения

19. Голубовато-серый и аэросиний

• Голубовато-серый: #666666
• Aero Blue: #AEFFF1

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

Источник изображения

20. Milano Red and Black Pearl

• Milano Red: #BA1200
• Черный жемчуг: #031927

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

Источник изображения

Добавление всплеска цвета

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