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

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

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

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

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

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

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

$green2_4l: hsl(89, 23%, 86%); 
$green2_3l: hsl(89, 23%, 80%); 
$green2_2l: hsl(89, 23%, 72%); 
$green2_1l: hsl(89, 23%, 61%); 
$green2   : hsl(89, 23%, 50%); 
$green2_1d: hsl(89, 23%, 35%); 
$green2_2d: hsl(89, 23%, 24%); 
$green2_3d: hsl(89, 23%, 16%); 
$green2_4d: hsl(89, 23%, 10%); 

$green_4l: hsl(92, 30%, 86%); 
$green_3l: hsl(92, 30%, 80%); 
$green_2l: hsl(92, 30%, 72%); 
$green_1l: hsl(92, 30%, 61%); 
$green   : hsl(92, 30%, 50%); 
$green_1d: hsl(92, 30%, 35%); 
$green_2d: hsl(92, 30%, 24%); 
$green_3d: hsl(92, 30%, 16%); 
$green_4d: hsl(92, 30%, 10%); 

$purple_4l: hsl(269, 15%, 86%); 
$purple_3l: hsl(269, 15%, 80%); 
$purple_2l: hsl(269, 15%, 72%); 
$purple_1l: hsl(269, 15%, 61%); 
$purple   : hsl(269, 15%, 50%); 
$purple_1d: hsl(269, 15%, 35%); 
$purple_2d: hsl(269, 15%, 24%); 
$purple_3d: hsl(269, 15%, 16%); 
$purple_4d: hsl(269, 15%, 10%); 

$purple3_4l: hsl(278, 50%, 86%); 
$purple3_3l: hsl(278, 50%, 80%); 
$purple3_2l: hsl(278, 50%, 72%); 
$purple3_1l: hsl(278, 50%, 61%); 
$purple3   : hsl(278, 50%, 50%); 
$purple3_1d: hsl(278, 50%, 35%); 
$purple3_2d: hsl(278, 50%, 24%); 
$purple3_3d: hsl(278, 50%, 16%); 
$purple3_4d: hsl(278, 50%, 10%); 

$purple2_4l: hsl(281, 47%, 86%); 
$purple2_3l: hsl(281, 47%, 80%); 
$purple2_2l: hsl(281, 47%, 72%); 
$purple2_1l: hsl(281, 47%, 61%); 
$purple2   : hsl(281, 47%, 50%); 
$purple2_1d: hsl(281, 47%, 35%); 
$purple2_2d: hsl(281, 47%, 24%); 
$purple2_3d: hsl(281, 47%, 16%); 
$purple2_4d: hsl(281, 47%, 10%); 

$pink_4l: hsl(341, 41%, 86%); 
$pink_3l: hsl(341, 41%, 80%); 
$pink_2l: hsl(341, 41%, 72%); 
$pink_1l: hsl(341, 41%, 61%); 
$pink   : hsl(341, 41%, 50%); 
$pink_1d: hsl(341, 41%, 35%); 
$pink_2d: hsl(341, 41%, 24%); 
$pink_3d: hsl(341, 41%, 16%); 
$pink_4d: hsl(341, 41%, 10%); 

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

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

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

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

$green2_4l: hsl(92, 30%, 86%); 
$green2_3l: hsl(92, 30%, 80%); 
$green2_2l: hsl(92, 30%, 72%); 
$green2_1l: hsl(92, 30%, 61%); 
$green2   : hsl(92, 30%, 50%); 
$green2_1d: hsl(92, 30%, 35%); 
$green2_2d: hsl(92, 30%, 24%); 
$green2_3d: hsl(92, 30%, 16%); 
$green2_4d: hsl(92, 30%, 10%); 

$green_4l: hsl(92, 30%, 86%); 
$green_3l: hsl(92, 30%, 80%); 
$green_2l: hsl(92, 30%, 72%); 
$green_1l: hsl(92, 30%, 61%); 
$green   : hsl(92, 30%, 50%); 
$green_1d: hsl(92, 30%, 35%); 
$green_2d: hsl(92, 30%, 24%); 
$green_3d: hsl(92, 30%, 16%); 
$green_4d: hsl(92, 30%, 10%); 

$purple_4l: hsl(269, 15%, 86%); 
$purple_3l: hsl(269, 15%, 80%); 
$purple_2l: hsl(269, 15%, 72%); 
$purple_1l: hsl(269, 15%, 61%); 
$purple   : hsl(269, 15%, 50%); 
$purple_1d: hsl(269, 15%, 35%); 
$purple_2d: hsl(269, 15%, 24%); 
$purple_3d: hsl(269, 15%, 16%); 
$purple_4d: hsl(269, 15%, 10%); 

$purple3_4l: hsl(281, 47%, 86%); 
$purple3_3l: hsl(281, 47%, 80%); 
$purple3_2l: hsl(281, 47%, 72%); 
$purple3_1l: hsl(281, 47%, 61%); 
$purple3   : hsl(281, 47%, 50%); 
$purple3_1d: hsl(281, 47%, 35%); 
$purple3_2d: hsl(281, 47%, 24%); 
$purple3_3d: hsl(281, 47%, 16%); 
$purple3_4d: hsl(281, 47%, 10%); 

$purple2_4l: hsl(281, 47%, 86%); 
$purple2_3l: hsl(281, 47%, 80%); 
$purple2_2l: hsl(281, 47%, 72%); 
$purple2_1l: hsl(281, 47%, 61%); 
$purple2   : hsl(281, 47%, 50%); 
$purple2_1d: hsl(281, 47%, 35%); 
$purple2_2d: hsl(281, 47%, 24%); 
$purple2_3d: hsl(281, 47%, 16%); 
$purple2_4d: hsl(281, 47%, 10%); 

$pink_4l: hsl(341, 41%, 86%); 
$pink_3l: hsl(341, 41%, 80%); 
$pink_2l: hsl(341, 41%, 72%); 
$pink_1l: hsl(341, 41%, 61%); 
$pink   : hsl(341, 41%, 50%); 
$pink_1d: hsl(341, 41%, 35%); 
$pink_2d: hsl(341, 41%, 24%); 
$pink_3d: hsl(341, 41%, 16%); 
$pink_4d: hsl(341, 41%, 10%); 

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

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

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

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

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

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

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

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

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