Как сочетается цвет и шрифт в дизайне

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

#1 Монохром — это не должно быть скучно

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

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

#2 Добавьте акцентирующий цвет, что бы оживить черно-белый шрифт

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

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

#3 Инвертируйте фон и шрифт для достижения большего эффекта

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

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

#4 Использование нескольких цветов? Только из одной цветовой группы

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

#5 Неон на черном — всегда работает

Несколько последних лет стали свидетелями долгожданного возрождения печатной неоновой продукции. Цветовая палитра 80-х выглядит свежо и современно, когда она расположена на глубоком черном фоне. Неоновый шрифт на черном всегда работает и вызывает ассоциации с ночными клубами и вывесками для мотелей. Помимо прочего, это прекрасная возможность создать обрамление для вашего макета и вдохнуть в него требуемую атмосферу. Попробуйте использовать сочный розовый (C=0 M=88 Y=0 K=0) или лаймовый желтый (C=7 M=0 Y=87 K=0) для шрифта, который невозможно не заметить!

#6 Смягчите фон для придания винтажности

Стремитесь добиться полного погружения в винтажность? Помимо выбора классического шрифта (напр.: Akzidenz Grotesk), попробуйте разбавить ваши цвета, для придания им эффекта выцветания и налета времени. Вы можете существенно усилить эффект винтажности, используя не белый фон, а цвет овсянки или легкий бежевый (C=8 M=4 Y=17 K=0). Такой фокус имитирует оттенок изношенной бумаги, придающий вашему дизайну эффект старины.

#7 Радуга может смотреться… легендарно!

Цвета радуги занимают центральное место в мире моды и попкультуры. Помимо природной красоты и гармонии цветов радуги, немалый толчок к их популяризации приложили ЛГБТ сообщества. На сегодня всё большее распространение в дизайне набирают такие цветовые решения и очень красивым примером может служить полноцветный шрифт Gilbert. Радужная палитра, в которой собран весь спектр хроматических цветов беззаботна, весела и оптимистична. Это отличное решение для макетов — установите отдельные цвета для букв как в считалочке — каждый охотник желает знать где сидит фазан.. 🙂

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

Надеюсь, вам были полезны приведенные выше 7 советов о цветовом сочетании шрифта.

Правила использования цвета, шрифтов и изображений в шаблоне формы

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

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

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

В этой статье представлены контрольных списков, которые помогут вам хранить структуры на правильном пути.

В этой статье

• 
  Контрольный список для использования цвет границы и заливка

• 
  Просмотрите список использования шрифты и форматирование шрифта

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

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

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

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

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

При использовании цвет при проектировании, учтите следующее.

К началу страницы

Просмотрите список использования шрифты и форматирование шрифта

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

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

1. на текст заголовка используется шрифт Arial 9 пунктов.

2. для элемента управления текстом шрифт является Verdana 10 пунктов.

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

К началу страницы

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

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

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

К началу страницы

Цветовой контраст для лучшей читаемости

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

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

Должен отметить, что я далеко не эксперт по доступности. Моя цель – просто показать, что небольшое усилие может иметь большое значение, когда дело доходит до выбора цветов с учетом оптимальной читабельности. Проверьте W3C для более подробного объяснения. Кроме того, ознакомьтесь с Contrast Rebellion, чтобы узнать о проблеме контраста.

1. Создайте цветовую палитру (с оттенками, тонами и оттенками)

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

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

Определение оттенков, тонов и теней. Из предыдущей статьи «От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков».

2. Найдите хороший анализатор цветового контраста

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

• Colorable (Demo) Brent Jackson (*новый фаворит* h/t @JimJones)
• Luminosity Color Contrast Ratio Analyser от Juicy Studio
• Color Contrast Check от Jonathan Snook
• Color Contrast Checker от WebAIM
• 6 My Colors от Giovanni Scala
• Color Safe от Donielle Berg & Adrian Rapp

Brent Jackson’s Colorable (Demo)

