Сочетание цветов сайта: Гайд по созданию цветовой палитры для сайта — статьи на Skillbox

Заключение

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

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

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

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

По материалам: crazyegg.com

06-02-2019

Выбор цветовой палитры инфографики — правило трех цветов

• Создать
  • Презентации
  • Отчеты
  • Инфографика
  • Листовки
  • Графика в социальных сетях
  • Плакаты
• Решения
  • Для отдела кадров
  • Для маркетинга
  • Финансы
  • Для здравоохранения
• Для команд
• Стоимость
  • Ценовые пакеты
  • Цена для некоммерческих организаций
  • Стоимость образования

10 популярных сайтов, сочетающих цвета, гарантированно вызовут радость в 2020 году

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

Я дизайнер уже более 20 лет.

Я знаю, что дает отличное сочетание цветов.

Я также знаю лучшие сайты с цветными комбо.

Давайте раскрасим.

Color Hunt — это бесплатная и открытая коллекция цветовых палитр, созданная Гал Шир.

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

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

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

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

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

Startup Colors — это наша собственная подборка красивых цветов логотипов для стартапов.

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

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

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

Самая большая коллекция официальных цветовых кодов бренда и логотипов.

Что классно на этом сайте, так это то, что на нем представлена ​​цветовая палитра всех ваших любимых брендов.

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

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

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

Все настроено на красивом удобном веб-сайте.

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

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

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

Вы также можете фильтровать по новым и популярным цветовым схемам.

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

Adobe Color от Adobe — еще одна сила, когда дело доходит до цветовых сочетаний.

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

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

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

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

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

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

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

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

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

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

Просто зайдите на сайт, выберите две цветовые комбинации, и Material Design Palette сделает все остальное!

Создает цветовую палитру из 8 цветов, включая основные цвета, цвета текста, значков и разделителей.

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

Coolers — это сверхбыстрый генератор цветовых схем.

Тысячи профессиональных дизайнеров создали тысячи невероятных цветовых сочетаний.

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

Best — это самые популярные цветовые комбинации, за которые проголосовало сообщество Coolers.

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

Design Seeds — это сайт цветовой палитры, управляемый Instagram.

Гений Design Seeds в том, что все цветовые комбинации взяты из реальных фотографий.

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

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

Сайт ориентирован на цвет в целом. Он не ориентирован на дизайн на основе экрана.

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

Design Seeds очень популярен, особенно на очень визуальной платформе Instagram.

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

Совершите прыжок во времени и почувствуйте краски истории.

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

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

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

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

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

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

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

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

Вот и все

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

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

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

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

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

Сочетание цветов: руководство для новичков

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

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

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

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

В наши дни люди перегружены множеством вещей в своей повседневной жизни, и поэтому все движется к простоте, людям нравится простота! Сделайте взаимодействие с вашим брендом более простым и в то же время интересным! Четкое сообщение, понятная структура, понятный интерфейс!

ТЕОРИЯ ЦВЕТА

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

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

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

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

ШКАФ С ЦВЕТНОЙ ТЕРМИНОЛОГИЕЙ

• Оттенок — цвет объекта, чистый цвет. Например, все первичные и вторичные цвета являются синонимами цвета.
• Chroma — чистота цвета. В оттенке с высокой насыщенностью нет черного, белого или серого.Добавление белого, черного или серого снижает его цветность. Chroma — это яркость цвета по сравнению с белым.
• Насыщенность — как оттенок проявляется при определенных условиях освещения. Подумайте о насыщенности как о слабом и сильном.
• Значение — можно еще назвать легкостью. Это относится к тому, насколько светлый или темный цвет. Более светлые цвета имеют более высокие значения. Например, желтый цвет имеет более высокое значение, чем темно-зеленый или темно-синий. Белый цвет имеет наивысшее значение из всех оттенков, а черный — самое низкое.
• Тона — когда к оттенку добавлен серый цвет. Оттенки обычно выглядят мягче, чем чистые оттенки.
  Тона с большим количеством серого могут создать винтажный стиль.
• Оттенок — когда к оттенку добавляют черный, делая его темнее.
• Оттенок — когда к оттенку добавляют белый цвет, осветляя его. Очень светлые оттенки иногда называют пастельными.

ЦВЕТОВЫЕ СИСТЕМЫ: RGB VS CMYK

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

CMYK ДЛЯ ПЕЧАТИ

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

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

Давайте посмотрим на это с соответствующими числами. CMYK работает по шкале от 0 до 100. Если C = 100, M = 100, Y = 100 и K = 100, вы получите черный цвет.Но если все четыре цвета равны 0, вы получите настоящий белый цвет.

RGB ДЛЯ ЭКРАНОВ

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

