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

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

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

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

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

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

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

$green_5l: hsl(87, 17%, 89%); 
$green_4l: hsl(87, 17%, 86%); 
$green_3l: hsl(87, 17%, 85%); 
$green_2l: hsl(87, 17%, 79%); 
$green_1l: hsl(87, 17%, 71%); 
$green   : hsl(87, 17%, 50%); 
$green_1d: hsl(87, 17%, 32%); 
$green_2d: hsl(87, 17%, 29%); 
$green_3d: hsl(87, 17%, 21%); 
$green_4d: hsl(87, 17%, 15%); 
$green_5d: hsl(87, 17%, 11%); 

$green3_5l: hsl(150, 15%, 89%); 
$green3_4l: hsl(150, 15%, 86%); 
$green3_3l: hsl(150, 15%, 85%); 
$green3_2l: hsl(150, 15%, 79%); 
$green3_1l: hsl(150, 15%, 71%); 
$green3   : hsl(150, 15%, 50%); 
$green3_1d: hsl(150, 15%, 32%); 
$green3_2d: hsl(150, 15%, 29%); 
$green3_3d: hsl(150, 15%, 21%); 
$green3_4d: hsl(150, 15%, 15%); 
$green3_5d: hsl(150, 15%, 11%); 

$green2_5l: hsl(153, 22%, 89%); 
$green2_4l: hsl(153, 22%, 86%); 
$green2_3l: hsl(153, 22%, 85%); 
$green2_2l: hsl(153, 22%, 79%); 
$green2_1l: hsl(153, 22%, 71%); 
$green2   : hsl(153, 22%, 50%); 
$green2_1d: hsl(153, 22%, 32%); 
$green2_2d: hsl(153, 22%, 29%); 
$green2_3d: hsl(153, 22%, 21%); 
$green2_4d: hsl(153, 22%, 15%); 
$green2_5d: hsl(153, 22%, 11%); 

$cian_5l: hsl(187, 37%, 89%); 
$cian_4l: hsl(187, 37%, 86%); 
$cian_3l: hsl(187, 37%, 85%); 
$cian_2l: hsl(187, 37%, 79%); 
$cian_1l: hsl(187, 37%, 71%); 
$cian   : hsl(187, 37%, 50%); 
$cian_1d: hsl(187, 37%, 32%); 
$cian_2d: hsl(187, 37%, 29%); 
$cian_3d: hsl(187, 37%, 21%); 
$cian_4d: hsl(187, 37%, 15%); 
$cian_5d: hsl(187, 37%, 11%); 

$blue2_5l: hsl(190, 34%, 89%); 
$blue2_4l: hsl(190, 34%, 86%); 
$blue2_3l: hsl(190, 34%, 85%); 
$blue2_2l: hsl(190, 34%, 79%); 
$blue2_1l: hsl(190, 34%, 71%); 
$blue2   : hsl(190, 34%, 50%); 
$blue2_1d: hsl(190, 34%, 32%); 
$blue2_2d: hsl(190, 34%, 29%); 
$blue2_3d: hsl(190, 34%, 21%); 
$blue2_4d: hsl(190, 34%, 15%); 
$blue2_5d: hsl(190, 34%, 11%); 

$blue_5l: hsl(224, 28%, 89%); 
$blue_4l: hsl(224, 28%, 86%); 
$blue_3l: hsl(224, 28%, 85%); 
$blue_2l: hsl(224, 28%, 79%); 
$blue_1l: hsl(224, 28%, 71%); 
$blue   : hsl(224, 28%, 50%); 
$blue_1d: hsl(224, 28%, 32%); 
$blue_2d: hsl(224, 28%, 29%); 
$blue_3d: hsl(224, 28%, 21%); 
$blue_4d: hsl(224, 28%, 15%); 
$blue_5d: hsl(224, 28%, 11%); 

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

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

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

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

$green_3l: hsl(87, 17%, 86%); 
$green_2l: hsl(87, 17%, 79%); 
$green_1l: hsl(87, 17%, 68%); 
$green   : hsl(87, 17%, 50%); 
$green_1d: hsl(87, 17%, 32%); 
$green_2d: hsl(87, 17%, 21%); 
$green_3d: hsl(87, 17%, 14%); 

$green3_3l: hsl(153, 22%, 86%); 
$green3_2l: hsl(153, 22%, 79%); 
$green3_1l: hsl(153, 22%, 68%); 
$green3   : hsl(153, 22%, 50%); 
$green3_1d: hsl(153, 22%, 32%); 
$green3_2d: hsl(153, 22%, 21%); 
$green3_3d: hsl(153, 22%, 14%); 

$green2_3l: hsl(153, 22%, 86%); 
$green2_2l: hsl(153, 22%, 79%); 
$green2_1l: hsl(153, 22%, 68%); 
$green2   : hsl(153, 22%, 50%); 
$green2_1d: hsl(153, 22%, 32%); 
$green2_2d: hsl(153, 22%, 21%); 
$green2_3d: hsl(153, 22%, 14%); 

$cian_3l: hsl(190, 37%, 86%); 
$cian_2l: hsl(190, 37%, 79%); 
$cian_1l: hsl(190, 37%, 68%); 
$cian   : hsl(190, 37%, 50%); 
$cian_1d: hsl(190, 37%, 32%); 
$cian_2d: hsl(190, 37%, 21%); 
$cian_3d: hsl(190, 37%, 14%); 

$blue2_3l: hsl(190, 37%, 86%); 
$blue2_2l: hsl(190, 37%, 79%); 
$blue2_1l: hsl(190, 37%, 68%); 
$blue2   : hsl(190, 37%, 50%); 
$blue2_1d: hsl(190, 37%, 32%); 
$blue2_2d: hsl(190, 37%, 21%); 
$blue2_3d: hsl(190, 37%, 14%); 

$blue_3l: hsl(224, 28%, 86%); 
$blue_2l: hsl(224, 28%, 79%); 
$blue_1l: hsl(224, 28%, 68%); 
$blue   : hsl(224, 28%, 50%); 
$blue_1d: hsl(224, 28%, 32%); 
$blue_2d: hsl(224, 28%, 21%); 
$blue_3d: hsl(224, 28%, 14%); 

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

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

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

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

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

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

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

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

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