На главную

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

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

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

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

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

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

5l
4l
3l
2l
1l
green2
1d
2d
3d
4d
5d
5l
4l
3l
2l
1l
green
1d
2d
3d
4d
5d
5l
4l
3l
2l
1l
blue3
1d
2d
3d
4d
5d
5l
4l
3l
2l
1l
blue
1d
2d
3d
4d
5d
5l
4l
3l
2l
1l
blue2
1d
2d
3d
4d
5d
5l
4l
3l
2l
1l
purple
1d
2d
3d
4d
5d

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

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

$green2_5l: hsl(155, 51%, 93%); 
$green2_4l: hsl(155, 51%, 91%); 
$green2_3l: hsl(155, 51%, 78%); 
$green2_2l: hsl(155, 51%, 65%); 
$green2_1l: hsl(155, 51%, 59%); 
$green2   : hsl(155, 51%, 50%); 
$green2_1d: hsl(155, 51%, 45%); 
$green2_2d: hsl(155, 51%, 39%); 
$green2_3d: hsl(155, 51%, 26%); 
$green2_4d: hsl(155, 51%, 13%); 
$green2_5d: hsl(155, 51%, 11%); 

$green_5l: hsl(158, 58%, 93%); 
$green_4l: hsl(158, 58%, 91%); 
$green_3l: hsl(158, 58%, 78%); 
$green_2l: hsl(158, 58%, 65%); 
$green_1l: hsl(158, 58%, 59%); 
$green   : hsl(158, 58%, 50%); 
$green_1d: hsl(158, 58%, 45%); 
$green_2d: hsl(158, 58%, 39%); 
$green_3d: hsl(158, 58%, 26%); 
$green_4d: hsl(158, 58%, 13%); 
$green_5d: hsl(158, 58%, 11%); 

$blue3_5l: hsl(196, 77%, 93%); 
$blue3_4l: hsl(196, 77%, 91%); 
$blue3_3l: hsl(196, 77%, 78%); 
$blue3_2l: hsl(196, 77%, 65%); 
$blue3_1l: hsl(196, 77%, 59%); 
$blue3   : hsl(196, 77%, 50%); 
$blue3_1d: hsl(196, 77%, 45%); 
$blue3_2d: hsl(196, 77%, 39%); 
$blue3_3d: hsl(196, 77%, 26%); 
$blue3_4d: hsl(196, 77%, 13%); 
$blue3_5d: hsl(196, 77%, 11%); 

$blue_5l: hsl(198, 44%, 93%); 
$blue_4l: hsl(198, 44%, 91%); 
$blue_3l: hsl(198, 44%, 78%); 
$blue_2l: hsl(198, 44%, 65%); 
$blue_1l: hsl(198, 44%, 59%); 
$blue   : hsl(198, 44%, 50%); 
$blue_1d: hsl(198, 44%, 45%); 
$blue_2d: hsl(198, 44%, 39%); 
$blue_3d: hsl(198, 44%, 26%); 
$blue_4d: hsl(198, 44%, 13%); 
$blue_5d: hsl(198, 44%, 11%); 

$blue2_5l: hsl(199, 74%, 93%); 
$blue2_4l: hsl(199, 74%, 91%); 
$blue2_3l: hsl(199, 74%, 78%); 
$blue2_2l: hsl(199, 74%, 65%); 
$blue2_1l: hsl(199, 74%, 59%); 
$blue2   : hsl(199, 74%, 50%); 
$blue2_1d: hsl(199, 74%, 45%); 
$blue2_2d: hsl(199, 74%, 39%); 
$blue2_3d: hsl(199, 74%, 26%); 
$blue2_4d: hsl(199, 74%, 13%); 
$blue2_5d: hsl(199, 74%, 11%); 

