🔬

извлечь цвета фото

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

Инструменты для изображений Работает локально Данные не отправляются
выбор цветаHEXRGBHSLдизайн
Предпросмотр изображения
🔬
Перетащите изображение сюда
или нажмите для выбора файла
JPG | PNG | WebP | GIF
#000000
Двигайте мышь для предпросмотра цвета · Щёлкните, чтобы выбрать и сохранить в историю
Текущий цвет
HEX —
RGB —
HSL —
История цветов (до 12)
Цвета ещё не выбраны

Что такое «извлечь цвета фото»?

«извлечь цвета фото» позволяет наводить курсор на любую часть изображения и мгновенно видеть точный цвет этого пикселя. Щёлкните, чтобы зафиксировать цвет и скопировать его в формате HEX, RGB или HSL. Панель истории цветов хранит до 12 выбранных цветов для удобного обращения — полезно дизайнерам, разработчикам и всем, кому нужно подбирать цвета с фото или скриншотов.

Как пользоваться «извлечь цвета фото»

  1. Загрузите любое изображение, щёлкнув по зоне перетаскивания или перетащив файл на неё.
  2. Двигайте мышью по изображению, чтобы видеть цвет в реальном времени во всплывающем индикаторе и на боковой панели.
  3. Щёлкните в любом месте изображения, чтобы выбрать этот цвет и сохранить его в историю.
  4. Используйте кнопки копирования, чтобы скопировать значения HEX, RGB или HSL в буфер обмена.
  5. Нажмите любой образец цвета в панели истории, чтобы вернуть этот цвет на основной экран.

Похожие инструменты

🎨
выбор цвета
Выберите цвет и получите значения HEX, RGB и HSL
 ☀️
Яркость контраст фото
Точно настраивайте яркость и контрастность фото с мгновенным предпросмотром
 ⬛
черно-белое фото
Преобразуйте фотографии в оттенки серого или черно-белые в браузере
Как работает извлечение цвета ▾
Пример
Ввод Загрузите скриншот бренда и наведите курсор на цвет логотипа
Результат #1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) —готово к копированию
Типичные сценарии использования
  • Определяйте точные цвета бренда по логотипу или скриншоту
  • Подберите цвет фона с фото для UI-дизайна
  • Извлеките значение цвета CSS из макета дизайна
  • Создайте мини-палитру, выбирая несколько цветов и используя панель истории
Зачем использовать этот инструмент
  • Извлечение цвета с точностью до пикселя с помощью Canvas getImageData —без округления.
  • Три формата вывода (HEX, RGB, HSL) с копированием каждого в один клик.
  • Работает полностью в браузере —изображения не покидают ваше устройство.
Часто задаваемые вопросы
Загружается ли моё изображение на сервер?

Нет. Вся обработка происходит полностью в вашем браузере с помощью HTML5 Canvas API. Ваше изображение никогда не покидает устройство.

Насколько точны извлечённые значения цвета?

Значения точны до пикселя — инструмент считывает точные значения RGBA пикселя под курсором через API getImageData Canvas, затем математически преобразует их в HEX, RGB и HSL.

Чем это отличается от инструмента извлечения палитры?

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

Какой формат использует кнопка копирования?

Каждый формат копируется как готовая к использованию строка: HEX копируется как #RRGGBB, RGB — как rgb(R, G, B), HSL — как hsl(H, S%, L%).