Бесплатное извлечение цветов из изображения
Извлечение цветовой палитры
Инструмент «Извлечение цветовой палитры» находит точные цвета изображения и возвращает их в виде цветовой палитры с кодами HEX, RGB, HSL, OKLCH и CMYK. Для каждого цвета указана его доля в изображении, а само изображение не покидает ваш браузер.
- Бесплатно, без регистрации
- Изображения не покидают устройство
- Точные цвета пикселей
Перетащите изображения сюда
или вставьте через Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. До 20 изображений.
Как работает извлечение цветовой палитры?
Извлечение цветовой палитры работает в вашем браузере: инструмент считывает пиксели изображения, группирует похожие цвета и возвращает цвета, которые лучше всего описывают изображение.
Добавьте изображение
Перетащите, вставьте или выберите до 20 изображений в формате JPG, PNG, WebP, GIF, AVIF или SVG. Вставленный скриншот тоже подходит.
Цвета группируются
Инструмент кластеризует пиксели в OKLab, цветовом пространстве, построенном под восприятие цвета человеком, и объединяет цвета, которые выглядят одинаково.
Настройте палитру
Задайте от 2 до 20 цветов, выберите режим и нажмите на изображение, чтобы добавить любой точный пиксель. Перетащите метку, чтобы выбрать её цвет заново.
Скопируйте или экспортируйте
Копируйте HEX-коды, проверяйте контраст или экспортируйте палитру в CSS, Tailwind, Adobe, Procreate, GIMP и другие форматы.
Что инструмент возвращает для каждого цвета?
Для каждого извлечённого цвета инструмент возвращает семь цветовых кодов, ближайшее название цвета, его долю в изображении, контраст с белым и чёрным и шкалу светлых и тёмных оттенков от 50 до 950.
| Код | Пример | Применение |
|---|---|---|
| HEX | #2A9D8F | Веб-дизайн, CSS и большинство дизайн-приложений |
| RGB | rgb(42 157 143) | Экраны, CSS и графические редакторы |
| HSL | hsl(173 58% 39%) | Настройка светлоты и насыщенности в CSS |
| HSB | hsb(173, 73%, 62%) | Выбор цвета в Photoshop, Figma и Procreate |
| OKLCH | oklch(63% 0.101 183) | Перцептивное редактирование цвета в современном CSS |
| CIE Lab | lab(58.4 -35.2 -2.3) | Измерение цветовых различий и процессы печати |
| CMYK | 73, 0, 9, 38 | Оценка для печати без профиля принтера |
Какой режим извлечения подходит для вашего изображения?
Режим извлечения определяет, какие цвета попадут в палитру, когда в изображении больше цветов, чем вмещает палитра.
| Режим | Что выбирает | Для чего подходит |
|---|---|---|
| Сбалансированный (по умолчанию) | Крупные цветовые области и заметные акценты с оценкой по доле пикселей и по удалённости от уже выбранных цветов | Фотографии, иллюстрации и фирменные изображения |
| Доминирующий | Цвета, которые занимают больше всего пикселей | Оценка того, какие цвета заполняют изображение |
| Яркий | Оценка режима «Сбалансированный» с весом по хроматичности, поэтому насыщенные акценты получают более высокий ранг | Мудборды, фото товаров и художественные работы |
Настройка Точный пиксель возвращает цвет, который есть в изображении. Настройка Среднее возвращает средний цвет каждой группы. Ползунок Объединять похожие задаёт, насколько близкими должны быть два цвета, чтобы считаться одним; близость измеряется как расстояние ΔE_OK (по умолчанию 0.03).
Насколько точны извлечённые цвета?
Извлечённые цвета являются точными значениями пикселей: инструмент берёт реальные пиксели без смешивания, поэтому каждый HEX-код в палитре с настройкой «Точный пиксель» присутствует в вашем изображении.
- Группировка по восприятию. Цвета сравниваются в OKLab, где равные расстояния выглядят как равные различия. Расстояние в RGB завышает одни цветовые различия и занижает другие.
- Стабильные результаты. Кластеризация использует фиксированное начальное значение, поэтому одно и то же изображение с теми же настройками всегда даёт одну и ту же палитру.
- Реальные пропорции. Каждый пиксель относится к ближайшему цвету палитры, поэтому сумма долей равна 100%.
- Учёт прозрачности. Пиксели с непрозрачностью ниже 50% не учитываются, поэтому прозрачный PNG показывает только видимые цвета.
Руководство Как работает извлечение цветов сравнивает этот метод с медианным сечением, квантованием с помощью октодерева и обычным методом k-means.
Из каких источников можно извлечь цвета?
Извлечение цветовой палитры работает с четырьмя типами источников, и у каждого типа свой инструмент и свои настройки.
Изображения
Фотографии, иллюстрации, скриншоты и художественные работы. Из нескольких изображений получается одна общая палитра, в которой каждое изображение имеет равный вес.
Логотипы
Инструмент Извлечение цветов логотипа возвращает точные цвета логотипа, удаляет фон и игнорирует смешанные пиксели по краям.
Сайты
Инструмент Извлечение цветов сайта читает CSS сайта по URL и возвращает его фирменные цвета, цвета текста, фона и границ.
Отдельные пиксели
Инструмент Пипетка цвета для изображений возвращает точный HEX-код любого пикселя, на который вы нажимаете, и показывает лупу для точного выбора.
В каких форматах можно скачать палитру?
Инструмент экспортирует палитру в 11 форматах, и все они создаются в вашем браузере.
| Формат | Файл | Где открыть |
|---|---|---|
| Переменные CSS | .css | Любая таблица стилей сайта |
| Tailwind v4 и v3 | Блок @theme, tailwind.config.js | Проекты на Tailwind CSS |
| SCSS | .scss | Проекты на Sass |
| Дизайн-токены | .tokens.json | Инструменты W3C Design Tokens и плагины Figma |
| Adobe Swatch Exchange | .ase | Photoshop, Illustrator и InDesign |
| Procreate | .swatches | Procreate на iPad |
| Палитра GIMP | .gpl | GIMP, Inkscape и Krita |
| SVG | .svg | Figma, Sketch и Illustrator |
| PNG-карточка палитры | .png | Презентации, мудборды и публикации в соцсетях |
| Список HEX | .txt | Любое приложение |
Форматы кода могут включать шкалу светлых и тёмных оттенков от 50 до 950 для каждого цвета, построенную в OKLCH вокруг извлечённого значения.
Кто использует извлечение цветовой палитры?
Дизайнеры
Извлекают палитру из фото для мудборда или из референса и отправляют её в Figma, приложения Adobe или Procreate в виде образцов.
Разработчики
Превращают скриншот макета в переменные CSS или тему Tailwind с полной шкалой светлых и тёмных оттенков.
Владельцы бизнеса
Находят точные HEX-коды логотипа или фото товара, чтобы сайт, интернет-магазин и публикации в соцсетях выглядели единообразно.
Художники и иллюстраторы
Изучают цветовые пропорции картины или фотографии перед началом новой работы.
Заказчики печати
Собирают точные экранные значения и оценки CMYK, чтобы поставить задачу типографии до цветопробы.
Специалисты по доступности
Проверяют каждую пару цветов палитры на соответствие порогам WCAG 2. Руководство Контраст WCAG в палитре объясняет правила.
Загружаются ли ваши изображения на сервер?
Нет. Изображения декодируются и анализируются в вашем браузере, и файлы не попадают на сервер. Сайт не хранит ни изображения, ни палитры.
С сервером связываются две функции: загрузка изображения по веб-адресу и чтение кода сайта. Обе получают публичный файл за вас и не сохраняют копию. В политике конфиденциальности перечислены все данные, которые обрабатывает сайт.
Частые вопросы об извлечении цветовой палитры
Извлечение цветовой палитры бесплатное?
Да. Все функции и все форматы экспорта бесплатны, без аккаунта, водяного знака и ограничений на использование.
Сколько цветов может быть в палитре?
Палитра содержит от 2 до 20 цветов, количество задаётся ползунком «Цвета». По умолчанию палитра состоит из 6 цветов.
Почему другой инструмент выдаёт другие цвета?
Инструменты различаются цветовым пространством, алгоритмом кластеризации, выборкой пикселей и значением образца. Этот инструмент группирует цвета в OKLab и по умолчанию возвращает реальные значения пикселей, а многие инструменты усредняют цвета в RGB.
Можно ли извлечь одну палитру из нескольких изображений?
Да. Добавьте до 20 изображений, и инструмент построит одну общую палитру, в которой каждое изображение имеет равный вес, а также небольшую палитру для каждого изображения.
Работает ли инструмент на телефонах?
Да. Инструмент работает в мобильных браузерах, принимает фото из галереи и выбирает цвета касанием.
Какие форматы изображений поддерживаются?
Файлы JPG, PNG, WebP, GIF, AVIF, BMP и SVG работают во всех современных браузерах. Фото HEIC открываются только в Safari, поэтому для других браузеров нужна копия в JPG или PNG.