Палитра цветов из изображения: основные цвета с кодами

Как пользоваться

Нажмите Выбрать фото или перетащите изображение в поле. Фото читается на вашем устройстве.
Выберите Число цветов, от 5 до 10. Для насыщенного деталями снимка нужно больше цветов.
Прочитайте каждый цвет: его шестнадцатеричный код, значения RGB и HSL и долю в изображении. Нажмите кнопку копирования рядом с цветом, чтобы скопировать его шестнадцатеричный код.
В разделе Экспорт палитры используйте Копировать как переменные CSS, Копировать списком или Скачать образцы (PNG).

Как находятся цвета

Каждый пиксель переводится в CIE L*a*b* — цветовое пространство, в котором расстояние между двумя цветами близко к тому, насколько они различаются для глаза. Затем пиксели группируются в выбранное число цветов методом k-средних, который ставит центр каждой группы так, чтобы пиксели были как можно ближе к своему центру.

Начальные центры выбираются методом k-means++ с фиксированным начальным значением, поэтому одно и то же фото всегда даёт одну и ту же палитру. Каждый цвет — это среднее пикселей его группы, а доля — число этих пикселей, делённое на все пиксели.

Пиксель → (L*, a*, b*)
Группы: каждый пиксель присоединяется к ближайшему центру; центры — средние их пикселей
Цвет = средний RGB группы; доля = пикселей в группе ÷ все пиксели

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

Коды, доли и что они значат

Шестнадцатеричный код — это цвет, записанный тремя парами шестнадцатеричных цифр для красного, зелёного и синего; значения RGB — те же числа в десятичной записи. HSL задаёт тон как угол на цветовом круге (0 — красный, 120 — зелёный, 240 — синий), насыщенность как силу цвета и светлоту как то, насколько он светлый.

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

Скопируйте переменные CSS, чтобы использовать цвета на веб-странице или в макете: каждый цвет станет --color-1, --color-2 и так далее.
Полоса PNG нужна для доски вдохновения или распечатки: один образец на цвет, под ним его шестнадцатеричный код.

Пример расчёта: блоки красного, синего и зелёного

Тестовое изображение из 50 красных, 30 синих и 20 зелёных пикселей даёт ровно три цвета, потому что каждый блок — один ровный цвет. Если запросить шесть цветов, инструмент всё равно вернёт эти три и не придумает лишних.

Список упорядочен от самой большой доли, а каждый код — точный цвет своего блока.

Цвет	Код	RGB	HSL	Доля
Красный	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	50,0 %
Синий	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)	30,0 %
Зелёный	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	20,0 %

Частые вопросы

Точны ли цвета относительно фото?

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

Почему палитра одинакова при каждом запуске?

Группировка начинается с фиксированного начального значения, поэтому одно и то же фото и одно и то же число цветов всегда дают одну палитру. Изменение фото или числа цветов меняет результат.

Сколько цветов выбрать?

Пять цветов передают основное настроение большинства фото. Берите 8–10 для насыщенного деталями снимка или когда нужно больше оттенков для картины или дизайна.

Загружается ли моё фото куда-нибудь?

Нет. Фото читает ваш браузер, палитра вычисляется на вашем устройстве, и ничего никуда не отправляется.

В чём разница между HEX, RGB и HSL?

Они описывают один и тот же цвет тремя способами: HEX и RGB перечисляют количества красного, зелёного и синего — в шестнадцатеричной и в десятичной записи. HSL описывает тон, насыщенность и светлоту, что проще регулировать на глаз.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..