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

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

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

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

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

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

5l

4l

3l

2l

1l

RED2

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

RED

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

YELLOW

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

GREEN

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

BLUE2

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

BLUE

1d

2d

3d

4d

5d

Еще пример Загрузить свою

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

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

$RED2_5l: hsl(7, 31%, 88%); 
$RED2_4l: hsl(7, 31%, 76%); 
$RED2_3l: hsl(7, 31%, 68%); 
$RED2_2l: hsl(7, 31%, 56%); 
$RED2_1l: hsl(7, 31%, 52%); 
$RED2   : hsl(7, 31%, 50%); 
$RED2_1d: hsl(7, 31%, 44%); 
$RED2_2d: hsl(7, 31%, 37%); 
$RED2_3d: hsl(7, 31%, 28%); 
$RED2_4d: hsl(7, 31%, 20%); 
$RED2_5d: hsl(7, 31%, 8%); 

$RED_5l: hsl(10, 38%, 88%); 
$RED_4l: hsl(10, 38%, 76%); 
$RED_3l: hsl(10, 38%, 68%); 
$RED_2l: hsl(10, 38%, 56%); 
$RED_1l: hsl(10, 38%, 52%); 
$RED   : hsl(10, 38%, 50%); 
$RED_1d: hsl(10, 38%, 44%); 
$RED_2d: hsl(10, 38%, 37%); 
$RED_3d: hsl(10, 38%, 28%); 
$RED_4d: hsl(10, 38%, 20%); 
$RED_5d: hsl(10, 38%, 8%); 

$YELLOW_5l: hsl(51, 53%, 88%); 
$YELLOW_4l: hsl(51, 53%, 76%); 
$YELLOW_3l: hsl(51, 53%, 68%); 
$YELLOW_2l: hsl(51, 53%, 56%); 
$YELLOW_1l: hsl(51, 53%, 52%); 
$YELLOW   : hsl(51, 53%, 50%); 
$YELLOW_1d: hsl(51, 53%, 44%); 
$YELLOW_2d: hsl(51, 53%, 37%); 
$YELLOW_3d: hsl(51, 53%, 28%); 
$YELLOW_4d: hsl(51, 53%, 20%); 
$YELLOW_5d: hsl(51, 53%, 8%); 

$GREEN_5l: hsl(95, 12%, 88%); 
$GREEN_4l: hsl(95, 12%, 76%); 
$GREEN_3l: hsl(95, 12%, 68%); 
$GREEN_2l: hsl(95, 12%, 56%); 
$GREEN_1l: hsl(95, 12%, 52%); 
$GREEN   : hsl(95, 12%, 50%); 
$GREEN_1d: hsl(95, 12%, 44%); 
$GREEN_2d: hsl(95, 12%, 37%); 
$GREEN_3d: hsl(95, 12%, 28%); 
$GREEN_4d: hsl(95, 12%, 20%); 
$GREEN_5d: hsl(95, 12%, 8%); 

$BLUE2_5l: hsl(229, 78%, 88%); 
$BLUE2_4l: hsl(229, 78%, 76%); 
$BLUE2_3l: hsl(229, 78%, 68%); 
$BLUE2_2l: hsl(229, 78%, 56%); 
$BLUE2_1l: hsl(229, 78%, 52%); 
$BLUE2   : hsl(229, 78%, 50%); 
$BLUE2_1d: hsl(229, 78%, 44%); 
$BLUE2_2d: hsl(229, 78%, 37%); 
$BLUE2_3d: hsl(229, 78%, 28%); 
$BLUE2_4d: hsl(229, 78%, 20%); 
$BLUE2_5d: hsl(229, 78%, 8%); 

$BLUE_5l: hsl(232, 75%, 88%); 
$BLUE_4l: hsl(232, 75%, 76%); 
$BLUE_3l: hsl(232, 75%, 68%); 
$BLUE_2l: hsl(232, 75%, 56%); 
$BLUE_1l: hsl(232, 75%, 52%); 
$BLUE   : hsl(232, 75%, 50%); 
$BLUE_1d: hsl(232, 75%, 44%); 
$BLUE_2d: hsl(232, 75%, 37%); 
$BLUE_3d: hsl(232, 75%, 28%); 
$BLUE_4d: hsl(232, 75%, 20%); 
$BLUE_5d: hsl(232, 75%, 8%);

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

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

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

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

5l

4l

3l

