Существующие цветовые палитры

Палитры, или иначе оттеночные диапазоны, начали создаваться несколько веков назад. Они представлялись в виде шкал или атласов колеров. Среди наиболее распространенных и широко используемых 3 основных стандарта.

RAL

Палитра разработана в начале XX в. в Германии как стандарт для лакокрасочной продукции. Reichs-Ausschuss fur Lieferbedingungen – это цветовой диапазон, созданный Государственным комитетом по условиям поставок. В нем с большой скрупулезностью колористическое пространство разделено на отдельные диапазоны. Каждому разделу присвоен цифровой индекс. Обозначения четырехзначные.

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

Палитра включает шкалы:

• Classic;
• Design;
• Digital;
• Effect;
• Plastics;
• Books.

NCS

Natural Color System переводится с английского как “естественная система цвета”. Авторство принадлежит Скандинавскому одноименному институту. Появилась NCS в 1979 г. Главный принцип – использование 6 простых цветовых тонов, которые невозможно представить сочетанием двух других (исключение – зеленый).

Колористические элементы:

• белый;
• черный;
• красный;
• желтый;
• зеленый;
• голубой.

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

Pantone

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

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

Другие варианты

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

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

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

Наиболее распространенная – RGB, в ее основе 3 цвета:

• красный – Red;
• зеленый – Green;
• синий (голубой) – Blue.

Наряду с ней применяется модель CMYK:

• Cyan;
• Magenta;
• Yellow;
• Key (Black).

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

В работе используются еще HSL, HSB/HSV, LAB, XYZ. Для перевода обозначений одного и того же тона из одной модели в другую применяют конвертеры колеров. Они встраиваются в некоторые графические программы.

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

Шестнадцатеричный цветовой код – универсальная цифровая модель для отображения веб-страниц. Другое название – HTML-цвета.
Обозначение колера выглядит следующим образом: знак #, далее буквенно-цифровой формат, например #FAEBD7.
Код описывает тона и оттенки исходя из трех элементов, которые соответствуют модели RGB.

Все цвета и их оттенки по названиям

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

Белый

В группе белых колеров есть Белый и Белоснежный. Первый описывается как меловой или снежный, второй – как ослепительно белый. К ним близки Снежный и Призрачно-белый тона.

Однако есть ряд оттенков, которые выглядят как не совсем белые:

1. Дымчато-белый – со светло-серым оттенком.
2. Античный белый – переходный в бежевый.
3. Цветочный белый – ближе к бледно-бежевому.
4. Медвяная роса – более чем светло зеленый.

Голубой и синий

В группе синих и голубых Синий или Темно-голубой – основные тона.

Несколько вариантов аналогичных:

1. Темно-синий
2. Пороховая синь.
3. Темно-лазурный.
4. Военно-морской – глубокий, благородный синий.

Лазурные тона:

1. Синий Доджер – насыщенная лазурь.
2. Светло-синий – светлый сине-голубой.
3. Синяя сталь – подтон сине-голубого.

Далее идут оттенки, переходные к циану и цвету морской волны:

1. Голубой кадетский – средне-темно-синий.
2. Бирюзовый – светло-зеленый с голубизной.
3. Аквамариновый – средне-светлый зелено-голубой.
4. Циан – цвет морской волны.

Зеленый

Зеленый – основной тон.

Ближайшие к нему:

1. Темно-зеленый – темный подтон зелено-голубого.
2. Лесной зеленый.
3. Зеленое море.

Более далекие на переходе к Сине-зеленому:

1. Средний аквамарин – средне-светлый оттенок зелено-голубого.
2. Светло-морской – зелено-голубой.

Другое направление – оливковые тона:

1. Желто-зеленый.
2. Оливково-серый – средне-темный подтон желто-зеленого.
3. Камуфляжный.
4. Темный оливково-зеленый.

Еще одно направление – тяготение к желтому цвету:

1. Весенний – зелено-голубой.
2. Бледно-зеленый.
3. Лаймово-зеленый.
4. Зеленая лужайка.
5. Шартрез – горчично-зеленый тон зеленого яблока.
6. Зеленая мята – светлый мятный оттенок зеленого.

