Калибратор палитры цветов (beta)

Калибратор палитры цветов для эффективной веб-разработки. По мотивам статьи Палитра для веб-разработки. Цель калибратора: представить палитру в удобном для веб-разработки виде.

Задачи калибратора: выравнивание срезов по светлоте (Lightness) и добавление новых, объединение близких одновременно по цвету (Hue) и насыщенности (Saturation) цветов, генерация пула переменных со значениями исходных цветов.

Расширенная палитра с сохранением брендовых цветов

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

Как использовать?

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

$green3_5l: hsl(81, 52%, 91%); 
$green3_4l: hsl(81, 52%, 88%); 
$green3_3l: hsl(81, 52%, 80%); 
$green3_2l: hsl(81, 52%, 75%); 
$green3_1l: hsl(81, 52%, 64%); 
$green3   : hsl(81, 52%, 50%); 
$green3_1d: hsl(81, 52%, 36%); 
$green3_2d: hsl(81, 52%, 25%); 
$green3_3d: hsl(81, 52%, 23%); 
$green3_4d: hsl(81, 52%, 12%); 
$green3_5d: hsl(81, 52%, 9%); 

$green2_5l: hsl(84, 59%, 91%); 
$green2_4l: hsl(84, 59%, 88%); 
$green2_3l: hsl(84, 59%, 80%); 
$green2_2l: hsl(84, 59%, 75%); 
$green2_1l: hsl(84, 59%, 64%); 
$green2   : hsl(84, 59%, 50%); 
$green2_1d: hsl(84, 59%, 36%); 
$green2_2d: hsl(84, 59%, 25%); 
$green2_3d: hsl(84, 59%, 23%); 
$green2_4d: hsl(84, 59%, 12%); 
$green2_5d: hsl(84, 59%, 9%); 

$green_5l: hsl(119, 72%, 91%); 
$green_4l: hsl(119, 72%, 88%); 
$green_3l: hsl(119, 72%, 80%); 
$green_2l: hsl(119, 72%, 75%); 
$green_1l: hsl(119, 72%, 64%); 
$green   : hsl(119, 72%, 50%); 
$green_1d: hsl(119, 72%, 36%); 
$green_2d: hsl(119, 72%, 25%); 
$green_3d: hsl(119, 72%, 23%); 
$green_4d: hsl(119, 72%, 12%); 
$green_5d: hsl(119, 72%, 9%); 

$purple2_5l: hsl(296, 39%, 91%); 
$purple2_4l: hsl(296, 39%, 88%); 
$purple2_3l: hsl(296, 39%, 80%); 
$purple2_2l: hsl(296, 39%, 75%); 
$purple2_1l: hsl(296, 39%, 64%); 
$purple2   : hsl(296, 39%, 50%); 
$purple2_1d: hsl(296, 39%, 36%); 
$purple2_2d: hsl(296, 39%, 25%); 
$purple2_3d: hsl(296, 39%, 23%); 
$purple2_4d: hsl(296, 39%, 12%); 
$purple2_5d: hsl(296, 39%, 9%); 

$purple_5l: hsl(299, 36%, 91%); 
$purple_4l: hsl(299, 36%, 88%); 
$purple_3l: hsl(299, 36%, 80%); 
$purple_2l: hsl(299, 36%, 75%); 
$purple_1l: hsl(299, 36%, 64%); 
$purple   : hsl(299, 36%, 50%); 
$purple_1d: hsl(299, 36%, 36%); 
$purple_2d: hsl(299, 36%, 25%); 
$purple_3d: hsl(299, 36%, 23%); 
$purple_4d: hsl(299, 36%, 12%); 
$purple_5d: hsl(299, 36%, 9%); 

$red_5l: hsl(358, 52%, 91%); 
$red_4l: hsl(358, 52%, 88%); 
$red_3l: hsl(358, 52%, 80%); 
$red_2l: hsl(358, 52%, 75%); 
$red_1l: hsl(358, 52%, 64%); 
$red   : hsl(358, 52%, 50%); 
$red_1d: hsl(358, 52%, 36%); 
$red_2d: hsl(358, 52%, 25%); 
$red_3d: hsl(358, 52%, 23%); 
$red_4d: hsl(358, 52%, 12%); 
$red_5d: hsl(358, 52%, 9%); 

Оптимизация палитры

Так как палитра выше формировалась с сохранением изначальной палитры, то по ряду параметров палитра получается избыточной. Например, два цвета сильно различной светлоты (Lightness) могут иметь значения Hue и Saturation различающиеся в единицы между собой.

Наличие одновременно в одной палитре двух цветов, hsl(200, 69%, 50%) и hsl(206, 67%, 25%), рационально объяснить довольно сложно. А для того чтобы не плодить множество практически одинаковых цветов калибратор их «оптимизирует».

