Какие есть цветовые палитры: Цветовые схемы и палитры. Их значение и применение в веб-дизайне

Цветовые схемы и палитры. Их значение и применение в веб-дизайне

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

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

Расширенные цветовые схемы

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

Разновидности цвета

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

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

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

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

Дополнительная цветовая схема

Дополнительная цветовая схема

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

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

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

Аналоговая цветовая схема

Аналоговая цветовая схема

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

Триадные и тетрадные цветовые схемы

Триадная цветовая схема

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

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

Тетрадная (прямоугольная) цветовая схема

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

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

Другие цветовые схемы

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

Монохроматическая цветовая схема

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

Нейтральная цветовая схема

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

Ахроматическая цветовая схема

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

Цвета могут быть сложными

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

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

16-03-2016

виды и способы использования в рисунке — Gamedev на DTF

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

37 248
просмотров

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

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

Что такое цветовой круг?

Цветовой круг Иттена. Источник

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

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

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

На этот круг часто опираются как раз в подборе цветовых схем.

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

Виды цветовых схем

Покажем каждую на примере круга Иттена.

Комплементарные цвета

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

Их можно увидеть, например, в «Подсолнухах» Ван Гога.

Винсент Ван Гог — «Подсолнухи». Источник

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

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

Николас Коул

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

Аналоговые цвета

Находятся рядом — такие сочетания часто встречаются в природе и постер-арте.

Такие цвета любил использовать Клод Моне:

Клод Моне — «Японский мостик». Источник

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

Треугольная схема

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

Яркий пример — «Молочница» Вермеера:

Йоханнес Вермеер — «Молочница». Источник

Сплит-комплементарные цвета

Находятся на вершинах равнобедренного треугольника.

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

Клод Моне — «Регата на Аржантёе». Источник

Прямоугольная схема

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

Наглядный пример использования этой схемы — другие подсолнухи Ван Гога.

Винсент Ван Гог — «Подсолнухи из Арля». Источник

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

Квадратная схема

Состоят из цветов в вершинах квадрата.

Часто используются в дизайне интерьеров:

Типичный интерьер с цветами из квадратной схемы

И при изображении городских пейзажей:

Пэтти Моллика — «Верхний Вест-Сайд». Источник

Монохромная схема

Это оттенки одного из 12-и цветов круга.

Яркий пример использования такой схемы — ещё одна работа Моне.

Клод Моне — «Утро на Сене». Источник

Ахроматическая схема

Комбинация чёрного, белого и оттенков серого.

Очевиднее всего эта схема в книжном тексте или на веб-странице. Пример из изобразительного искусства — некоторые работы Резы Асфара.

Художник — Реза Асфар. Источник

Как пользоваться цветовыми схемами

Изображение из книги «Теория цвета и практическая живопись»

Используйте метод «База, нюанс, акцент»

При работе с цветом важно следить за тем, чтобы они не спорили между собой. Для этого цвета должны отличаться не только по тону, яркости и насыщенности, но и по площади цветовых пятен, чтобы рисунок не превратился в однородную массу. Количество одного основного цвета не должно быть равным количеству другого основного цвета. Лучше всего, когда это соотношение колеблется в пропорции 70 на 30% или даже 80 на 20%.

Хорошо подойдет метод, который делит палитру на базу, нюанс и акцент (БНА):

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

Рассмотрим БНА на примере:

Художник — Реза Асфар. Источник

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

Уменьшайте насыщенность всех цветов, кроме акцентного

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

Комиксистка Ann Maulina (автор Raruurien и Varunair) предпочитает уменьшать насыщенность тёмных и светлых цветов, чтобы сделать акцент на полутонах.

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

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

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

Расставляйте цвета по уровню яркости

Виды цветовых схем с примерами работ Ann Maulina: Монохромная, аналоговая, комплементарная, сплит-комплементарная, треугольная и прямоугольная. Источник

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

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

Не нужно дотошно следовать схемам: используйте дополнительные цвета и оттенки

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

Хороший пример — популярная в кино палитра Teal Orange. Синий и оранжевый (бежевый, жёлтый) — любимое сочетание Голливуда. Это комплементарные цвета, которые можно получить, следуя схеме, но между ними есть и много других оттенков, которые в неё не попадают. Когда у вас есть всего два цвета, необходимы промежуточные оттенки, которые помогут сбалансировать картинку.

Кадры из фильмов «Люди Икс: Апокалипсис», «Остров», «Безумный Макс: Дорога ярости» и «Трансформеры». На всех использованы комплементарные цвета. Источник

Для работы с ограниченным количеством цветов вам понадобятся промежуточные оттенки: тогда картина заиграет и соберётся воедино.

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

Полезные ссылки

• На сайтах Adobe Color и Color Scheme можно подобрать цветовую схему онлайн, без регистрации и СМС.
• На сайте Color Lisa можно изучать цветовые палитры известных художников вроде Марка Шагала и Сальвадора Дали.
• Расширение для браузера ColorSnap будет полезно не только художникам, но и дизайнерам интерьеров. Оно подбирает цветовые палитры к любым изображениям на экране.
• Сайт Coolors также автоматически подбирает палитры к загруженным изображениям, но без установки в браузер.
• Сайт Canva тоже автоматически подбирает палитры к изображением, которые состоят из четырёх основных цветов.
• Сайт Brandfolder создаёт палитры на основе изображений, но ещё и подписывает цветовые кодировки.

Статьи:

Текст написал Владимир Шумилов, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

Теория цвета и цветовые палитры — полное руководство [2023]

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