Красный и розовый

Красный – базовый цвет.

Близки к нему:

1. Карминово-красный.
2. Транспортный красный.
3. Кирпичный.
4. Киноварь.
5. Ализариновый красный – аналогичен органическому красителю ализарину.

В темной гамме:

1. Кларет – тон красного вина Бордо.
2. Темно-красные – Кармазин, Кардинал.

Несколько оттенков в лососевых тонах:

1. Темная лососина.
2. Светлый лососевый.
3. Сиена жженая – средне-светлый тон красно-оранжевого.

В коралловой гамме Светлый коралл – средне-светлый оттенок красного.

Розоватые тона:

1. Амарантовый.
2. Американская роза.

К коричневым тяготеют Каштановый и Темно-коралловый.

Коричневый

Коричневый – исходный тон.

Другие варианты:

1. Шоколадный.
2. Темный желто-коричневый.
3. Коричневое седло – средне-темный.
4. Темная сиена – средне-светлый подтон красно-оранжевого,
5. Коричнево-малиновый.

Светлые оттенки при переходе к желтому:

1. Цвет загара – средне-светлый оттенок коричневого.
2. Цвет плотной древесины.
3. Пшеничный.
4. Белый навахо – высветленный коричневый.
5. Бисквитный.

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

Серый

Базовый цвет этой части палитры – серый. Он относится к составным, присутствуют по 50% красного, зеленого и синего.

Остальные вариации этого тона:

1. Тускло-серый.
2. Темно- и Светло-серый.
3. Группа Сланцево-серых (другое название – Серый шифер).
4. Серебряный – светлый оттенок серого.
5. Гейнсборо – предельно светлый подтон серого, его называют еще туманно-белым.

Желтый и оранжевый

В оранжевом спектре базовый цвет – Красно-оранжевый.

Близкие к нему:

1. Темный оранжевый.
2. Томатный – средне-светлый оттенок красного.
3. Коралловый – более светлый, чем Томатный.
4. Светлый лососевый – средне-светлый подтон красно-оранжевого.

Среди желтой группы основной цвет – Желтый. По соседству с ним – Золотой, он же желто-оранжевый.

Ряд вариантов – более светлые:

1. Бледно-апельсиновый.
2. Светло-желтый, Лимонно-кремовый – светлый золотисто-желтый, Побег папайи, Мокасиновый.
3. Темно-персиковый – светлый оттенок оранжевого.
4. Бледно-золотистый – светлый подтон желтого.
5. Переходный цвет к Хаки – Темный хаки.

Фиолетовый

Фиолетовые тона в палитре включают несколько оттенков: Голубой фиолетовый, Темно-фиолетовый, Глубокий фиолетовый, Темный пастельно-фиолетовый.

Неподалеку от них – пурпурные оттенки:

1. Пурпур.
2. Средне-пурпурный.
3. Индиго – средне-темный подтон пурпурно-синего.
4. Темный грифельно-синий – переходит в синюю гамму.

Более светлые в пурпурных и розовых оттенках:

1. Маджента – цвет фуксии.
2. Сливовый – средне-светлый оттенок пурпурного.
3. Чертополох – отсылает к цветку одноименного растения.
4. Темно-лавандовый – соседствует с Аметистовым.

Черный

Черный цвет – основной, он не имеет вариаций. В таблицах RGB, CMYK, HSL он обозначается как содержащий 0% по всем шкалам.

Но есть несколько оттенков других тонов, которые близко подходят к черному:

1. Серый голубовато-зеленый оттенок черного.
2. Золотой оттенок черного.
3. Красный оттенок черного.
4. Сумеречный серый голубовато-зеленый.
5. Серая умбра.
6. Темно-коричневый и еще несколько других.

Цвета и психология человека

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

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

Интерпретация колористических тонов культурно неоднородна. Но есть общее:

