Что такое экстрактор палитры изображения?

Это инструмент, который сводит доминирующие видимые цвета всего изображения к небольшой представительной палитре.

Можно ли копировать HEX, RGB или CSS-переменные?

Да. Копируйте каждое значение HEX или RGB, все значения HEX построчно или всю палитру как CSS-переменные.

Мое изображение загружается или сохраняется?

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

Почему палитра меньше выбранного размера?

В изображении может быть меньше уникальных видимых цветов, чем выбранный размер. Инструмент не дублирует цвета и игнорирует фактически прозрачные пиксели.

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

Загрузите, перетащите или вставьте фотографию, снимок экрана, логотип или иллюстрацию, чтобы извлечь палитру из всего изображения. Инструмент объединяет доминирующие видимые цвета в палитру из 3, 5 или 8 цветов, а не выбирает один пиксель. Копируйте отдельные значения HEX и RGB, все значения HEX построчно или готовый набор CSS-переменных. Изображение обрабатывается локально в браузере и никогда не загружается в ColourPicker.app.

Загрузите изображение

Выберите файл, перетащите его сюда или вставьте изображение из буфера обмена.

Также можно вставить снимок экрана с помощью Ctrl+V или Command+V.

Изображение остается на вашем устройстве и обрабатывается только в этом браузере.

Другие инструменты

Picker

Выбор цвета

Загрузите изображение и кликните, чтобы извлечь цветовые коды HEX, RGB и HSL.

HEXRGBHSLImage

Converter

Конвертер цветов

Мгновенно конвертируйте цвета между HEX, RGB и HSL.

HEXRGBHSL

Checker

Проверка контрастности

Проверьте коэффициенты контрастности цветов по стандартам WCAG AA и AAA.

WCAGAAAAA

Generator

Генератор палитр

Создайте гармоничные цветовые палитры из любого базового цвета.

HarmonyHSLHEX

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

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

Добавьте фотографию, логотип, иллюстрацию, снимок экрана или другое изображение, поддерживаемое браузером.
После загрузки автоматически создается палитра из пяти доминирующих цветов.
Выберите 3, 5 или 8 цветов, если нужна более краткая или более подробная ссылка на цвета.
Копируйте отдельные цвета или всю палитру для следующего этапа дизайна или разработки.

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

Доминирующие цвета, а не один точный пиксель

Эта страница предназначена для многоцветного описания всей фотографии, иллюстрации, логотипа или снимка экрана. Вы получаете цвета, определяющие изображение в целом, а не точное значение конкретной точки.

Если нужен цвет одного конкретного пикселя, используйте выбрать один точный цвет из изображения. Чтобы построить дополнительные, аналоговые или другие теоретические отношения из базового цвета, можно создать цветовую гармонию из базового цвета. Этот экстрактор только обобщает цвета, уже видимые в изображении.

Копируйте палитру как HEX, RGB или CSS-переменные

У каждого образца есть значения HEX и RGB с отдельными кнопками копирования. Можно также скопировать все значения HEX списком, по одному цвету в строке. Это удобно для заметок, визуальных референсов и мудбордов.

Кнопка CSS-переменных создает блок :root с именами вроде --cp-1, --cp-2 и --cp-3. Используйте его как быстрый старт для прототипа или таблицы стилей, а затем отдельно проверьте контрастность и доступность.

Изображение остается приватным

Вся обработка происходит в вашем браузере. Файл не отправляется в ColourPicker.app или внешний сервис обработки изображений и не хранится на сервере. Локальный предварительный просмотр временный и освобождается при замене изображения или уходе со страницы.

Анализируется только видимая цветовая информация. Фактически прозрачные пиксели игнорируются, поэтому прозрачный фон, например у PNG-логотипа, не становится ложным доминирующим цветом.

Почему изображение может вернуть меньше цветов

Выбор 3, 5 или 8 цветов задает максимум, а не обещает дополнительные образцы. Простой значок, плоская графика, двухцветный логотип или почти прозрачное изображение могут содержать меньше уникальных видимых цветов, чем выбранный размер.

В таком случае инструмент показывает меньшую, реальную палитру. Он не дублирует цвета и не придумывает новые оттенки только для достижения заданного количества.

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

Как извлечь палитру цветов из изображения?: Загрузите, перетащите или вставьте изображение. Инструмент группирует видимые доминирующие цвета в палитру из 3, 5 или 8 цветов.
Что такое экстрактор палитры изображения?: Это инструмент, который сводит доминирующие видимые цвета всего изображения к небольшой представительной палитре.
Можно ли копировать HEX, RGB или CSS-переменные?: Да. Копируйте каждое значение HEX или RGB, все значения HEX построчно или всю палитру как CSS-переменные.
Мое изображение загружается или сохраняется?: Нет. Изображение декодируется и анализируется локально в браузере и не отправляется на сервер.
Почему палитра меньше выбранного размера?: В изображении может быть меньше уникальных видимых цветов, чем выбранный размер. Инструмент не дублирует цвета и игнорирует фактически прозрачные пиксели.