Цвета обладают неизмеримой силой влиять на наше настроение, эмоции и мысли. Исследования, проведенные Институтом исследования цвета, показывают, что люди делают подсознательное суждение о продукте в течение 9 часов.0 секунд просмотра, и от 62% до 90% этой оценки основано только на цвете.

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

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

Вот что мы рассмотрим:

1. Что такое теория цвета?
2. Знакомство с цветовым кругом
3. Важность цветовой гармонии
4. Аддитивные и субтрактивные цветовые модели
5. Знакомство с цветовыми палитрами
6. Какие бывают типы цветовых палитр?
7. Как выбрать цветовую палитру 
8. Лучшие онлайн-инструменты для выбора цветовой палитры 
9. Заключительные мысли 

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

1. Что такое теория цвета?

Начнем с основ: что такое теория цвета?

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

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

Давайте быстро вспомним, что значат эти цветовые категории:

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

2. Знакомство с цветовым кругом

Вы можете подумать: «Существует более 12 цветов». Вы правы — и все они могут быть найдены в более продвинутой версии цветового круга.

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

Оттенок

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

Оттенок

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

Оттенок

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

Тон

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

Цветовая температура

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

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

3. Важность цветовой гармонии

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

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

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

4. Аддитивные и вычитательные модели цвета

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

Аддитивная цветовая модель (RGB)

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

Субтрактивная цветовая модель (CMYK)

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

5. Знакомство с цветовыми палитрами

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

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

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

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

6. Какие существуют типы цветовых палитр?

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

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

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

Аналоговая

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

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

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

Сплит-дополнительная цветовая палитра

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

Триадный

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

Tetradic

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

7. Как выбрать цветовую палитру

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

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

Изучите свою аудиторию

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

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

Чтобы узнать больше о том, как стать лучшим дизайнером, ознакомьтесь с нашей статьей о том, как избежать 10 самых распространенных ошибок в дизайне пользовательского интерфейса!

Учитывайте психологию цвета

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

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

• Оранжевый энергичный и теплый. Некоторые общие ассоциации с оранжевым включают креативность, энтузиазм, беззаботность и доступность.
• Красный — это цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и силой, а также со страстью, желанием и любовью. Некоторые распространенные ассоциации с красным включают действие, приключение, агрессию и волнение.
• Желтый вызывает позитив, молодость, радость, игривость, солнечный свет и тепло.
• Розовый вызывает чувства невинности и деликатности, благодарности, романтики, мягкости и признательности.
• Синий воспринимается как авторитетный, надежный и заслуживающий доверия. Общие ассоциации с синим цветом включают спокойствие, безмятежность, уверенность, достоинство и безопасность.
• Зеленый — цвет природы. Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление. 9№ 0014
• Черный олицетворяет силу, элегантность и авторитет. Общие ассоциации с черным также включают класс, различие, формальность, тайну, секретность и серьезность.

Выбирайте цвета с умом

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

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

Не экономьте на контрасте

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

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

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

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

Некоторые распространенные цветовые соглашения в дизайне пользовательского интерфейса включают:

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

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

Получить отзыв

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

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

8. Лучшие инструменты для выбора цветовой палитры

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

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

Adobe Color

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

Coolors

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

Цветовая шкала Adobe Illustrator

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

9. Заключение

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

Ищете вдохновение для дизайна пользовательского интерфейса? Ознакомьтесь с этими сообщениями в блогах:

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

Теория цвета и цветовые палитры: все, что вам нужно знать

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

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

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

Итак, давайте начнем и узнаем, как мы можем раскрасить мир вокруг себя!

Содержание

Что такое теория цвета?

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

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

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

Что такое цветовой круг?

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

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

Почему, спросите вы?

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

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

Источник: 99designs

7 важных терминов, связанных с цветом, которые вы должны знать

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

Итак, вот семь наиболее важных цветовых терминов, о которых вам следует знать:

1. Оттенок: относится к цвету объекта. Например, черный или синий?

2. Насыщенность: представляет силу или слабость используемого цвета.

3. Цветность: определяет чистоту цвета и то, сколько черного, белого и серого добавлено к нему или отсутствует.

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

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

6. Оттенок: можно добавить оттенок к оттенку, смешав его с белым.

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

4 Основные типы цветовых палитр

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

1. Монохроматические цветовые палитры

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

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

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

2. Аналоговые цветовые палитры

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

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

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

3. Дополнительные цветовые палитры

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

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

4. Триадные цветовые палитры

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

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

10 Широко используемых цветов и их значений

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

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

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

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

• Желтый: радость, положительная энергия, изюминка
• Черный: тайна, сила, грация, зрелость
• Синий: безмятежность, уверенность, спокойствие
• Красный: страсть, энергия, сила
• Зеленый: свежесть, рост, естественность, безопасность
• Белый: чистота, чистота, совершенство, утонченность
• Фиолетовый: царственность, роскошь, креативность
• Оранжевый : творчество, интеллект, инициатива, энтузиазм
• Серый: элегантность, неуверенность

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

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

3 инструмента генератора цветов, чтобы улучшить вашу цветовую игру

Итак, вы знаете, что такое цветовые круги и цветовые палитры, но как создать собственную цветовую палитру?

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

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

1. Поиск цвета

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

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

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

Источник: Color Hunt

2. Цвета Muzli

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

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

В любом случае результат будет отличным и привлекательным!

Источник: Muzli Colors

3. Colorbox

Colorbox от Lyft Design должен быть нашим любимым инструментом для выбора цветовой палитры.