Как получить палитру цветов из изображения?

Перетащите изображение на эту страницу. Основные цвета появятся сразу, упорядоченные по тому, какую часть изображения они занимают. Можно изменить их число, скопировать каждый в HEX, RGB или HSL и экспортировать набор в CSS, Tailwind или JSON.

Как узнать HEX-код цвета на картинке?

Загрузите картинку и щёлкните по нужной точке. Пипетка покажет значения этого пикселя в HEX, RGB и HSL, а щелчок по любому значению скопирует его.

Как вычисляются основные цвета?

Изображение уменьшается, а его пиксели кластеризуются методом k-means в цветовом пространстве OKLab, которое измеряет разницу цветов так, как её воспринимает человек. Средний цвет каждого кластера становится образцом, а порядок определяется долей пикселей в нём.

Почему цвета немного отличаются от другого инструмента?

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

Можно ли экспортировать палитру в Tailwind CSS?

Да. Выберите «Конфиг Tailwind v3», чтобы получить объект colors для tailwind.config.js, или «Tailwind v4 @theme» для CSS-конфигурации, и скопируйте или скачайте код.

Работает ли это с прозрачными PNG и логотипами?

Да. Пиксели, которые в основном прозрачны, пропускаются, поэтому палитра отражает видимое изображение, а не пустой фон.

Загружается ли моё изображение на сервер?

Нет. Изображение декодируется и анализируется в вашем браузере и не покидает ваше устройство.

Генератор палитры цветов по изображению

Pull the dominant colours out of any photo as HEX, RGB and HSL. Всё выполняется локально — ничего не отправляется на сервер.

Вход: PNG · JPEG · WebP · GIF · SVG
Выход: HEX · RGB · HSL · CSS · JSON

Перетащите изображение

Фото, скриншот или логотип: PNG, JPEG, WebP, GIF или SVG. Изображение можно и вставить.

Палитра цветов из любой картинки

Перетащите фото, скриншот или логотип, и этот генератор цветовой палитры выделит основные цвета, упорядочив их по тому, какую часть изображения занимает каждый. Выберите от 3 до 12 образцов, скопируйте любой в HEX, RGB или HSL, щёлкните по любой точке изображения, чтобы взять точный цвет пикселя, и экспортируйте палитру как CSS-переменные, SCSS, конфиг Tailwind, JSON или полосу PNG. Изображение анализируется на вашем устройстве и никуда не загружается.

Как извлечь цвета из изображения

Перетащите изображение на страницу, выберите его в файлах или вставьте прямо из буфера обмена. Подходят PNG, JPEG, WebP, GIF и SVG.
Укажите в поле Цвета нужное число образцов. Полоса над списком показывает каждый цвет в его доле изображения.
Щёлкните по значению, чтобы скопировать его в HEX, RGB или HSL.
Нужна конкретная точка, например цвет кнопки на скриншоте? Щёлкните по ней на изображении, а затем добавьте цвет в палитру кнопкой с плюсом.
Выберите формат экспорта и скопируйте код или скачайте палитру полосой PNG.

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

Фотография легко может содержать сотню тысяч разных цветов, и большинство из них — крошечные вариации друг друга. Чтобы найти те немногие, что важны, изображение уменьшается, и каждый пиксель объединяется с самыми похожими на него методом кластеризации k-средних (k-means). Каждая группа становится одним образцом: средним цветом её пикселей, а порядок определяется числом пикселей в группе.

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

Прозрачные пиксели пропускаются, так что логотип на прозрачном PNG даёт цвета логотипа, а не чёрный образец.

HEX, RGB и HSL: что копировать

Нужны OKLCH, CMYK или HSV либо более светлый оттенок одного из образцов? Вставьте значение HEX в конвертер цветов — он показывает все записи, а также светлые и тёмные оттенки и цветовые гармонии.

HEX: #2a9d8f. Шесть шестнадцатеричных цифр для красного, зелёного и синего. Самая компактная запись, которую принимают все дизайн-инструменты и CSS.
RGB: rgb(42, 157, 143). Те же три канала в виде чисел от 0 до 255. Удобно в коде, который выполняет вычисления с цветами, и в инструментах, где значения вводятся по отдельности.
HSL: hsl(173 58% 39%). Тон, насыщенность и светлота. Самая простая для ручной правки запись: увеличьте светлоту для состояния hover, уменьшите насыщенность для приглушённого варианта.

Форматы экспорта

CSS-переменные: блок :root с --palette-1, --palette-2 и так далее, готовый для любой таблицы стилей.
SCSS: переменные вида $palette-1 для проектов на Sass.
Конфиг Tailwind v3: объект theme.extend.colors для tailwind.config.js, который даёт классы вроде bg-palette-1.
Tailwind v4 @theme: пользовательские свойства --color-palette-1 для CSS-конфигурации Tailwind 4.
JSON: массив с HEX, RGB и HSL каждого цвета для скриптов и дизайн-токенов.
Полоса PNG: образцы рядом друг с другом в виде изображения — для мудборда, брифа или сообщения в чате.

Советы для полезной палитры

Меньше цветов для бренда, больше для иллюстрации. Пять-шесть образцов обычно передают настроение фото; увеличьте число до 10 или 12, если нужны и второстепенные тона.
Сначала обрежьте. Большое небо или белое поле страницы доминирует в результате. Обрежьте изображение до важной части, чтобы палитра отражала именно её.
Проверяйте цвета текста перед использованием. Цвета, взятые с фотографии, редко дают достаточный контраст для текста. Проверьте каждую пару, на которой будет текст, в проверке контрастности.
Для точных значений пользуйтесь пипеткой. Основные цвета — это средние значения. Если нужен точный цвет одного пикселя, например логотипа или элемента интерфейса на скриншоте, щёлкните по нему.

Часто задаваемые вопросы

Как получить палитру цветов из изображения?: Перетащите изображение на эту страницу. Основные цвета появятся сразу, упорядоченные по тому, какую часть изображения они занимают. Можно изменить их число, скопировать каждый в HEX, RGB или HSL и экспортировать набор в CSS, Tailwind или JSON.
Как узнать HEX-код цвета на картинке?: Загрузите картинку и щёлкните по нужной точке. Пипетка покажет значения этого пикселя в HEX, RGB и HSL, а щелчок по любому значению скопирует его.
Как вычисляются основные цвета?: Изображение уменьшается, а его пиксели кластеризуются методом k-means в цветовом пространстве OKLab, которое измеряет разницу цветов так, как её воспринимает человек. Средний цвет каждого кластера становится образцом, а порядок определяется долей пикселей в нём.
Почему цвета немного отличаются от другого инструмента?: Каждый инструмент группирует похожие пиксели по-своему, а образцы — это средние значения групп, а не отдельные пиксели. Начальные точки здесь выбираются детерминированно, поэтому одно и то же изображение всегда даёт один и тот же результат. Если нужен точный цвет пикселя, используйте пипетку.
Можно ли экспортировать палитру в Tailwind CSS?: Да. Выберите «Конфиг Tailwind v3», чтобы получить объект colors для tailwind.config.js, или «Tailwind v4 @theme» для CSS-конфигурации, и скопируйте или скачайте код.
Работает ли это с прозрачными PNG и логотипами?: Да. Пиксели, которые в основном прозрачны, пропускаются, поэтому палитра отражает видимое изображение, а не пустой фон.
Загружается ли моё изображение на сервер?: Нет. Изображение декодируется и анализируется в вашем браузере и не покидает ваше устройство.