Web палитра: «Безопасные» или Web Safe цвета для веб-дизайна

Цветовой круг можно разделить на три группы цветов:

• Основные цвета: Красный, синий и желтый

• Дополнительные цвета: Оранжевый, зеленый и фиолетовый

• Третичные цвета: Красно-фиолетовый, сине-фиолетовый, желто-зеленый, сине-зеленый, желто-оранжевый и красно-оранжевый (хотя Crayola дал им гораздо более красочные названия)

Цветовой круг также разделен на теплые цвета (красный, оранжевый и желтый) и холодные цвета (зеленый, синий и фиолетовый).

Но есть и другие свойства цвета, о которых нужно знать:

• Оттенок: Чистый цвет на цветовом круге

• Оттенок: Цвет с добавлением черного (становится темнее в зависимости от количества добавленного черного)

• Оттенок: Цвет с добавлением белого (осветление в зависимости от количества добавленного белого)

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

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

• Дополнительно: Цветовая схема с двумя цветами с противоположных сторон цветового круга

• Аналог: Цветовая схема с тремя цветами, расположенными рядом друг с другом на цветовом круге

• Триада: Цветовая схема с тремя равноудаленными цветами на цветовом круге

• Сплит-комплементарность: Цветовая схема с одним цветом с одной стороны цветового круга и двумя цветами, расположенными прямо напротив него на цветовом круге

• Tetradic: Цветовая схема с двумя наборами дополнительных цветов

• Квадрат: Цветовая схема с четырьмя равноудаленными цветами на цветовом круге

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

Определите суть вашего бренда

«Сущность вашего бренда» — это ваш бренд, основные ценности и миссия компании. Что вы отстаиваете? В этом и заключается суть вашего бренда.

Зачем это нужно знать при выборе цветовой палитры вашего бренда?

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

Подумайте об этом так:

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

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

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

• Красный: Сила, отвага, волнение

• Оранжевый: Оптимизм, теплота, игривость

• Желтый: Дружелюбие, счастье, энергия

• Зеленый: Природа, свежий, спокойный

• Синий: Надежность, уверенность, лояльность

• Фиолетовый: Роскошь, духовность, исцеление

• Розовый: Современный, любовь, женственность

• Белый: Чистота, простота, ясность

• Черный: Элегантность, изысканность, престиж

• Серый: Зрелость, класс, интеллект

• Коричневый: Приземленность, надежность, стабильность

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

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

Подумайте о зеленом Starbucks или синем Tiffany.

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

Создайте цветовую палитру бренда

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

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

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

Взгляните на цветовую палитру HubSpot:

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

10 лучших генераторов цветовых палитр

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

• Охладители
• Adobe Color
• Палеттон
• Колормайнд
• Цветная охота
• Канва
• Хрома
• ColorSpace
• Колоркулер
• Дизайнерское вдохновение

1.

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

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

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

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

2. Adobe Color

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

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

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

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

Подходит для: Дизайнеры, которые используют Adobe Creative Cloud и могут легко интегрировать цветовую схему в свои существующие инструменты.

3. Paletton

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

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

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

4. Colormind

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

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

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

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

5. Color Hunt

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

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

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

Подходит для: Дизайнеры, которые ищут вдохновение или цветовые схемы, соответствующие определенной эстетике.

6. Canva

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

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

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

7. Khroma

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

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

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

8. ColorSpace

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

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

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

9. Colorkuler

Colorkuler не столько помогает найти новую цветовую схему вашего бренда, сколько помогает вам использовать существующую цветовую схему для создания однородной ленты Instagram, которая понравится вашим подписчикам. Вы можете бесплатно использовать этот инструмент для изучения последних девяти изображений или использовать профессиональную версию Colokuler за 2,99 долл. США за анализ, чтобы получить общее представление о всей ленте.

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

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

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

10. Designspiration 

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

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

Подходит для: Дизайнеры, которые ищут вдохновение в цвете для своего следующего дизайна.

