Color Picker и Extractor Palette — выбирайте цвета из изображения

Загрузите любую фотографию, выберите цвет пикселя (HEX / RGB / HSL) или автоматически извлечь доминирующую палитру. Скачайте как JSON или CSS переменные.

Отбросьте изображение, чтобы извлечь его палитру

О Color Picker

Квантует изображение в запрошенное количество доминирующих цветов с помощью 4-битного распределения на канал, затем сортирует по частоте. Работает полностью в браузере — изображение никогда не покидает устройство.

Продолжайте улучшать свои изображения

Выведите редактирование фотографий на новый уровень с помощью этих популярных инструментов

📝

Добавьте текст к изображению

Добавляйте подписи и заголовки к улучшенной фотографии

🖼️

Добавить рамку для фото

Обрамляйте свой эффект красивыми границами

🗜️

Сжать изображение

Оптимизируйте улучшенное изображение для публикации

📐

Изменение размера изображения

Изменение размеров изображения

Изучите все инструменты для работы с фотографиями

Frequently Asked Questions

Загрузите любой JPG, PNG, WebP или GIF и кликните по любому месту на отображаемом изображении — точный пиксель под курсором сэмплируется и отображается как HEX, RGB и HSL с копированием в один клик для каждого формата. Идеально подходит для сочетания цвета бренда, для выборки образца с фотографии или для получения акцентных оттенков из дизайн-макета.

usage

Изображение понижается до 320 пикселей на самой длинной стороне, затем каждый пиксель разделяется на верхние 4 бита на канал. Самые населённые бакеты усредняются до полного 8-битного цвета, сортируются по частоте и возвращаются как ваша палитра. В результате обычно получается от 5 до 24 доминирующих цвета, визуально отражающих изображение.

technical

Да. Кнопки Download создают два формата: блок CSS переменных, готовый к вставке в селектор :root (--color-1, --color-2...), и JSON-файл с шестнадцатеричными, RGB-компонентами и процентом веса для каждого цвета. Оба формата чётко интегрируются в дизайн-токены, конфигурации Tailwind и библиотеки палитра.

features

Нет — выбор цвета и извлечение палитры происходят полностью в вашем браузере через HTML Canvas API. Изображение остаётся на вашем устройстве, что делает инструмент безопасным для неопубликованных фотографий продуктов, черновиков макетов и бренд-ассетов по NDA.

privacy

Для создания бренда 5-8 цветов — оптимальная середина: они захватывают доминирующую тему, не разбавляя акценты. Для визуализации данных мы рекомендуем использовать 10-16 цветов, чтобы было достаточно категорических оттенков. Ползунок позволяет выбрать между 5 и 24.

tips

Пиксели с альфа-частотой ниже 128 игнорируются, поэтому прозрачный фон не загрязняет палитру цветами «фона». Это делает Image Color Picker особенно удобным для вырезов продуктов, наклеек и отдельных объектов.

technical

HEX (#RRGGBB) — самый компактный и по умолчанию используют CSS, Figma и Sketch. RGB показывает значения трёх компонентов от 0 до 255 — полезно при работе с данными изображения программно. HSL (оттенок, насыщенность, светлость) интуитивно понятен для настройки цветов: сдвиг оттенка для изменения цветовой семьи, регулировка яркости для оттенков и оттенков.

technical

Да. Бесплатно, аккаунт не требуется, нет ограничений по размеру изображения или числу извлекаемых палитр. Устанавливать нечего — весь инструмент — это одна веб-страница.

pricing

Use Cases

Аудит идентичности бренда

Вытяните точные значения HEX из существующего логотипа или маркетингового актива, чтобы добавить их в свой стиль-гайд. Подбирайте цвета бренда конкурентов для позиционирующей колоды или подачи.

design

Создание палитр веб-дизайна

Извлеките доминирующие цвета из фотографии или мудборда, экспортируйте их как CSS-переменные и добавьте их в свой стильный лист. 5-8 цветовая сладкая зона охватывает основные, акцентные и нейтральные оттенки для полноценного дизайн-седа системы.

design

Списки товаров электронной коммерции

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

ecommerce

Вдохновение для интерьера и моды

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

lifestyle

Схемы визуализации данных

Сгенерируйте категориальную палитру из 10-16 цветов, основанных на образе, который вы хотите вызвать (например, акварельная картина для мягкой диаграммы, закат для градиентов от тёплого к холодному). Лучше, чем выбирать обычные оттенки.

data

Рабочие процессы с игровыми и UI-ассетами

Извлечь индексированную цветовую палитру из спрайт-арта или UI-макетов для подачи в инструмент для пиксельного искусства или игровой движок. Экспорт JSON-палитры интегрируется с Aseprite, Photoshop и большинством пайплайнов ассетов.

gamedev