Давайте посмотрим на это с соответствующими числами, RGB работает по шкале от 0 до 255. Итак, черный цвет будет R = 0, G = 0 и B = 0. Белый цвет будет R = 255, G = 255 и B = 255.

Из-за этих различий дизайнерам нужен способ получения согласованных цветовых результатов при работе с обеими системами, например, если вы разрабатываете логотип для использования на своем веб-сайте, но также хотите напечатать визитную карточку с тем же логотипом. , у вас есть Pantone Matching System (или PMS) для решения этой проблемы.Цвета могут быть подобраны для Интернета и для печати, чтобы обеспечить однородный внешний вид. Система Pantone упрощает сотрудничество дизайнеров, клиентов и полиграфистов и гарантирует, что конечный продукт будет выглядеть должным образом.

ЦВЕТОВАЯ КОМБИНАЦИЯ, ЦВЕТОВАЯ ГАРМОНИЯ

Изображение взято из школы дизайна Canva

• В палитре Monochromatic используются оттенки или оттенки одного и того же оттенка 9000 Использование аналоговых палитр 9000
• близкие друг к другу на цветовом круге.Эти палитры обычно создают ощущение последовательности и единообразия в дизайне. Аналогичные комбинации не создают темы с высококонтрастными цветами, поэтому они обычно используются для создания более мягкого дизайна.
• Дополнительные палитры создаются с цветами, противоположными друг другу на колесе. Обычно оттенки и оттенки используются, чтобы избежать резкого контраста, который может вызвать утомление глаз, когда два противоположных цвета расположены рядом друг с другом
• Разделение — дополнительная палитра использует один оттенок вместе с двумя другими, одинаково расположенными от его дополнения
• Triadic палитра состоит из трех основных цветов, равномерно расположенных на колесе. Если вы нарисуете равносторонний треугольник из выбранного цвета, вы увидите 3 разных цвета, с которыми можно работать.Обычно они смягчаются оттенками и оттенками.
• Двойные — дополнительные палитры — два дополнительных набора цветов, расстояние между выбранными дополнительными парами влияет на общий контраст окончательной композиции. Лучший способ использовать двойное дополнение — это сделать цветовую комбинацию, используя один цвет в качестве основного цвета в дизайне, а другие — в качестве акцентов. Не забывайте о цветности, значении и насыщенности при создании таких цветовых схем

3 ТЕРМИНА, ОПРЕДЕЛЯЮЩИЕ ОСНОВНУЮ ТЕОРИЮ ЦВЕТА

1. Дополнение — это то, как мы видим цвета с точки зрения их взаимосвязи с другие цвета.Когда цвета противоположны друг другу, они заставляют людей считать дизайн визуально привлекательным, устанавливая балансирующую среду.
2. Vibrancy задает эмоциональную окраску вашего дизайна. Более яркие цвета заставляют пользователя чувствовать себя более энергичным, они обычно используются для эмоциональной реакции, а также для кнопок CTA. Яркие цвета приводят к действию. Более темные оттенки расслабляют пользователей, позволяя им сосредоточиться на других, более важных вещах.
3. Contrast снижает утомляемость глаз и привлекает внимание пользователя за счет четкого разделения элементов на странице.
   Если вы сомневаетесь, какие цвета использовать, лучше всего выбрать очень светлый цвет для фона и очень темный цвет для самого текста. Использование различных контрастных цветов может помочь сосредоточить внимание зрителя на определенных элементах страницы, например, если вы поместите кнопку «подписаться» оранжевым цветом, а цвет фона станет светло-серым, это сразу же привлечет внимание пользователя.

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

ЦВЕТ ЗНАЧЕНИЕ — И ЧТО ЭТО ОЗНАЧАЕТ ДЛЯ ДИЗАЙНА

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

КРАСНЫЙ

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

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

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

ОРАНЖЕВЫЙ

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

В брендинге: Апельсин часто олицетворяет молодость и креативность.

ЖЕЛТЫЙ

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

В некоторых восточных и азиатских культурах желтый цвет ассоциируется с королевской семьей или высоким статусом. В некоторых частях Африки и Латинской Америки желтый — традиционный цвет траура.

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

ЗЕЛЕНЫЙ

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

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

СИНИЙ

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

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

ФИОЛЕТОВЫЙ

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

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

ЧЕРНЫЙ

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

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

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

В некоторых азиатских и латиноамериканских культурах черный считается мужским цветом. Также в некоторых странах это ассоциируется с невезением.

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

БЕЛЫЙ

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

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

В Китае белый цвет — это цвет траура.

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

СЕРЫЙ

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

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

КОРИЧНЕВЫЙ

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

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

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

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

Design Seeds | для всех кто ♥ цвет