Доминирующие цвета в виде CSS-переменных

Загрузите изображение и сразу получите блок CSS-переменных (:root {}) с его доминирующими цветами, готовый для вставки в вашу таблицу стилей.

Пример:
Перетащите сюда изображение или нажмите, чтобы выбрать (до 25 МБ).

Как это работает

Инструмент анализирует распределение цветов изображения по гистограмме и выбирает самые частые оттенки, упорядочивая их от наиболее до наименее доминирующего. Затем каждый цвет оформляется в виде пронумерованной CSS-переменной (--color-1, --color-2 и т. д.) в готовом к копированию блоке :root.

Можно ли переименовать сгенерированные переменные?

Да, универсальное имя --color-N — лишь нейтральная отправная точка: после вставки в таблицу стилей переименуйте каждую переменную по её реальному назначению (например, --color-primary, --color-accent), чтобы код был читаемее.

Сколько цветов нужно извлекать?

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

100% локальная обработка: извлечение палитры выполняется целиком в вашем браузере — ваше изображение никогда не отправляется на сервер.