Осознанный выбор и полный контроль над цветовым набором интерфейса

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

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

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

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

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

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

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

1. Подбираем основу для нашего набора серых оттенков относительно бренд-цветов, в нашем случае это #4D4D70, он и будет нашим первым цветом в шкале из 10.

2. Дублируем наш слой 9 раз изменяя непрозрачность слоя на 10% меньше чем у предыдущего слоя (1. 100%; 2. 90%; 3. 80%...)

3. Дублируем полностью всю шкалу цветов и используя инструмент Color Picker (i) переназначаем ей соответствующий HEX попутно убирая прозрачность слоя (возвращаем всем слоям opacity 100%)

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

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

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

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

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

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

Оставалось решить проблему более темных оттенков при этом не отходить от базового HEX, но сложность заключалась в том что параметр непрозрачности не может быть больше 100%.

Возникла идея накладывать на базовый HEX еще один слой с непрозрачностью равной одному шагу что бы получить следующий темный оттенок, но результата это никакого не дало...пока мы не применили blend mode multiply.

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

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

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

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