Выбор лучшей цветовой палитры для вашего бренда

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

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

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

Ага! Я понимаю!

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

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

Она хотела, чтобы он был настолько красным, насколько это возможно. Как… действительно красный.

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

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

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

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

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

Сила цвета

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

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

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

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

Вот мой собственный маленький секрет:

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

Цвета по всему миру

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

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

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

Какой цвет выбрать?

Мне часто задают вопрос: «Какие цвета выбрать? Те, которые нравятся мне, или те, которые понравятся моим пользователям?»

Короткий 3-секундный ответ — выбрать цвета, которые вам нравятся.

Но подождите!!

Давайте подробнее остановимся на ваших любимых цветах, не так ли?

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

1. Какие слова и прилагательные отражают индивидуальность вашего бренда?
   (Женственный или мужской? Игривый или серьезный? Роскошный или доступный? Современный или классический? Молодежный или зрелый? Громкий или приглушенный?)
2. Каковы ценности вашего бренда?
   (Изобилие, сострадание, надежность, равенство, веселье, рост, честность, инновации, доброта, мастерство, уравновешенность, устойчивость, стабильность, доверие, дальновидность и т. д.)
3. Какой цвет соответствует характеристикам вашего продукта/услуги?
4. Кто ваш идеальный клиент?
5. Как вы хотите, чтобы ваш идеальный клиент чувствовал себя при взаимодействии с вашим брендом?

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

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

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

Разрешение на нарушение правил

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

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

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

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

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

(Сейчас я слышу, как Боги Цвета кричат ​​на меня…)

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

Назад к основам: теория цвета

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

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

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

Ладно, может я переборщил…

Если вы помните хотя бы первые две группы, то у вас уже есть базовые знания по теории цвета! Ура!

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

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

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

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

Цветовой контекст

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

Но… какие цвета хорошо смотрятся вместе?

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

Не бойся, друг мой!

Ввод…

Цветовая гармония!

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

• Оттенок : другое слово для «цвета»; относится к одному из двенадцати цветов на цветовом круге
• Оттенок : оттенок, затемненный черным (хороший прием, чтобы найти темные фоновые цвета)
• Оттенок : оттенок, осветленный белым (хороший прием для поиска светлых фоновых цветов)
• Значение : насколько темный (также известный как оттенок) или светлый (он же оттенок) цвет, в диапазоне от черного до белого.
• Насыщенность : относится к интенсивности, независимо от того, кажется ли цвет более тонким или более ярким. Чем ближе цвет к серому, тем он более ненасыщенный, приглушенный.
• Тон : оттенок, приглушенный серым

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

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

Я почти слышу, как вы говорите «Ура!» затем сделайте небольшой цветной танец. 💃🏻🕺🏻

Монохроматический

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

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

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

Аналоговая

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

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

Дополнительный

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

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

Split-Complementary

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

Триадный

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

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

Тетрадика или двойной дополнительный цвет

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

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

СОВЕТ ПРОФЕССИОНАЛА: Если вы не уверены в своих способностях к выбору цвета, я советую вам держаться подальше от этой формулы цветовой гармонии.

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

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

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

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

• Adobe Color CC для создания цветовой палитры веб-сайта с нуля или из изображения, нажав ссылку «импорт изображения».
• Coolors для создания цветовой палитры веб-сайта с нуля, из изображения, нажав на значок камеры, или просто нажмите ссылку «Исследовать», чтобы найти существующие цветовые палитры.
• Paletton и 0to255 для создания цветовой палитры веб-сайта с нуля
• Design Seeds and Color Palettes для поиска существующих палитр
• Pinterest — еще один отличный инструмент, который вы можете использовать, просто выполните поиск по запросу «цветовые палитры веб-сайта»

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

Теперь пришло время провести мозговой штурм и сузить собственную цветовую палитру.

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

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

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

ШАГ ПЕРВЫЙ

Выберите цвет (цвета), который вам нравится, и представьте свой бренд

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

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

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

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

«Но сколько цветов?» спросите вы…

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

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

