Калибратор палитры цветов (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%);
А если я хочу откалибровать свою палитру?
Для этого и создан данный сервис! Введите цвета вашей палитры в форму, которая расположена ниже, и нажимайте кнопку «Калибровать!». Калибратор рассчитает дополнительные цвета вашей палитры в двух вариантах, с сохранением начальных цветов и без.
FAQ
Как читать палитру?
Палитра представляет собой двумерный набор цветов. По горизонтали, слева-направо, располагаются цвета по возрастанию параметра Hue
в терминах цветовой модели HSL.
По вертикали, снизу-вверх, располагаются цвета по возрастанию параметра Lightness
в терминах модели HSL
.
Белыми маркерами обозначены исходные цвета. Серой рамкой обозначены «базовые» цвета, цвета, светлость которых равна 50%.
Почему некоторые цвета серые, а подписаны как red, yellow, green и т.п.?
Цвета на самом деле такие, как указано, просто их насыщенность близка к нулю. Если сказать просто, то насыщенность, она же Saturation
, отвечает за то, сколько этого самого цвета есть в цвете, это некоторая «плотность» цвета.
ToDo
- Валидация Проверка входных данных.
- Коэффициент релевантности Необходимо настроить коэффициент зависящий от всех трех параметров цвета, таким образом, чтобы подбирались более похожие цвета (согласно человеческому зрению).
- Дубли цветов Сейчас обновленные цвета остаются в палитре, тем самым образуются дубли, как бы не бага, но стоит поправить.
- Срезы по светлоте Сейчас срезы добавляются для внутри «крыльев» палитры, необходимо, по необходимости, добавлять срез вокруг базового среза, между крыльями.
- Маркеры На обновлённой палитре необходимо вывести маркеры брендовых цветов.
- Брендовые цвета На обновлённой палитре необходимо вывести брендовые цвета для сравнения входного и исходного цвета.
- Анализ и рекомендации Необходимо генерировать аналитику и рекомендации по изначальной и расширенной палитрам, какие цвета близки, какие срезы дублируются и т.п.
- HUSL Рассмотреть переход на цветовую модель HUSL: Color-Spaces-for-Human-Beings, husl-colors