Экстрактор цветовой палитры

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

Загрузите любое изображение, чтобы выбрать его доминирующие цвета, или щелкните в любом месте фотографии, чтобы выбрать точный пиксель. Получите HEX, RGB и HSL для каждого образца, настройте количество извлекаемых цветов, сгенерируйте аналоговые/триадные/дополнительные гармонии, проверьте контрастность WCAG (с помощью автоматического исправления одним щелчком мыши) и экспортируйте палитру в виде переменных CSS, SCSS, конфигурации Tailwind, JSON или листа образцов SVG.

Категория: Инструменты для изображений
Включает: Возможности 6
Доступ: Бесплатно · Нет регистрации
Конфиденциальность: Запускается в вашем браузере

Calibrating Color Architect......

Please wait a moment

Как использовать

Как использовать Экстрактор цветовой палитры

01
Загрузите изображение
Перетащите или выберите любую фотографию, логотип или снимок экрана. Палитра извлекается мгновенно и полностью в вашем браузере.
02
Уточните палитру
Сдвиньте регулятор количества, чтобы извлечь 3–12 цветов, или включите «Выбрать из изображения» и щелкните любое место, чтобы выбрать точный пиксель.
03
Осмотрите и отрегулируйте
Выберите образец, чтобы просмотреть его HEX/RGB/HSL, точно настроить яркость и проверить контраст WCAG на белом и черном фоне — нажмите палочку, чтобы автоматически исправить неудачный цвет.
04
Экспорт
Выберите CSS, SCSS, Tailwind, JSON или SVG и скопируйте код или загрузите образец SVG для своей проектной документации.

Варианты использования

Распространенные случаи использования

—Создайте палитру бренда на основе логотипа или изображения на мудборде.
—Получите точный шестигранник цвета на скриншоте или фотографии.
—Создайте доступную цветовую схему пользовательского интерфейса, совместимую с WCAG.
—Экспортируйте переменные Tailwind или CSS прямо в проект.
—Создавайте гармоничные градиенты и акцентируйте цвета на основе фотографии.

Обзор

Извлеките цветовую палитру из любого изображения

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

Для дизайнеров, разработчиков и работы с брендами

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

Функции

01: Выделение доминирующего цвета с регулируемым счетом 3–12
02: Точные пиксели по щелчку + встроенная пипетка
03: Значения HEX, RGB и HSL с копированием одним касанием
04: Аналогичные, триадические и дополнительные гармонии
05: WCAG 2.1 Средство проверки контрастности AA/AAA с автоисправлением
06: Экспорт образцов CSS, SCSS, Tailwind, JSON или SVG.

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

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

Загрузите свое изображение, и инструмент автоматически проанализирует его, чтобы извлечь доминирующие цвета с помощью кластеризации K-средних. Каждый цвет отображается со своими значениями HEX, RGB и HSL — щелкните любой цвет, чтобы скопировать его.

Могу ли я извлечь цвета бренда из логотипа?+

Да. Загрузите любое изображение логотипа, и инструмент определит основные и дополнительные цвета бренда, предоставив вам точные шестнадцатеричные коды для использования в CSS, Tailwind или инструментах дизайна, таких как Figma.

Что такое проверка контрастности WCAG?+

WCAG (Руководство по доступности веб-контента) определяет коэффициенты контрастности между цветами текста и фона. Соотношение не менее 4,5:1 необходимо для того, чтобы обычный текст (стандарт AA) был удобен для чтения пользователями с нарушениями зрения.

Сколько цветов идентифицирует экстрактор?+

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

Могу ли я экспортировать палитру для использования в CSS или Tailwind?+

Да. Инструмент генерирует готовые к использованию переменные пользовательских свойств CSS (--color-primary: #hex) и фрагменты конфигурации Tailwind, которые вы можете вставить непосредственно в свой проект.

Могу ли я получить точные шестнадцатеричные коды из логотипа?+

Да, экстрактор возвращает доминирующие цвета в виде шестнадцатеричных значений, которые вы можете скопировать непосредственно в свои инструменты дизайна.