1. Черный цвет чаще всего связывают с мощью, тайной, гневом, стилем.
2. Синий представляет вселенную. Он ассоциируется с безопасностью, успокаивающим действием, физическим и психологическим расслаблением.
3. Зеленый тяготеет к символике мира, спасения, гармонии и любви. Его рассматривают как цвет жизни и роста. Умиротворяет и расслабляет.
4. Красный порождает представление об активности, уверенности, страсти. Это возбуждающий, стимулирующий цвет. Однако в крайнем выражении он символически связан с огнем и войной.
5. Желтый – цвет солнца, божественного воплощения. Радостный и парящий, проявление движения, оптимизма, выразительности.
6. Фиолетовый связывают с мудростью и зрелостью. Способствует вдохновению, состраданию. Одновременно его характеризуют как таинственный, связанный с великими идеями и интуицией.

Использование разных цветов в интерьере

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

Подбор цветового диапазона задает общее направление, делая интерьер приятным для глаза, оригинальным.

Используются несколько основных композиционных вариантов цветовых сочетаний:

• однотонный;
• двухцветный – в основе 2 основных тона с добавлением нескольких вспомогательных оттенков;
• полярный – работает на контрастах;
• многоцветный – сочетание нескольких цветов, часто используется триада тонов.

Кухня

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

Гостиная

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

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

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

Спальня

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

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

Ванная комната

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

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

Детская комната

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

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

Анастасия Лебедева

Дизайнер интерьеров

Задать вопрос

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

Методы построения гибкой цветовой палитры для вашей дизайн-системы

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

color palette — «цветовая палитра»;  color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.

Mineral UI  это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

• У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА.

• Mineral предназначена для последовательного моделирования, и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.
  

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

• Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.

mineral-ui.com

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

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

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

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.

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

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

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

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

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

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

• Доступность: наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.

Исследование

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов —  исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

• Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

• Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?
  

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

RGB, HSB, HSL, или HEX?

Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения  и настройки цвета. Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).

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

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

IBM Design

Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.

https://www.ibm.com/design/language/resources/color-library

Material Design

Значения в Material Design быстро изменяют свое направление на графике, когда  значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.

https://material.io/guidelines/style/color.html#color-color-palette

Open Color

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

https://yeun.github.io/open-color/

Анализ

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

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

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

Дизайн цветовой палитры

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

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

Как определить смену в теме за три простых шага

1. Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

Метод для создания первой версии палитры

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

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

В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.

После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.

Примечание: сравните цвета первой версии с цветами второй.

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

• Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).

• С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.

• Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».

Возвращаясь к методу первой версии:

Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).

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

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

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

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

1. Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
2. Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.

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

Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.

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

Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:

У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)

Интересненько…

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

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

• Каковы преимущества наличия последовательных значений серого?

• Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?

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

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.

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

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

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

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных  увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.

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

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

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

Мой монитор довольно-таки большой и широкий 😉

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

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

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

Конвертируем в оттенки серого

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

Заключение

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

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

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

Особая благодарность:

Быстрые и простые решения для цвета

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

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

Больше статей о цвете:

И все озарится: Как новая палитра красок для фасадов изменит Петербург

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

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

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

Последний раз палитру красок для фасадов домов дополняли полвека назад. Какого же цвета Петербург сегодня? Выяснял корреспондент телеканала «Санкт-Петербург» Александр Буренин.

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

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

«Такой землисто-охристо-терракотовый». 

Если абсолютно случайно кто-то вдруг не понял, уточняем. 

«Ну это такие цвета — оттенки рыжего, желтого, коричневого, землистые цвета такие».

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

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

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

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

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

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

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

Подписывайтесь на нас:

_{Фото: телеканал «Санкт-Петербург»
Видео: телеканал «Санкт-Петербург»}

Окончательное руководство по цветам и цветовым палитрам

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

Типы цветовых схем

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

Монохроматическая цветовая схема использует вариации оттенков и оттенков одного и того же оттенка. Аналогичная цветовая схема использует цвета, расположенные рядом друг с другом на цветовом круге. Дополнительная цветовая схема использует цвета, противоположные друг другу на цветовом круге. Дополнительный разделенный — это цветовая схема, в которой используется один цвет и два других, которые находятся по обе стороны от противоположного цвета. Triadic Complementary (Triad) — это цветовая схема, в которой используются цвета, равномерно распределенные по кругу. Tetradic (Double Complementary) использует два набора дополнительных цветов. Если вы чувствуете себя достаточно уверенно, вы всегда можете пойти на что-то совершенно нестандартное, но в большинстве случаев лучше всего простое, поэтому не старайтесь создавать что-то новое, когда хорошо известные и часто используемые палитры работают. так же, как и.