$purple_5l: hsl(303, 91%, 93%); 
$purple_4l: hsl(303, 91%, 91%); 
$purple_3l: hsl(303, 91%, 78%); 
$purple_2l: hsl(303, 91%, 65%); 
$purple_1l: hsl(303, 91%, 59%); 
$purple   : hsl(303, 91%, 50%); 
$purple_1d: hsl(303, 91%, 45%); 
$purple_2d: hsl(303, 91%, 39%); 
$purple_3d: hsl(303, 91%, 26%); 
$purple_4d: hsl(303, 91%, 13%); 
$purple_5d: hsl(303, 91%, 11%); 

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

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

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

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

4l
3l
2l
1l
green2
1d
2d
3d
4d
4l
3l
2l
1l
green
1d
2d
3d
4d
4l
3l
2l
1l
blue3
1d
2d
3d
4d
4l
3l
2l
1l
blue
1d
2d
3d
4d
4l
3l
2l
1l
blue2
1d
2d
3d
4d
4l
3l
2l
1l
purple
1d
2d
3d
4d
$green2_4l: hsl(158, 51%, 93%); 
$green2_3l: hsl(158, 51%, 79%); 
$green2_2l: hsl(158, 51%, 65%); 
$green2_1l: hsl(158, 51%, 59%); 
$green2   : hsl(158, 51%, 50%); 
$green2_1d: hsl(158, 51%, 45%); 
$green2_2d: hsl(158, 51%, 39%); 
$green2_3d: hsl(158, 51%, 25%); 
$green2_4d: hsl(158, 51%, 11%); 

$green_4l: hsl(158, 51%, 93%); 
$green_3l: hsl(158, 51%, 79%); 
$green_2l: hsl(158, 51%, 65%); 
$green_1l: hsl(158, 51%, 59%); 
$green   : hsl(158, 51%, 50%); 
$green_1d: hsl(158, 51%, 45%); 
$green_2d: hsl(158, 51%, 39%); 
$green_3d: hsl(158, 51%, 25%); 
$green_4d: hsl(158, 51%, 11%); 

$blue3_4l: hsl(198, 77%, 93%); 
$blue3_3l: hsl(198, 77%, 79%); 
$blue3_2l: hsl(198, 77%, 65%); 
$blue3_1l: hsl(198, 77%, 59%); 
$blue3   : hsl(198, 77%, 50%); 
$blue3_1d: hsl(198, 77%, 45%); 
$blue3_2d: hsl(198, 77%, 39%); 
$blue3_3d: hsl(198, 77%, 25%); 
$blue3_4d: hsl(198, 77%, 11%); 

$blue_4l: hsl(198, 44%, 93%); 
$blue_3l: hsl(198, 44%, 79%); 
$blue_2l: hsl(198, 44%, 65%); 
$blue_1l: hsl(198, 44%, 59%); 
$blue   : hsl(198, 44%, 50%); 
$blue_1d: hsl(198, 44%, 45%); 
$blue_2d: hsl(198, 44%, 39%); 
$blue_3d: hsl(198, 44%, 25%); 
$blue_4d: hsl(198, 44%, 11%); 

$blue2_4l: hsl(198, 77%, 93%); 
$blue2_3l: hsl(198, 77%, 79%); 
$blue2_2l: hsl(198, 77%, 65%); 
$blue2_1l: hsl(198, 77%, 59%); 
$blue2   : hsl(198, 77%, 50%); 
$blue2_1d: hsl(198, 77%, 45%); 
$blue2_2d: hsl(198, 77%, 39%); 
$blue2_3d: hsl(198, 77%, 25%); 
$blue2_4d: hsl(198, 77%, 11%); 

$purple_4l: hsl(303, 91%, 93%); 
$purple_3l: hsl(303, 91%, 79%); 
$purple_2l: hsl(303, 91%, 65%); 
$purple_1l: hsl(303, 91%, 59%); 
$purple   : hsl(303, 91%, 50%); 
$purple_1d: hsl(303, 91%, 45%); 
$purple_2d: hsl(303, 91%, 39%); 
$purple_3d: hsl(303, 91%, 25%); 
$purple_4d: hsl(303, 91%, 11%); 

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

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

Веб-форма расчета палитры цветов
Исходная палитра
Отправка веб-формы расчета палитры цветов

FAQ

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

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

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

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

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

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

ToDo

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