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

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

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

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

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

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

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

$ORANGE2_4l: hsl(42, 16%, 88%); 
$ORANGE2_3l: hsl(42, 16%, 72%); 
$ORANGE2_2l: hsl(42, 16%, 61%); 
$ORANGE2_1l: hsl(42, 16%, 51%); 
$ORANGE2   : hsl(42, 16%, 50%); 
$ORANGE2_1d: hsl(42, 16%, 49%); 
$ORANGE2_2d: hsl(42, 16%, 39%); 
$ORANGE2_3d: hsl(42, 16%, 28%); 
$ORANGE2_4d: hsl(42, 16%, 12%); 

$ORANGE_4l: hsl(45, 23%, 88%); 
$ORANGE_3l: hsl(45, 23%, 72%); 
$ORANGE_2l: hsl(45, 23%, 61%); 
$ORANGE_1l: hsl(45, 23%, 51%); 
$ORANGE   : hsl(45, 23%, 50%); 
$ORANGE_1d: hsl(45, 23%, 49%); 
$ORANGE_2d: hsl(45, 23%, 39%); 
$ORANGE_3d: hsl(45, 23%, 28%); 
$ORANGE_4d: hsl(45, 23%, 12%); 

$GREEN_4l: hsl(131, 67%, 88%); 
$GREEN_3l: hsl(131, 67%, 72%); 
$GREEN_2l: hsl(131, 67%, 61%); 
$GREEN_1l: hsl(131, 67%, 51%); 
$GREEN   : hsl(131, 67%, 50%); 
$GREEN_1d: hsl(131, 67%, 49%); 
$GREEN_2d: hsl(131, 67%, 39%); 
$GREEN_3d: hsl(131, 67%, 28%); 
$GREEN_4d: hsl(131, 67%, 12%); 

$BLUE_4l: hsl(245, 78%, 88%); 
$BLUE_3l: hsl(245, 78%, 72%); 
$BLUE_2l: hsl(245, 78%, 61%); 
$BLUE_1l: hsl(245, 78%, 51%); 
$BLUE   : hsl(245, 78%, 50%); 
$BLUE_1d: hsl(245, 78%, 49%); 
$BLUE_2d: hsl(245, 78%, 39%); 
$BLUE_3d: hsl(245, 78%, 28%); 
$BLUE_4d: hsl(245, 78%, 12%); 

$PINK2_4l: hsl(322, 58%, 88%); 
$PINK2_3l: hsl(322, 58%, 72%); 
$PINK2_2l: hsl(322, 58%, 61%); 
$PINK2_1l: hsl(322, 58%, 51%); 
$PINK2   : hsl(322, 58%, 50%); 
$PINK2_1d: hsl(322, 58%, 49%); 
$PINK2_2d: hsl(322, 58%, 39%); 
$PINK2_3d: hsl(322, 58%, 28%); 
$PINK2_4d: hsl(322, 58%, 12%); 

$PINK_4l: hsl(325, 55%, 88%); 
$PINK_3l: hsl(325, 55%, 72%); 
$PINK_2l: hsl(325, 55%, 61%); 
$PINK_1l: hsl(325, 55%, 51%); 
$PINK   : hsl(325, 55%, 50%); 
$PINK_1d: hsl(325, 55%, 49%); 
$PINK_2d: hsl(325, 55%, 39%); 
$PINK_3d: hsl(325, 55%, 28%); 
$PINK_4d: hsl(325, 55%, 12%); 

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

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

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

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

$ORANGE2_3l: hsl(45, 16%, 90%); 
$ORANGE2_2l: hsl(45, 16%, 74%); 
$ORANGE2_1l: hsl(45, 16%, 61%); 
$ORANGE2   : hsl(45, 16%, 50%); 
$ORANGE2_1d: hsl(45, 16%, 41%); 
$ORANGE2_2d: hsl(45, 16%, 28%); 
$ORANGE2_3d: hsl(45, 16%, 12%); 

$ORANGE_3l: hsl(45, 16%, 90%); 
$ORANGE_2l: hsl(45, 16%, 74%); 
$ORANGE_1l: hsl(45, 16%, 61%); 
$ORANGE   : hsl(45, 16%, 50%); 
$ORANGE_1d: hsl(45, 16%, 41%); 
$ORANGE_2d: hsl(45, 16%, 28%); 
$ORANGE_3d: hsl(45, 16%, 12%); 

$GREEN_3l: hsl(131, 67%, 90%); 
$GREEN_2l: hsl(131, 67%, 74%); 
$GREEN_1l: hsl(131, 67%, 61%); 
$GREEN   : hsl(131, 67%, 50%); 
$GREEN_1d: hsl(131, 67%, 41%); 
$GREEN_2d: hsl(131, 67%, 28%); 
$GREEN_3d: hsl(131, 67%, 12%); 

$BLUE_3l: hsl(245, 78%, 90%); 
$BLUE_2l: hsl(245, 78%, 74%); 
$BLUE_1l: hsl(245, 78%, 61%); 
$BLUE   : hsl(245, 78%, 50%); 
$BLUE_1d: hsl(245, 78%, 41%); 
$BLUE_2d: hsl(245, 78%, 28%); 
$BLUE_3d: hsl(245, 78%, 12%); 

$PINK2_3l: hsl(325, 55%, 90%); 
$PINK2_2l: hsl(325, 55%, 74%); 
$PINK2_1l: hsl(325, 55%, 61%); 
$PINK2   : hsl(325, 55%, 50%); 
$PINK2_1d: hsl(325, 55%, 41%); 
$PINK2_2d: hsl(325, 55%, 28%); 
$PINK2_3d: hsl(325, 55%, 12%); 

$PINK_3l: hsl(325, 55%, 90%); 
$PINK_2l: hsl(325, 55%, 74%); 
$PINK_1l: hsl(325, 55%, 61%); 
$PINK   : hsl(325, 55%, 50%); 
$PINK_1d: hsl(325, 55%, 41%); 
$PINK_2d: hsl(325, 55%, 28%); 
$PINK_3d: hsl(325, 55%, 12%); 

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

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

Веб-форма расчета палитры цветов

Исходная палитра

Отправка веб-формы расчета палитры цветов

Калибруем!

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

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

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

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

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

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

Валидация

проверка входных данных;

Коэффициент релевантности

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

Дубли цветов

cейчас обновленные цвета остаются в палитре, тем самым образуются дубли, как бы не бага, но стоит поправить;

Срезы по светлоте

сейчас срезы добавляются для внутри «крыльев» палитры, необходимо, по необходимости, добавлять срез вокруг базового среза, между крыльями;

Маркеры

на обновлённой палитре необходимо вывести маркеры брендовых цветов;

Брендовые цвета

на обновлённой палитре необходимо вывести брендовые цвета для сравнения входного и исходного цвета;

Анализ и рекомендации

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

HUSL

рассмотреть переход на цветовую модель HUSL: Color-Spaces-for-Human-Beings, husl-colors.