Генераторы цветовой палитры

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

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

Adobe Color CC

• Генератор цветовых схем на основе типов цветовой палитры (монохроматическая, аналоговая и др.) ;
• Можно настраивать цвета в палитре отдельно;
• Раздел «Обзор» имеет несколько палитр, а также цветовые палитры с соответствующими изображениями;
• Имеет возможность создавать палитру на основе изображения;
• Возможность сохранения созданных вами палитр.

Paletton

• Простота использования — перетаскивание круга в цветовом круге;
• Вы можете проверить, как каждая цветовая палитра будет выглядеть на реальной странице, с помощью опции «Примеры»;
• Имеет раздел с предустановками, которые вы можете использовать и настраивать при необходимости;
• Можно экспортировать палитры в разные форматы.

Coolors

• Интуитивно понятный интерфейс, который создает палитру, просто щелкая пробел;
• В генераторе можно настроить всю палитру вместе или каждый оттенок отдельно;
• Coolors также имеет библиотеку готовых цветовых палитр;
• Вы также можете отфильтровать результаты, выбрав такой параметр, как, например, определенный цвет или «темный»;
• Расширение для Photoshop и иллюстратора;
• Особый вид для дальтонизма.

Canva

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

0to225

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

Примеры цветовой палитры

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

Цветовые палитры для свадьбы

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

Хелен и Джош

The Pittmans

Цветовые палитры для технологий

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

drawmote

JetStyle

Bloody

Цветовые палитры для окружающей среды

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

HuffPost

Дикая тайга

Sooma

Цветовые палитры для бизнеса

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

QAccounting

notis

Zapare Technologies

Better Therapeutics

Цветовые палитры для продуктов питания

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

El Burro

Jude’s Ice Cream

Völlerei Restaurant & Bar

Заключение

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

36 красивых цветовых палитр для вашего следующего дизайн-проекта

Ищете цветовые палитры для вашего пользовательского интерфейса? Color Hex — полезный онлайн-инструмент с коллекцией из почти 40 000 цветовых палитр, которые вы можете использовать в своих проектах. Вы можете копировать шестнадцатеричные коды и даже загружать версию каждой палитры в формате .PNG. Посмотрите некоторые из наших фаворитов ниже.

1. Пляжные полотенца

2.Светло-розовый

3. Красивый блюз

4. Так много потерянных песен

5. Она

6. Байт лунного света 6

7. Номер 3

8.Пастель

9. Android Lollipop

10. Радуга Дэш

11. Оттенки белого

12. Корзина черники

13. Пять оттенков серого

14.Оттенки кожи в аниме

15. Пляж

16. Сине-серый

17. Капучино

18. Facebook

19. Google Цвета

20.Серый Синий

21. Серо-лиловый цвет

22. Пастельная радуга

23. Цвета Metro UI

24. Грейсо

25. Водонос

26.Розовый

27. Никогда не сомневаюсь

28. Никогда не мечтал об этом

29. Каталог программ

30. Кабинет 2

31. Пурпурный горизонт

32.Оттенки кожи

33. Серый космос

34. Падение брони

35. Белый

36. Кожа запястья

ПОДРОБНЕЕ…

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

6 цветовых схем для идеального изображения

Некоторые цвета просто неправильно смотрятся вместе.

Коричневый и салатовый? Фу.

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

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

Что такое цветовая схема?

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

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

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

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

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

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

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

2.Аналогичное цветовое решение

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

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

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

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

Источник: Happy Collections

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

4. Триадическая цветовая схема

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

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

Источник: GIMP

5. Сплит-дополнительная цветовая схема

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

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

Источник: Крис Картер

6. Цветовая схема тетрадика

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

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

Источник: Светящийся пейзаж

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

Начать создание схемы

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

