Представленный ниже подход лучше всего применять в рамках создания дизайн-системы крупных веб-платформ. Он нацелен на специалистов которые выбирают более осознанный подход и хотят иметь полный контроль над стилями и компонентами.
Безусловно, на данный момент нет проблем с созданием цветового набора, для абсолютно любых целей. Существует огромное количество решений и инструментов которые генерируют палитру на основе стартового цвета, среди которых онлайн-сервисы, блендтулы или плагины в экосистеме самих редакторов.
Эти инструменты позволяют создавать ступенчатый градиент с заданным количеством шагов в один клик, но самая главная их проблема заключается в отсутствии полного контроля для последующего редактирования палитры.
Кроме всего прочего, возможность определить и обьяснить системный подход в создании цветовых наборов говорит о осознанном выборе что как правило характеризует специалиста более высокого уровня.
Начнем!
Тут стоить сразу разделить построение цветов на две категории: набор оттенков серого и остальные наборы (красный, синий, зеленый, желтый...). Подход тот же, но вторая категория требует дополнительных действий.
1. Серые оттенки
Самый простой и эффективный подход создания цветового набора основывается на непрозрачности. Разберем на примере серых оттенков, потребность в которых в крупных веб-приложениях является достаточно высокой (не рассматриваем лендинги, небольшие веб сайты и мобильные приложения):
Предположим что у нас есть уже какой-то набор ключевых цветов, как правило это цвета логотипа (если нет четких бренд-гайдлайнов).
1. Подбираем основу для нашего набора серых оттенков относительно бренд-цветов, в нашем случае это #4D4D70, он и будет нашим первым цветом в шкале из 10.
2. Дублируем наш слой 9 раз изменяя непрозрачность слоя на 10% меньше чем у предыдущего слоя (1. 100%; 2. 90%; 3. 80%...)
3. Дублируем полностью всю шкалу цветов и используя инструмент Color Picker (i) переназначаем ей соответствующий HEX попутно убирая прозрачность слоя (возвращаем всем слоям opacity 100%)
Первоначальную шкалу с прозрачностью удалять пока не стоит, это готовый шаблон для создания дополнительного набора, либо инструмент который позволит быстро отредактировать существующий набор!
2. Любой другой набор оттенков
Дизайн-система строилась для крупной веб-платформы с довольно широким спектром типов визуализации данных, а потому была необходимость в создании дополнительных наборов (синего, зеленого, красного и желтого) оттенков, аналогично серым.
Так как уже был готовый темплейт было очень легко создать дополнительный набор массово выбрав слои и изменив HEX.
Технически все работало хорошо, но визуально возникали небольшие проблемы. Перепроверив этот подход на синем, красном и желтом цветах стало ясно что данный подход требует доработки.
Последние оттенки становились непригодны для использования, так как были слишком бледными. Приходилось уводить базовый HEX в более темный что в последствии приводило к довольно грязным и лишенным насыщенности оттенкам.
Первое что пришло в голову это создать два сегмента оттенков (светлые и темные) одного цвета основанных на двух разных HEX-кодах, для того что бы избежать грязных оттенков и отсутствие насыщенности. Но тогда мы жертвовали системным подходом и отходили от правил, что создавало дополнительные условия в создание цветов.
Первое что мы сделали это вернули базовый цвет на свое место и уменьшили количество шагов с 10 до 5. Основная причина заключалась в том что контраст между оттенками был незначителен, что приводило к крайне низкой функциональности набора. К тому же от последних трех оттенков было мало пользы.
Оставалось решить проблему более темных оттенков при этом не отходить от базового HEX, но сложность заключалась в том что параметр непрозрачности не может быть больше 100%.
Возникла идея накладывать на базовый HEX еще один слой с непрозрачностью равной одному шагу что бы получить следующий темный оттенок, но результата это никакого не дало...пока мы не применили blend mode multiply.
В итоге получился второй темплейт для всех цветов кроме серых где базовый HEX с непрозрачностью 100% уже находился не в начале а в середине шкалы. Кроме того, для темных оттенков мы увеличили шаг непрозрачности от 20% до 30% для большего контраста.
Но если есть необходимость в дополнительных оттенках это с легкостью можно сделать путем уменьшения шага непрозрачности слоя.
Заключение
Обе категории наборов создаются с использованием единого подхода с незначительными дополнениями. Самое интересное что за каждый набор отвечает всего один HEX. Такую систему очень легко поддерживать и редактировать если того требует кейс.
А главное, данную систему построения цветовых наборов можно без особых проблем задокументировать и обьяснить любому специалисту в вашей команде, как дизайнеру так и "недизайнеру", потому как она строится по тем правилам которые определяете вы, а не плагин, блендтул или онлайн сервис.
Я для проектов просто подготовил себе библиотеку с наборами цветов. Основная либа: Primary, Secondary, Accent, Gray, Info, Warning, Accept, Denger. В дополнительной либе 12 основных цветов, применяются в основном для разных статусов, чартов и прочего.
В итоге для каждого проекта меняются только цвета основной либы,, ну то есть оттенок. А принцип везде одинаковый. Эта либа работает в шаблонизированной и настраиваемой дизайн-системе.
Как следствие, дизайн-система работает для любого проекта идеально. Просто в начале меняются некоторые настройки, цвета, шрифты и т.д. И вуаля, готовая система за неделю в самом начале проекта.
Вполне неплохое решение, по какому принципу меняются оттенки цветов?
Цветовая градация формируется схоже с тем, как вы описали это в статье описали. Только я это не в ручную делаю, а использую сервис онлайн. Сходу не нахожу закладку. Если интересно, поищу потом.
Но мне не всегда нравится, как сервис делает, поэтому некоторые оттенки руками поправляю.
Получается примерно вот такая штука (приложил картинку). Плюс цвета еще на бордеры дублируется. И потом плагином из этого формируются цветовые либы в скетче. Правда на приведенном примере меня не устраивают градации красного и желтого. Но это на текущий момент не принципиально, поэтому пока не трогаю.
В связке Скетч+Абстракт работает идеально.
Понял, мне тоже не нравится как работают сторонние сервисы, потому использую подход выше.
Верно, потому и уточнил сам кейс, необходимость возникает в случае работы с дэйтавиз (Чарты, графики, карты и так далее), в более простых интерфейсах как правило это не нужно.
Интересный питч! Я редко рабоиаю с большими проектами и непонимаю зачем нужны 10 оттенков серого или любого другого. Обычно хватает 5-6 серого и 2-3 варианта любого другого
Понятно, что меняя всего один хекс, мы будем менять внешний вид и у слоёв с заданным опасити. Однако, это всё равно неудобно, т.к. придётся тогда все свои 5-10 цветов, загнанных в стили в Фигме пипеткой заново переназначать. Скорости в работе со стилями на реальном проекте это не добавит. Демку палитры пересобирать не придётся, это верно, но на практике - пипетинг.
Использую похожий подход у себя в работе и очень не рад, что Фигма до сих пор не научилась делать что-то подобное самостоятельно. Или хотя бы имела возможность загнать в цветовой стиль несколько объединённых через тот же "blend" заливок.
Цветовая гамма в проекте меняется один раз на старте и 1-2 раза по мере работы, когда дизайнер приходит к решению, что некоторые цвета подобраны не совсем удачно.
Автоматизация должна быть на уровне применения цветов и сквозном использовании, и не на уровне формирования оттеночной палитры. Потратить 10 минут на палитру, тыкая пипеткой — фигня. Ускорение на этом шаге ничего не изменит. А вот то, что вы пипеткой измените цвет в палитре, а он автоматом применится на всем проекте — вот это автоматизация и ускорение.
Верно!
Все так, Юлия, но этот подход о контроле и унификации нежели о скорости, для скорости как раз таки плагины и блендтулы. А о переназначении конечно это так, ведь автоматизация антоним контроля, либо одно либо другое. Из своего опыта, никогда полностью палитру не менял, добавлял дополнительные оттенки либо менял шаг опасити. Но согласен, опыт у каждого свой)
А по поводу комбинации многих заливок и бленд модов, не уверен что это корректно скажется взаимодействии с фронтенд командой так как им нужно будет лишь одно единое значение на каждый цвет, пипетка это дело решает отлично)
Отличный способ. А где можно посмотреть как менять цвет различных оттенков в пределах одного стиля? Как можно разные цвета объединить в один стиль? Так как показано в видео.
Здравствуйте, Любовь, дело в том что подход основан на том что для всей палитры оттенков одного цвета используется всего лишь один HEX, просто прозрачность разная. Я для удобства загнал этот ХЕКС в стиль, для демонстрации, и соответственно меняя сам стиль меняю всю палитру оттенков одного цвета, учитывая непрозрачность каждого из квадратиков.
Это все сделано для того что бы ПОДОБРАТЬ подходящий набор, как только вы подобрали то нужно переназначит все пипеткой и из одного ХЕКСа у вас получится к примеру 8 ХЕКСов, если палитра состоит из 8 оттенков.
То есть, отвечая на ваш вопрос, в демонстрации не разные стили а всего лишь один с разной степенью непрозрачности.
Этот способ исключительно для подбора и редактирования палитры, не для того что бы ее так строить в рамках дизайн системы, как только подобрали набор то убираем прозрачность и создаем стили)
PS. не советую использовать прозрачность для финальных цветов, будь то серые или какие другие, возможны кейсы когда это будет плохо работать на проде.
Поняла что не совсем правильно задала вопрос.
Допустим, я создаю один квадратик с HEX (зеленый, с прозрачностью 100%), затем создаю цветовой стиль- 100. Далее добавляю еще квадратики, затем присваиваю им этот стиль green. При этом прозрачность внутри этого стиля я менять не смогла, т.к. меняется прозрачность во всех квадратиках с этим стилем. Прозрачность меньше 100% получилось настроить только через "Layer". Это можно увидеть на первом скрине. И наконец потом через пипетку переназначила все, чтобы получить финальные цвета.
А вот в случае когда требуется получить цвета свыше 100%. Как настраивать прозрачность в этом цветовом стиле с одним HEX, тут я вообще никак не догадалась( Смогла только, не создавая цветовой стиль, через отдельный квадратик сделать, добавив еще слой через Fill с этим же HEX с прозрачностью 30%. Дальше через пипетку получила новый цвет без прозрачности. Т.к. показано на втором скрине экрана.
Получается, что менять всю палитру оттенков через один стиль у меня удалось только для HEX c прозрачностью от 100% до 20% и то, наверное коряво (через "Layer"). С прозрачностью от 100% до 190% получилось сделать палитру меняя каждый квадратик отдельно. Надеюсь когда-нибудь я осилю эту задачку :) Но в любом случае спасибо за ответ.
Статья огонь. Буду создавать теперь цветовой набор осознано благодаря вам))
Все верно, через Layer и нужно это делать) и лучше не использовать для таких целей frame а именно rectangle. Кроме того нужно помнить что прозрачность можно использовать только на белом фоне!) Это очень важно, так как цвет непрозрачного ректангла мешается с грязным серым фоном.