Экстрактор цветовой палитры изображения — получить HEX, RGB и HSL

Что делает экстрактор цветовой палитры

Этот инструмент точно отвечает на конкретный вопрос: если бы нужно было описать это изображение несколькими цветами, какими бы они были? Он декодирует ваше изображение в браузере, уменьшает его так, чтобы длинная сторона стала около 200 пикселей, и считывает необработанные данные пикселей с Canvas. Уменьшение — это не компромисс, ухудшающий точность: усреднение соседних пикселей при масштабировании устраняет артефакты JPEG и шум матрицы, которые иначе проявились бы как десятки почти одинаковых оттенков черного; также оно ограничивает весь анализ примерно сорока тысячами пикселей, так что он выполняется мгновенно даже на телефоне. Пиксели с альфа-каналом ниже 128 отбрасываются до начала любой обработки. Этот единственный шаг не даёт логотипу на прозрачном фоне выдавать черный цвет как основной — самая частая ошибка других экстракторов. Оставшиеся непрозрачные пиксели группируются методом медианного сечения. Метод рассматривает пиксели как облако в трёхмерном пространстве RGB, строит вокруг них параллелепипед, многократно выбирает тот, у которого самый широкий разброс цветов с учётом числа попавших в него пикселей, и разрезает его надвое в точке реального изменения значений цвета. Повторение до получения запрошенного числа областей даёт кластеры, которые следуют реальной структуре изображения, и каждый кластер выдаёт среднее значение попавших в него пикселей, а не произвольный центр корзины. Именно поэтому в результатах вы видите настоящие цвета вашего изображения, а не размытые серые тона, которые получаются при разбиении по фиксированной сетке. Затем корректируется порядок. Ранжирование только по количеству пикселей — это ловушка: фотография часто на сорок процентов состоит из неба или белого студийного фона, и грубый подсчет поставит их на первое место и скроет цвета, которые вам действительно нужны. Поэтому почти нейтральным, почти черным и почти белым кластерам при сортировке присваивается меньший вес, хотя они никогда не удаляются, и процент, отображаемый рядом с каждым образцом, всегда является истинной, немодифицированной долей пикселей. Наконец, для каждого образца рассчитывается цвет текста на основе его относительной яркости по WCAG 2.1. Выбирается черный или белый — тот, у которого выше коэффициент контрастности именно с этим цветом. При тесте используется яркость, а не светлота, поэтому он верно срабатывает для средних тонов там, где простое пороговое значение яркости даёт неверный ответ.