3. Изучите контрастность основного текста

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

Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: «Оттенки серого — да, правда»).

4. Оцените яркость кнопок и ссылок

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

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

Я использую «Darkest Alice» (#107896) из-за хорошего сочетания контраста и яркости. «Рубин» (#C02F1D) тоже неплохой вариант.

5. Установите различные цветовые комбинации

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

Мой базовый пример с темно-серым текстом «Ворон» и ярко-синим цветом «Самая темная Алиса» для ссылок и кнопок.

Пример с темными цветами на светлом фоне.

Пример с подсветкой на темном фоне.

6. Документ в вашем руководстве по стилю

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

Образец документации для руководства по стилю.

Сводка

Это все, что нужно, но вы можете разбить это на три еще более простых фрагмента, если хотите:

1. Текст для чтения: копии вашего тела (тяжелая работа).
2. Ссылки действий: Для ссылок используйте яркие и контрастные цвета, чтобы было понятно, где находятся действия. (Если вы все сделали правильно, будет некоторый контраст между текстом для чтения и ссылками действия.)
3. Экстра, Экстра!: Создавайте и документируйте различные цветовые комбинации для выносок, призванных привлечь дополнительное внимание.

См. также:

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

• Использование словесных ассоциаций для выбора фирменных цветов
• Добавление цветов в палитру с помощью смешивания цветов
• Оттенки серого — да, правда
• Присвоение цветам более красочных названий
• От тьмы к свету: универсальность цвета с использованием оттенков, тонов и теней
• Сигнал и шум: цвет как инструмент навигации
• Использование визуальной громкости для лучшего поиска пути
• Design Systems at Viget

26 лучших цветовых комбинаций для вашего следующего дизайна

Цвет — самый мощный инструмент дизайнера — и самый обширный. Вот 26 цветовых комбинаций, которые вдохновят вас на ваш следующий дизайн.

Наджа Вейд

Совершенный веб-дизайн

От 101 до продвинутого уровня узнайте, как создавать сайты в Webflow, пройдя более 100 уроков, включая основы HTML и CSS.

Начальный курс

Начальный курс

Бесплатный курс

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

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

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

Но сначала давайте рассмотрим теорию цвета и цветовой круг.

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

Теория цвета

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

Цветовой круг

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

• Первичные цвета : красный, желтый, синий
• Вторичные цвета : оранжевый, зеленый, фиолетовый (созданы путем смешивания основных цветов)
• Третичные цвета : красно-оранжевый, желто-оранжевый, желто-оранжевый зеленый, сине-зеленый, сине-фиолетовый, красно-фиолетовый (созданы путем смешивания основных и дополнительных цветов)

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

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

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

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

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

26 прекрасных цветовых комбинаций, которые вдохновят вас на новый дизайн

1. Королевский синий и персиковый (в тренде)

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

Шестнадцатеричные коды: Королевский синий #00539CFF, Персиковый #EEA47FFF

2. Синий и розовый (классический)

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

Шестнадцатеричные коды: Синий #2F3C7E, Розовый #FBEAEB

3. Темно-серый и желтый (классический)

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

Шестнадцатеричные коды: Древесный уголь #101820FF, Желтый #FEE715FF 

4. Красный и желтый (классический)

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

Шестнадцатеричные коды: Коралловый #F96167, Желтый #FCE77D

5. Зеленый лайм и синий электрик (в тренде)

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

Шестнадцатеричные коды: Зеленый лайм #CCF381, Синий электрик #4831D4

6. Лавандовый и бирюзовый (в тренде)

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

Шестнадцатеричные коды: Лавандовый #E2D1F9, Бирюзовый #317773

7. Вишневый красный и кремовый (классический)

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

Шестнадцатеричные коды: Cherry Red #9

FF, Off-White #FCF6F5FF

8. Голубой и белый (классический)

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

Шестнадцатеричные коды: Baby Blue #8AAAE5, White #FFFFF

9. Ярко-розовый и голубой (в тренде)

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

Шестнадцатеричный код: Ярко-розовый #FF69B4, Neon Blue #00FFFF

10. Персиковый и ярко-оранжевый (в тренде)

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

Шестнадцатеричные коды: персиковый #FCEDDA, ​​ярко-оранжевый #EE4E34

11. Светло-синий и темно-синий (классический)

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

Шестнадцатеричные коды: Голубой #ADD8E6, Темно-синий #00008b

12. Небесно-голубой и розовый жевательной резинки (классический)

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

Шестнадцатеричные коды: Небесно-голубой #89ABE3FF, Розовая жевательная резинка #EA738DFF

13. Горчичный, шалфейный и лесной зеленый (в тренде)

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

Шестнадцатеричные коды: горчица #E3B448, шалфей #CBD18F, лесная зелень #3A6B35

Раскройте свой творческий потенциал в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начните бесплатно

14. Фуксия и неоново-зеленый (в тренде)

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

Шестнадцатеричные коды: фуксия #EC449B, неоново-зеленый #99F443

15. Пастельно-оранжевый, персиковый и заварной (в тренде)

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

Шестнадцатеричные коды: Пастельно-оранжевый #FFA351FF, Персиковый #FFBE7BFF, Заварной #EED971FF

16. Малиновый и оттенки синего (в тренде)

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

Шестнадцатеричные коды: Малиновый #8A307F, Синий #79A7D3 #6883BC

17. Вишнево-красный и жевательно-розовый (классический)

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

Шестнадцатеричные коды: Cherry Red #CC313D, Bubblegum Pink #F7C5CC

18. Коралловый, пряное яблоко и персик (в тренде)

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

Шестнадцатеричные коды: коралловый #FC766AFF, пряное яблоко #783937FF, персиковый #F1AC88FF

19. Светло-фиолетовый, мятный и сливочный (в тренде)

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

Шестнадцатеричные коды: Светло-фиолетовый #AA96DA, Мятный #C5FAD5, Масляный #FFFFD2

20. Зеленый лес и зеленый мох (классический)

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

Шестнадцатеричные коды: Forest Green #2C5F2D, Moss Green #97BC62FF

21.

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

Шестнадцатеричные коды: Island Green #2BAE66FF, White #FCF6F5FF

22. Желтый и зеленовато-зеленый (в тренде)

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

Шестнадцатеричные коды: желтый #FFE77AFF, зеленый зеленый #2C5F2DFF

23. Бежевый, черно-коричневый и желтовато-коричневый (в тренде)

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

Шестнадцатеричные коды: Бежевый #DDC3A5, Черно-коричневый #201E20, Желто-коричневый #E0A96D

24.

Ярко-синий и бледно-желтый (в тренде)

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

Шестнадцатеричные коды: Ярко-синий #234E70, Бледно-желтый #FBF8BE

25. Синий, темно-бордовый и индиго (классический)

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

Шестнадцатеричные коды: Синий #408EC6, Темно-бордовый #7A2048, Индиго #1E2761

26. Алый, светло-оливковый и светло-бирюзовый (классический) светло-оливковый и светло-бирюзовый.

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

Шестнадцатеричные коды: алый #B85042, светло-оливковый #E7E8D1, светло-бирюзовый #A7BEAE

Лучшие цветовые комбинации для лучшего веб-дизайна

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

27 сентября 2021 г.

Процесс проектирования

Поделиться

Рекомендуемое чтение

Процесс проектирования

Процесс проектирования

Процесс проектирования

8 Подпишитесь на Webflow the best, и последний в дизайне и нет -код доставляется на ваш почтовый ящик каждую неделю.

Электронная почта

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

Все готово, следите за нашей следующей рассылкой!

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

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

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

Подробнее о CMS

Электронная торговля

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

Подробнее об электронной торговле

Редактор

Редактируйте и обновляйте содержимое сайта прямо на странице.

Подробнее о Редакторе

Хостинг

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

This entry was posted in Популярное