Мы только начинаем здесь заниматься цветом, и это всего лишь один из семи элементов искусства.

75 Привлекающих внимание цветовых комбинаций на 2021 год

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

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

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

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

Знание того, какие цветовые комбинации работают, является ключевым

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

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

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

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

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

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

Живой коралл (# FC766AFF) и Тихоокеанское побережье (# 5B84B1FF)

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

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

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

Ультрафиолетовый (# 5F4B8BFF) и Цветущий георгин (# E69A8DFF)

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

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

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

Бирюза (# 42EADDFF) и теплый песок (# CDB599FF)

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

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

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

Черный (# 000000FF) и белый (#FFFFFFFF)

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

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

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

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

Синий (# 00A4CCFF) и оранжевый (# F95700FF)

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

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

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

Sailor Blue (# 00203FFF) и Mint (# ADEFD1FF)

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

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

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

Серый (# 606060FF) и лаймовый пунш (# D6ED17FF)

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

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

Чтобы добавить немного индивидуальности и уверенности, сочетайте глубокий оттенок серого с энергичным всплеском лайма. Этот пикантный оттенок — важный тренд 2021 года, но использовать его следует осторожно! Лаймовый зеленый цвет сам по себе может быть ярким, но его также можно носить с чем-нибудь светлее карамельного оттенка кожи. Но при правильном применении он делает поразительное заявление. Эта яркая цветовая комбинация — наш личный фаворит в Мастере дизайна!

Помидор черри (# ED2B33FF) и Роза Восторга (# D85A7FFF)

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

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

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

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

Лесной зеленый (# 2C5F2D) и моховый зеленый (# 97BC62FF)

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

Зелень: светлая, ярко-зеленая трава, действительно посеяла семена для развития этого года. Цветовая комбинация, популярная в этом году, показывает, как зеленый превратился в нечто более резкое и темное. Угрюмый Forest Green может казаться почти черным в некоторых источниках света, но его подчеркивают изысканные тона Moss Green.

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

Королевский синий (# 00539CFF) и персиковый (# EEA47FFF)

Royal Blue и персик — это версия классического синего и белого в этом году (и не дальше миллиона миль от бирюзы и песка).

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

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

Электрический синий лимонад (# 0063B2FF) и аквамарин (# 9CC3D5FF)

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

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

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

(# D198C5FF) и кремовое золото (# E0C568FF)

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

Cream Gold — роскошный и теплый, с жидкой золотой текстурой, манящей для глаз. Орхидея прекрасно усиливает этот эффект, плавно покрывая Cream Gold.

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

Черный (# 101820FF) и ярко-желтый (# FEE715FF)

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

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

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

Бледно-зеленый (# CBCE91FF) и розовый жевательная резинка (# EA738DFF)

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

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

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

Медная монета (# B1624EFF) и состаренная медь (# 5CC8D7FF)

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

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

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

Небесно-голубой (# 89ABE3FF) и белый (# FCF6F5FF)

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

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

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

Темно-цитроновый (# E3CD81FF) и холодный серый (# B1B3B3FF)

Dusky Citron и Cool Grey представляют собой альтернативную версию классической комбинации золотого и серебряного цветов.Dusky Citron — красивый бледный оттенок золота, излучающий класс и изысканность.

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

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

Черный (# 101820FF) и оранжевый (# F2AA4CFF)

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

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

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

Коричневый сахар (# A07855FF) и бежевый (# D4B996FF)

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

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

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

Турецкое море (# 195190FF) и серебро (# A2A2A1FF)

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

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

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

Королевский фиолетовый (# 603F83FF) и Ice Flow (# C7D3D4FF)

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

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

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

Островной зеленый (# 2BAE66FF) и белый (# FCF6F5FF)

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

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

Сочетание зеленого и белого создает настоящее ощущение гармонии цветов.

Розовая соль (# FAD0C9FF) и угольно-серый (# 6E6E6DFF)

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

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

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

Черный (# 2D2926FF) и помидор черри (# E94B3CFF)

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

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

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

Манго-мохито (# DAA03DFF) и террариумный мох (# 616247FF)

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

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

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

Космическая вишня (# 9