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

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

Извлечение палитры цветов из изображения декодирует ваше изображение и анализирует его цвета целиком в вашем браузере. Картинка никогда не загружается — никакие данные изображения или извлечённые цвета не отправляются в ArrayKit.

Открыть пипетку цвета из изображения

Об инструменте Палитра цветов из изображения

Извлечение палитры цветов из изображения превращает любую картинку в пригодную цветовую схему. Перетащите или выберите фото, логотип, скриншот или дизайн-макет, и инструмент выявит единственный доминирующий цвет плюс палитру самых заметных оттенков по всему изображению. Каждый образец показан как HEX, RGB и HSL, поэтому можно вставить значение прямо в CSS, дизайн-токен или заливку. Настройте размер палитры от четырёх до двенадцати цветов, скопируйте отдельный образец или все коды HEX сразу либо возьмите готовый блок CSS-переменных :root и фрагмент цветов Tailwind для вашей темы. Он создан для дизайнеров, фронтенд-разработчиков и всех, кто подбирает палитру бренда по изображению. Картинка декодируется, а её цвета считываются на вашем устройстве — ничего не загружается.

Возможности

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

  1. Нажмите на зону сброса или перетащите на неё файл изображения
  2. Прочитайте доминирующий цвет и извлечённые образцы палитры
  3. Переключайте образцы между HEX, RGB и HSL или меняйте размер палитры
  4. Скопируйте отдельный образец, все коды HEX или блок CSS либо Tailwind

Пример

Ввод

Uploaded: brand-hero.png (blue / green / red artwork)

Результат

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

Палитра из трёх цветов становится готовым к копированию блоком CSS-переменных.

Частые ошибки и устранение неполадок

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

Сколько цветов можно извлечь из изображения?
Вы можете вытянуть в палитру от четырёх до двенадцати цветов, плюс единственный доминирующий цвет, показанный отдельно. Меняйте размер палитры в любой момент, и образцы, CSS-переменные и блок Tailwind обновляются мгновенно.
В чём разница между доминирующим цветом и палитрой?
Доминирующий цвет — это один наиболее показательный цвет всего изображения, показанный со своими HEX, RGB и HSL. Палитра — это набор самых заметных цветов по всей картинке, упорядоченных по тому, насколько они выделяются.
Можно ли экспортировать палитру как CSS-переменные или цвета Tailwind?
Да. Инструмент генерирует блок :root с пользовательскими свойствами --color-N и объект цветов Tailwind с ключами palette-1, palette-2 и так далее. Скопируйте любой из них одним щелчком и вставьте в свой проект.
Из каких форматов изображений можно извлечь палитру?
Работают PNG, JPEG, WebP, SVG, GIF, AVIF, BMP и ICO. Перетащите или выберите файл, и палитра генерируется из декодированных пикселей в вашем браузере.
Как построить палитру, соответствующую моему бренду?
Загрузите свой логотип, фото продукта или скриншот сайта. Инструмент выявляет самые заметные цвета, чтобы вы могли зафиксировать значения HEX бренда, а затем экспортировать их как CSS-переменные или токены Tailwind.
Почему два моих образца вышли почти одинаковыми?
Изображения, в которых преобладает один оттенок, дают несколько близких тонов. Уменьшите размер палитры, чтобы объединить их, или выберите изображение с большим цветовым разнообразием для более широкого разброса.

Связанные инструменты

Все инструменты ArrayKit