Создание структуры цветовой палитры

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

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

Я считаю, что создание определенного набора систем / правил важно, когда вы начинаете что-то создавать. Цвета - это подмножество DLS (Design Language System) бренда, и это одна из основных областей, где дизайнеры упускают возможность создать определенный набор правил для использования цветов.

«Системы проектирования предоставляют удобную, централизованную и развивающуюся карту известных торговых зон бренда с указателями направления, которые помогут вам осваивать новые регионы». ~ Крис Мессина, экс-Uber

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

Давайте начнем

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

  • Оттенок цвета (синий, зеленый, красный и т. Д.).
  • Цветность - это чистота цвета (высокая цветность не имеет черного, белого или серого).
  • Насыщенность - это степень присутствия данного оттенка (чем ниже насыщенность, тем меньше оттенок и ближе к белому)
  • Яркость / Значение относится к тому, насколько светлый или темный цвет (темный имеет низкую яркость / значение).
  • Непрозрачность - это прозрачность или непрозрачность цвета (высокая прозрачность при низкой непрозрачности).
  • Тоны создаются путем добавления серого к цвету, делая его более тусклым, чем оригинал.
  • Тени создаются путем добавления черного к цвету, делая его темнее, чем оригинал.
  • Оттенки создаются путем добавления белого к цвету, что делает его светлее оригинала.
Краткое изложение цветовых свойств. Мы будем использовать комбинацию этих свойств для создания цветовых вариаций. Скачать версию для печати10-балльная шкала каркасной сетки для понимания свойств цвета

Каркасная Сетка

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

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

Я использовал Sketch App для создания сетки фреймворка, но это можно сделать и в других инструментах дизайна, таких как Photoshop / Illustrator / Figma / Gimp / и т. Д. Мы будем использовать популярную систему HSB Color.

️ Обратитесь к изображению ниже, следуя инструкциям ниже:

Шаг 1. Выберите базовый оттенок. Создайте квадрат 50 х 50 пикселей с этим оттенком. Вот например я выбрал синий оттенок (H 212, S 67, B 89).

Шаг 2. Создайте белую квадратную плитку размером 10 x 10 пикселей (H 0, S 0, B 100).

Шаг 3. Дублируйте эти белые плитки (5 рядов, 5 столбцов) так, чтобы они покрывали весь базовый квадрат шага 1.

Шаг 4. Уменьшите непрозрачность каждого столбца белых плиток на 25% слева направо.

Шаг 5. Уменьшите Яркость каждого ряда белых плиток на 25% сверху вниз.

Вот файл Sketch вышеупомянутых шагов

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

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

1. Метод оттенка и оттенка

Скачать файл Sketch

Этот метод является наиболее часто используемым, благодаря своей простоте. Сетка Базовой платформы, которую вы создали выше, была создана с использованием этого метода. Непрозрачность и яркость белых плиток над базовым оттенком варьируется от 100% до 0% (слева направо) и от 0% до 100% (снизу вверх) соответственно.

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

2. Метод наложения

Скачать файл Sketch

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

3. Мягкое легкое смешивание

Скачать файл Sketch

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

4. Метод смешивания наложения холодного цвета

Скачать файл Sketch

Этот метод использует каркас сетки, который мы создали в методе наложения # 2 Overlay Blending. Затем мы выбираем любой цвет Cool (например, синий). Создайте прямоугольник этого цвета и поместите его по всей сетке. Измените режим смешивания на Overlay. Результирующая цветовая сетка имеет яркий эффект.

5. Метод наложения теплого цвета

Скачать файл Sketch

Очень похоже на метод # 4 Cool Color Overlay Blending, здесь вместо этого мы выбираем любой теплый цвет (например, оранжевый). Создайте прямоугольник этого цвета и поместите его по всей сетке. Измените режим смешивания на Overlay. Получающаяся цветовая сетка имеет драматический теплый эффект.

6. Метод настройки яркости

Скачать файл Sketch

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

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

7. Яркость + Насыщенность Метод настройки

Скачать файл Sketch

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

Правило 1: более легкое изменение цвета = более низкая насыщенность + более высокая яркость.

Правило 2: изменение более темного цвета = более высокая насыщенность + более низкая яркость.

Гибридный пример

Скачать файл Sketch

Вот гибридный пример, который объединяет методы № 1, № 3, № 4 и № 5 для создания красивой палитры цветов. Это было вдохновлено одной из статей о Sketch Tricks для быстрого построения системы цветности в Sketch App.

Заключение

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

Есть еще больше способов для создания цветовых тем. Как видите, создание Base Framework Grid было самой важной частью. Сетка послужила для вашего воображения игровой площадкой для создания цветовых систем. Вы можете комбинировать несколько методов, чтобы создать совершенно новый набор цветов из вашего базового оттенка. (попробуйте градиенты вместо твердой основы Hue ).

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

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

Обо мне

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

Я регулярно чирикаю о дизайне и технологиях, а также работаю над Dribbble. Вы можете найти другую сторону меня в Instagram.

Наконец, после долгих проволочек, это моя первая статья о Medium. Обратная связь приветствуется. Если вам понравилось или вы узнали что-то после прочтения, рекомендуйте это другим. (Хлопок идет до 50 )

Спасибо за чтение!

Твиттер
Rib Дриббл
Instagram