2l

1l

RED2

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

RED

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

YELLOW

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

GREEN

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

BLUE2

1d

2d

3d

4d

5d

5l

4l

3l

2l

1l

BLUE

1d

2d

3d

4d

5d

$RED2_5l: hsl(10, 38%, 88%); 
$RED2_4l: hsl(10, 38%, 76%); 
$RED2_3l: hsl(10, 38%, 68%); 
$RED2_2l: hsl(10, 38%, 56%); 
$RED2_1l: hsl(10, 38%, 52%); 
$RED2   : hsl(10, 38%, 50%); 
$RED2_1d: hsl(10, 38%, 44%); 
$RED2_2d: hsl(10, 38%, 37%); 
$RED2_3d: hsl(10, 38%, 28%); 
$RED2_4d: hsl(10, 38%, 20%); 
$RED2_5d: hsl(10, 38%, 8%); 

$RED_5l: hsl(10, 38%, 88%); 
$RED_4l: hsl(10, 38%, 76%); 
$RED_3l: hsl(10, 38%, 68%); 
$RED_2l: hsl(10, 38%, 56%); 
$RED_1l: hsl(10, 38%, 52%); 
$RED   : hsl(10, 38%, 50%); 
$RED_1d: hsl(10, 38%, 44%); 
$RED_2d: hsl(10, 38%, 37%); 
$RED_3d: hsl(10, 38%, 28%); 
$RED_4d: hsl(10, 38%, 20%); 
$RED_5d: hsl(10, 38%, 8%); 

$YELLOW_5l: hsl(51, 53%, 88%); 
$YELLOW_4l: hsl(51, 53%, 76%); 
$YELLOW_3l: hsl(51, 53%, 68%); 
$YELLOW_2l: hsl(51, 53%, 56%); 
$YELLOW_1l: hsl(51, 53%, 52%); 
$YELLOW   : hsl(51, 53%, 50%); 
$YELLOW_1d: hsl(51, 53%, 44%); 
$YELLOW_2d: hsl(51, 53%, 37%); 
$YELLOW_3d: hsl(51, 53%, 28%); 
$YELLOW_4d: hsl(51, 53%, 20%); 
$YELLOW_5d: hsl(51, 53%, 8%); 

$GREEN_5l: hsl(95, 12%, 88%); 
$GREEN_4l: hsl(95, 12%, 76%); 
$GREEN_3l: hsl(95, 12%, 68%); 
$GREEN_2l: hsl(95, 12%, 56%); 
$GREEN_1l: hsl(95, 12%, 52%); 
$GREEN   : hsl(95, 12%, 50%); 
$GREEN_1d: hsl(95, 12%, 44%); 
$GREEN_2d: hsl(95, 12%, 37%); 
$GREEN_3d: hsl(95, 12%, 28%); 
$GREEN_4d: hsl(95, 12%, 20%); 
$GREEN_5d: hsl(95, 12%, 8%); 

$BLUE2_5l: hsl(232, 78%, 88%); 
$BLUE2_4l: hsl(232, 78%, 76%); 
$BLUE2_3l: hsl(232, 78%, 68%); 
$BLUE2_2l: hsl(232, 78%, 56%); 
$BLUE2_1l: hsl(232, 78%, 52%); 
$BLUE2   : hsl(232, 78%, 50%); 
$BLUE2_1d: hsl(232, 78%, 44%); 
$BLUE2_2d: hsl(232, 78%, 37%); 
$BLUE2_3d: hsl(232, 78%, 28%); 
$BLUE2_4d: hsl(232, 78%, 20%); 
$BLUE2_5d: hsl(232, 78%, 8%); 

$BLUE_5l: hsl(232, 78%, 88%); 
$BLUE_4l: hsl(232, 78%, 76%); 
$BLUE_3l: hsl(232, 78%, 68%); 
$BLUE_2l: hsl(232, 78%, 56%); 
$BLUE_1l: hsl(232, 78%, 52%); 
$BLUE   : hsl(232, 78%, 50%); 
$BLUE_1d: hsl(232, 78%, 44%); 
$BLUE_2d: hsl(232, 78%, 37%); 
$BLUE_3d: hsl(232, 78%, 28%); 
$BLUE_4d: hsl(232, 78%, 20%); 
$BLUE_5d: hsl(232, 78%, 8%);

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

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

FAQ

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

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

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

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

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

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

ToDo

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