Расширенная и обновленная палитра с частичной коррекцией цветов

$green3_4l: hsl(84, 59%, 88%); 
$green3_3l: hsl(84, 59%, 80%); 
$green3_2l: hsl(84, 59%, 75%); 
$green3_1l: hsl(84, 59%, 64%); 
$green3   : hsl(84, 59%, 50%); 
$green3_1d: hsl(84, 59%, 36%); 
$green3_2d: hsl(84, 59%, 25%); 
$green3_3d: hsl(84, 59%, 20%); 
$green3_4d: hsl(84, 59%, 12%); 

$green2_4l: hsl(84, 59%, 88%); 
$green2_3l: hsl(84, 59%, 80%); 
$green2_2l: hsl(84, 59%, 75%); 
$green2_1l: hsl(84, 59%, 64%); 
$green2   : hsl(84, 59%, 50%); 
$green2_1d: hsl(84, 59%, 36%); 
$green2_2d: hsl(84, 59%, 25%); 
$green2_3d: hsl(84, 59%, 20%); 
$green2_4d: hsl(84, 59%, 12%); 

$green_4l: hsl(119, 72%, 88%); 
$green_3l: hsl(119, 72%, 80%); 
$green_2l: hsl(119, 72%, 75%); 
$green_1l: hsl(119, 72%, 64%); 
$green   : hsl(119, 72%, 50%); 
$green_1d: hsl(119, 72%, 36%); 
$green_2d: hsl(119, 72%, 25%); 
$green_3d: hsl(119, 72%, 20%); 
$green_4d: hsl(119, 72%, 12%); 

$purple2_4l: hsl(299, 36%, 88%); 
$purple2_3l: hsl(299, 36%, 80%); 
$purple2_2l: hsl(299, 36%, 75%); 
$purple2_1l: hsl(299, 36%, 64%); 
$purple2   : hsl(299, 36%, 50%); 
$purple2_1d: hsl(299, 36%, 36%); 
$purple2_2d: hsl(299, 36%, 25%); 
$purple2_3d: hsl(299, 36%, 20%); 
$purple2_4d: hsl(299, 36%, 12%); 

$purple_4l: hsl(299, 36%, 88%); 
$purple_3l: hsl(299, 36%, 80%); 
$purple_2l: hsl(299, 36%, 75%); 
$purple_1l: hsl(299, 36%, 64%); 
$purple   : hsl(299, 36%, 50%); 
$purple_1d: hsl(299, 36%, 36%); 
$purple_2d: hsl(299, 36%, 25%); 
$purple_3d: hsl(299, 36%, 20%); 
$purple_4d: hsl(299, 36%, 12%); 

$red_4l: hsl(358, 52%, 88%); 
$red_3l: hsl(358, 52%, 80%); 
$red_2l: hsl(358, 52%, 75%); 
$red_1l: hsl(358, 52%, 64%); 
$red   : hsl(358, 52%, 50%); 
$red_1d: hsl(358, 52%, 36%); 
$red_2d: hsl(358, 52%, 25%); 
$red_3d: hsl(358, 52%, 20%); 
$red_4d: hsl(358, 52%, 12%); 

А если я хочу откалибровать свою палитру?

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

Как читать палитру?

Палитра представляет собой двумерный набор цветов. По горизонтали, слева-направо, располагаются цвета по возрастанию параметра Hue в терминах цветовой модели HSL.

По вертикали, снизу-вверх, располагаются цвета по возрастанию параметра Lightness в терминах модели HSL.

Белыми маркерами обозначены исходные цвета. Серой рамкой обозначены «базовые» цвета, цвета, светлость которых равна 50%.

Почему некоторые цвета серые, а подписаны как red, yellow, green и т.п.?

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

• Валидация Проверка входных данных.
• Коэффициент релевантности Необходимо настроить коэффициент зависящий от всех трех параметров цвета, таким образом, чтобы подбирались более похожие цвета (согласно человеческому зрению).
• Дубли цветов Сейчас обновленные цвета остаются в палитре, тем самым образуются дубли, как бы не бага, но стоит поправить.
• Срезы по светлоте Сейчас срезы добавляются для внутри «крыльев» палитры, необходимо, по необходимости, добавлять срез вокруг базового среза, между крыльями.
• Маркеры На обновлённой палитре необходимо вывести маркеры брендовых цветов.
• Брендовые цвета На обновлённой палитре необходимо вывести брендовые цвета для сравнения входного и исходного цвета.
• Анализ и рекомендации Необходимо генерировать аналитику и рекомендации по изначальной и расширенной палитрам, какие цвета близки, какие срезы дублируются и т.п.
• HUSL Рассмотреть переход на цветовую модель HUSL: Color-Spaces-for-Human-Beings, husl-colors