ШАГ ВТОРОЙ

Решите, какую формулу цветовой схемы вы будете использовать

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

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

ШАГ ТРЕТИЙ

Настройте оттенки по своему усмотрению

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

В нашем примере бренд отдает предпочтение более темному синему и чуть более светлому оранжевому, почти желтому. Затем мы добавляем больше тени (черного) к синему и больше оттенка (белого) к оранжевому. Для более светлого синего мы переместили «стрелку» ближе к зеленому, но все еще в пределах синего спектра.

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

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

СОВЕТ ПРОФЕССИОНАЛА: Вы можете работать с любым конкретным цветовым спектром в цветовом круге, чтобы найти тон/значение, которое вам больше всего нравится.

В следующих шагах цвета будут разделены на четыре отдельные группы:

• Основной
• Акцентный
• Нейтральный
• Оттенки и/или оттенки

ШАГ ЧЕТВЕРТЫЙ

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

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

Доминирующий цвет в большинстве случаев является основным цветом вашего бренда. Он также привлечет наибольшее внимание и станет самым запоминающимся. Подумайте о красной Coca-Cola™, желтой McDonald’s™, оранжевой Amazon™, розовой Barbie™, синей GE™, серой Mercedes™, черной Chanel™. Другими словами, основной цвет — это ваша главная звезда. ⭐️

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

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

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

ГДЕ ИСПОЛЬЗОВАТЬ : Используйте эти цвета, чтобы привлечь внимание вашей аудитории или выделить важную информацию, такую ​​как логотип, меню вкладки, кнопки призыва к действию, заголовки, заголовки, ссылки, номера телефонов и т. д.

СОВЕТ ПРОФЕССИОНАЛА : Выберите универсальный основной цвет, который будет хорошо смотреться как на светлом, так и на темном фоне. Если ваш основной цвет белый/очень светлый или черный/очень темный, возможно, вы захотите, чтобы один из акцентных цветов был универсальным.

ШАГ ПЯТЫЙ

Выберите Акцентные Цвета

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

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

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

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

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

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

СОВЕТ ПРОФЕССИОНАЛА: Ограничьтесь двумя или тремя цветами между основными и акцентными цветами . Выбрать один основной цвет? Используйте два акцентных цвета. Если вы выбираете два основных цвета, придерживайтесь одного акцента. Вы хотите, чтобы это было очень просто? Выберите один основной цвет и один цвет акцента.

ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета могут выделять важную или второстепенную информацию на вашей странице, такую ​​как CTA (призыв к действию), цитаты, субтитры или текущие вкладки меню.

ШАГ ШЕСТЬ

Выберите нейтральные цвета

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

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

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

СОВЕТ ПРОФЕССИОНАЛА : Старайтесь держаться подальше от чисто черного (#000000). Черный преобладает, и на самом деле нет ничего на 100% черного. Добавьте немного мягкого цвета в свой черный цвет, и это будет легче для глаз.

ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета в основном используются в качестве фона, текстур, тонких узоров, текста и в качестве баланса между основным и акцентным цветом.

ШАГ СЕДЬМОЙ

Вам могут понадобиться оттенки и оттенки

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

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

ГДЕ ИСПОЛЬЗОВАТЬ : Эти варианты можно использовать для фона, теней, эффектов свечения, наложений и вспомогательных элементов. Обычно они остаются вне поля зрения, предоставляя вам больше возможностей для выбора без изменения созданной вами цветовой схемы.

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

Вы чувствуете, что застряли?

Семь миллионов цветов на выбор.

Различные формулы и обозначения.

Непреодолимое чувство.

Да, я знаю! 🤦🏻‍♀️

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

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

Так что не судите себя так строго!

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

Подведем итоги

Сначала ✓

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

Секунда ✓

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

Третий ✓

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

Четвертый ✓

Шаги 4-7: Выберите основной, акцентный, нейтральный, а также оттенки и оттенки для окончательной цветовой палитры веб-сайта.

Заключение

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

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