Что это такое?
GS или просто Шкала — это взаимосвязанная система из 84 градиентов, выстроенная на основе шкалы оттенка (hue). В рамках неё цветовой спектр наложен на сетку и снабжён адресами. Через Шкалу удобно начинать работу с цветом и градиентами.
Эта система — оригинальная разработка, которую я бесплатно выпускаю в рамках проекта /designer. Её можно скачать в виде фигма-файла:
Систему можно использовать для подбора цвета в пространстве HSL и в качестве обучающего инструмента, чтобы лучше ориентироваться в Цветовом пространстве и применять его взаимосвязи в работе.
Также шкала поможет понимать, как взаимодействуют цвета с белым и чёрным текстом.
Как устроена Шкала: оттенки и освещённость
Основа шкалы — горизонтальный ряд из 6 ячеек-пробников, в которых настроены двухцветные градиенты. Они формируют полный цветовой спектр.
Каждый цвет в них имеет значение освещённости в 50%. Этот ряд — вариант спектра с набором максимально ярких цветов.
В каждой из ячеек настроен градиент из двух цветов, которые отличаются друг от друга оттенком. Расстояние между двумя цветами в любом градиенте Шкалы — 60° по оттенку.
По примерному значению градуса можно описать оттенок:
0° — красный
60° — жёлтый
120° — зелёный
180° — бирюзовый
240° — синий
300° — пурпурный
По вертикали ряд оттенков дублируется, только с новыми значениями освещённости. Максимальное — 95%, где оба цвета близки к белому. Минимальное — 5%, где градиенты почти чёрные.
Подбирай палитры, снимая их пипеткой
В большинстве случаев достаточно подбирать цвета в стандартном окне выбора цвета, но оно имеет и минусы: его нельзя раскрыть на полный экран для удобства выбора. GS частично решает эту проблему и позволяет оценивать градацию цветов в рабочей области, а не в окошке пикера. При помощи пипетки (I) можно снять нужный оттенок с доступных градиентов в любом удобном масштабе. Это даёт более тонкий контроль над цветом через визуальный интерфейс.
Вторая задача, которую решает GS — подбор цветовой палитры в рамках одного значения освещённости. Для этого мы снимаем цвета только в одном ряду, получая палитру с консистентным контрастом. Есть исключения, которые нужно компенсировать: жёлтый оттенок спектра проваливается по контрасту в светлый, а синий — наоборот в тёмный.
Такие места желательно компенсировать при подборе, отклоняясь на 10-20% по шкале освещённости.
Подбирай градиенты из пробников
Каждый из 84 пробников можно использовать как стартовую точку для экспериментов с цветом: подбора отдельного цвета или более сложного градиента.
Мы можем выбирать градиент в таблице по двум параметрам: оттенку по горизонтали, и освещённости по вертикали. Так формируется адрес каждого пробника.
Например, градиент 50/0 имеет в обоих цветах значение освещённости 50% и покрывает первый диапазон оттенков в спектре: от 0° до 60°. По этому номеру можно понять, что это градиент очень яркий и идёт от красного до жёлтого.
Другой пример: 20/240 — это сильно приглушённый по освещённости (20%) градиент от глубокого синего (240°) в пурпурный.
Пробники выполнены в виде библиотеки
Поскольку файл может быть опубликован в твоём пространстве как библиотека, а все пробники обёрнуты в компоненты, их можно вставлять в твои макеты через поиск и докручивать под твои цели по вкусу.
Подключаем файл как библиотеку в пространстве, затем можем искать нужный пробник по его адресу, например: GS 50/0. Также доступен компонент GS ALL, где они представлены все разом.
Для того чтобы снять настройки градиента с пробника, удобно использовать команды Copy Properties и Paste Properties, горячие клавиши Opt Cmd C и Opt Cmd V.
Полноэкранный режим даёт эффект погружения
Почему это важно: опыт просмотра мелкого пробника кардинально отличается от опыта просмотра всего экрана, залитого тем же градиентом. Это может влиять на наш выбор цвета: если мы подбираем цвет для фона, при просмотре пробника в течение нескольких секунд слишком яркий цвет довольно быстро начнёт обжигать глаза. Особенно этот эффект проявляется на больших экранах.
Навигация по Шкале в полноэкранном режиме
Шкала выполнена в виде прототипа, который можно развернуть на весь экран десктопа.
Он позволяет увидеть в крупном масштабе, как взаимосвязаны соседние цвета в спектре.
Это карта, по которой можно путешествовать при помощи стрелок, двигаясь по оттенку или освещённости. В прототипе можно перемещаться между соседними экранами и так подбирать градиенты, запоминая их адреса, при этом не покидая прототипа.
Залипать на переходы цветов, блуждая по матрице цветов — это отдельный прикольный медитативный опыт. Остаётся сохранить адреса понравившихся градиентов.
Определяй, к какой цветовой теме стремится градиент
Ещё один способ применения Шкалы — возможность узнать о том, какие нормы контраста проходит градиент. Можно ли на него накладывать белый или чёрный текст? В экранах я использовал светлую или тёмную тему в зависимости от итогов тестов, которые проводил через плагин Contrast.
А что с насыщенностью?
Все цвета градиентов в GS изначально имеют насыщенность (saturation) равную 100%.
В первую очередь система GS заточена на использование ярких сочных градиентов, которые хорошо смотрятся в интерфейсах и брендинге.
Можно настроить насыщенность конечного градиента через вспомогательный слой, который уводит его в монохром. Это реализовано через наложение слоя в режиме Saturation. В каждый пробник по умолчанию уже добавлен скрытый слой desaturator, который можно проявить и настроить степень обесцвечивания.
Если снимать цвет пипеткой через наложенный десатуратор, можно зафиксировать хексы обесцвеченной версию. Также можно понижать значение насыщенности непосредственно через пикер.
Пример применения GS
Ты делаешь банковское приложение. В выписке разные типы операций должны иметь разноцветные иконки, чтобы их было проще отличать друг от друга. Единым цветом заливать иконки скучно. Можно подобрать градиенты, но нужно следить, чтобы они были примерно в одном значении контраста. GS поможет сделать такую подборку консистентной, поскольку можно выбрать цвета из одного уровня освещённости, например, только из ряда 80.
Gradient Scale даёт ощущение контроля над цветом и проявляет возможности палитры, которые есть у нас как у дизайнеров. ⏹️
— образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev