HCL Easy. Плагин для Figma по подбору доступной цветовой палитры

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

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

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

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

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

Примеры решения подобной задачи другими компаниями:

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

Все стандартные инструменты для создания дизайн-проектов и подбора цветовой палитры используют цветовое пространства RGB и его производные, такие как HSB, HSV, HSL и т.д.

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

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

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

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

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

Именно поэтому мы решили создать собственный инструмент — HCL Easy, который позволяет решать данные задачи.

Мы используем цветовое пространство CIELab, представленное в виде осей HCL с помощью chroma.js, таким образом, чтобы инструмент был максимально удобен в использовании.

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

С помощью функции «Доступность» можно проверить за раз всю цветовую матрицу на предмет контрастности, включая контрастность для каждого из восьми видов дальтонизма. Здесь мы использовали библиотеку, с говорящим названием Color Blind, эта библиотека преобразует наши HEX-коды в те, которые видят люди с различными нарушениями зрения, чтобы впоследствии мы могли проверить контрастность на воспроизведенных цветах.

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

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

Ссылки:Лендинг — http://hcleasy.com

Плагин Figma — https://www.figma.com/community/plugin/926166109013752444/HCL-Easy

#figma #design #sketсh