Палитра из картинки

Инструмент вытаскивает из картинки её главные цвета: загрузите фото товара, логотип или скриншот, выберите от 3 до 10 оттенков, и рядом появятся образцы с долей в кадре, кодами HEX и RGB. Доля показывает, сколько кадра занимает оттенок, и по ней видно, какой цвет главный, а какой акцентный. Клик по цвету копирует HEX, кнопка экспорта отдаёт все цвета готовым блоком CSS-переменных, а таблица контраста подсказывает, белым или чёрным текстом писать на каждом из них. Нужен дизайнерам лендингов и презентаций, тем, кто подбирает краску под фото интерьера, и всем, кому нужно «как на картинке».

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

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

Скопируйте блок :root с переменными --color-1 … --color-n в CSS и используйте var(--color-1); для текста берите цвета, у которых контраст с белым или чёрным не ниже 4,5. Палитра снимается с уменьшенной копии, поэтому шум и мелкая фактура на результат не влияют, зато сжатие JPG может слегка сдвинуть оттенки по сравнению с исходником. Оттенки и тона от найденного цвета строит генератор оттенков, перевод между HEX, RGB и HSL и проверку пар делает конвертер цветов.