Палитра цветов из изображения

Картинка остаётся у вас

Файл не уходит ни на наш сервер, ни на чужой: холст, разбор точек и подсчёт палитры работают в браузере. Отсюда две вещи, которых нет у сервисов с загрузкой. Предела размера файла у нас тоже нет, а ползунок числа цветов пересчитывает палитру сразу, без ожидания ответа сервера. Снимок экрана можно вставить из буфера, не сохраняя его в файл.

Цвета считаются так, как их видит глаз

Привычный способ собрать палитру — усреднять цвета по значениям красного, зелёного и синего. Беда в том, что расстояние между числами RGB не совпадает с тем, насколько цвета различны для человека: в зелёной части шкалы глаз ловит разницу там, где числа почти равны, а в тёмно-синей не видит её при заметном расхождении. Поэтому на фотографии заката такие сервисы выдают пять оттенков серо-коричневого.

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

Каждый цвет палитры есть на картинке

Центр группы — усреднённое значение, и такого цвета в кадре может не быть вовсе. Мы берём вместо него ближайшую к центру настоящую точку изображения. Разница видна, когда по палитре потом красят сайт: усреднённый оттенок способен выпасть за пределы охвата экрана и превратиться при пересчёте в соседний.

Доля цвета в кадре

Рядом с каждым цветом стоит его доля, а над списком — полоса, где ширина куска равна этой доле. Без неё непонятно, какой цвет в картинке главный: яркое пятно на четверть процента кадра бросается в глаза сильнее, чем фон, который занимает половину.

Сразу видно, каким текстом писать

Палитру чаще всего берут, чтобы покрасить сайт, и первый же вопрос — читается ли на этом фоне текст. Для каждого цвета мы считаем контраст с чёрным и белым и показываем, что выбрать и с каким запасом. Пороги взяты из WCAG 2.1: 4,5:1 для обычного текста, 3:1 для крупного, 7:1 для уровня AAA.

Точка, а не только палитра

Щелчок по картинке снимает цвет ровно из этой точки и добавляет его отдельным списком. Так забирают оттенок логотипа или конкретной детали, когда он не попал в общую палитру из-за малой площади.

Забрать в код

Готовая палитра выгружается набором CSS-переменных, строками SCSS, объектом JSON с долями и контрастом или простым списком HEX. Отдельной кнопкой палитра сохраняется картинкой: такую удобно приложить к макету или отправить в переписку. Нужен разбор одного цвета — рядом есть код цвета HTML с переводом между HEX, RGB, HSL и проверкой контраста пары.