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

Загрузите или вставьте изображение и кликните на нужный пиксель — инструмент читает его через HTML canvas и мгновенно показывает значения HEX, RGB и HSL, копируя hex-код в буфер обмена. Увеличительная лупа показывает отдельные пиксели вокруг курсора, чтобы попасть точно в нужный. Загрузки на сервер не происходит ни на каком этапе — всё работает в браузере через HTML5 canvas API. Это делает инструмент мгновенным, приватным и работающим офлайн после загрузки страницы. Для труднодоступных областей — сглаженный текст или края логотипа — увеличьте изображение сначала встроенным зумом браузера.

Используйте эту бесплатную браузерную пипетку: перетащите изображение, кликните на пиксель и скопируйте код. Ничего не нужно устанавливать, регистрация не требуется. В отличие от Adobe Photoshop или Illustrator — которые стоят от ~1 700 ₽/месяц — этот инструмент полностью бесплатен. В отличие от Digital Color Meter на macOS или PowerToys Color Picker для Windows, он также автоматически извлекает доминирующую палитру изображения — все основные цвета сразу, без необходимости кликать на каждый. imagecolorpicker.com — самая популярная специализированная альтернатива, но она загружает файл на сервер; этот инструмент — нет.

Они кодируют один и тот же цвет двумя способами. HEX записывает красный/зелёный/синий как три шестнадцатеричные пары (#FF5733) и является стандартом в CSS и веб-дизайне; RGB использует три десятичных числа от 0 до 255 — rgb(255, 87, 51) — распространённых в редакторах изображений и коде. Конвертация между ними происходит без потерь, и инструмент показывает оба формата для каждого кликнутого пикселя. Используйте HEX при написании CSS или классов Tailwind; используйте RGB при работе с canvas, WebGL или кодом обработки изображений, которому нужны числовые каналы. Оба формата описывают одну и ту же точку в цветовом пространстве sRGB.

HSL описывает цвет через Тон (0–360°), Насыщенность и Яркость — что более интуитивно для настройки цветов. Вы можете сделать цвет светлее или менее насыщенным, не меняя его тон. CSS поддерживает hsl() нативно, поэтому дизайнеры часто работают в HSL при построении палитры: увеличьте Яркость для тинта, уменьшите для шейда. Пипетка показывает HEX, RGB и HSL для каждого пикселя, так что вы можете скопировать тот формат, который нужен в вашем рабочем процессе. Для Figma, Sketch или Adobe XD HEX обычно удобнее всего вставить; для Tailwind или CSS-переменных хорошо работают и HEX, и HSL.

Просто загрузите фото — доминирующая палитра появится автоматически. Инструмент квантует пиксели изображения на кластеры и ранжирует их по частоте, возвращая восемь наиболее доминирующих цветов в виде образцов с hex-кодами. Кликните на любой образец, чтобы скопировать, или скопируйте всю палитру сразу. Adobe Color и генератор палитр Canva делают то же самое, но требуют аккаунт; Coolors.co может создавать палитры из фотографий, но отправляет изображение на сервер. Здесь извлечение палитры работает полностью в вашем браузере — ничего не загружается, аккаунт не нужен, реклама не мешает.

Изображение рисуется на HTML canvas элементе в браузере; клик считывает значения красного, зелёного и синего пикселя через API getImageData и конвертирует их в HEX, RGB и HSL. Поскольку canvas работает локально, сервер вообще не задействован. Лупа использует второй элемент canvas для увеличения области пикселей вокруг курсора, позволяя попасть точно в нужный пиксель даже на изображениях с мелкими деталями — сглаженный текст, края логотипа или фотографические градиенты.

В этом инструменте — да: изображение загружается только в память браузера и никуда не передаётся. Вы можете проверить это на вкладке «Сеть» в инструментах разработчика браузера: после загрузки страницы никаких запросов не отправляется. Это важно для неопубликованных дизайнов, логотипов клиентов и личных фотографий. Многие пипетки с загрузкой — включая imagecolorpicker.com и некоторые функции Canva — отправляют ваш файл на сервер и временно хранят его. Этот инструмент обрабатывает всё локально, поэтому ваши файлы остаются на устройстве и исчезают при закрытии вкладки.

Да — кнопка «Взять с экрана» использует EyeDropper API (поддерживается в Chrome и Edge), чтобы взять любой пиксель в любом месте экрана, включая другие окна, приложения и вкладки браузера. Полученный цвет попадает в ту же панель HEX/RGB/HSL и историю, что и цвета из изображений. В браузерах без API (Safari, Firefox) поможет вставка скриншота: нажмите PrtScn или Cmd+Shift+4, затем Ctrl+V прямо в пипетку — сохранять файл не нужно. Это работает для кадров из видео, PDF в браузере и любой живой веб-страницы.

Сохраните или сделайте скриншот логотипа, перетащите его сюда, кликните на фирменный цвет и скопируйте HEX. Или обойдитесь без скриншота: используйте кнопку пипетки с экрана, чтобы взять цвет прямо с живого сайта, пока он открыт в другой вкладке. Это быстрее, чем использовать DevTools браузера для проверки вычисленных стилей, особенно если цвет встроен в SVG или изображение, а не задан как CSS-свойство. История выбора сохраняет последние 16 цветов, так что вы можете собрать полную фирменную палитру из нескольких источников, прежде чем переключиться в инструмент дизайна.

В большинстве удобных палитр 3–6 цветов: доминирующий цвет, один-два второстепенных и акценты. Экстрактор возвращает восемь доминирующих образцов, чтобы вы могли выбрать подходящее подмножество — копируйте отдельные образцы или берите весь набор для мудборда. На практике четыре цвета — хорошая отправная точка: один основной, один второстепенный, один нейтральный и один акцентный. Дизайн-системы таких компаний, как Stripe и Linear, используют компактные палитры со множеством вариантов яркости и насыщенности одних и тех же оттенков, а не множество отдельных цветов.

HEX — для CSS и веб-работы (наиболее распространён в кодовых базах и инструментах дизайна); RGB/RGBA — для экранов и canvas-кода; HSL — для построения палитр и систематической настройки; CMYK — для печати. Figma, Sketch и Adobe XD поддерживают HEX, RGB и HSL. Эта пипетка показывает HEX, RGB и HSL для каждого пикселя, чтобы вы могли скопировать нужный формат без ручного конвертирования. Если вам нужен CMYK для печати, вставьте HEX в бесплатный онлайн-конвертер — canvas API не выводит CMYK нативно.

Клик на пиксель автоматически копирует его HEX в буфер обмена. Каждая строка значений, образец в истории и чип палитры также копируются по клику — просто кликните на значение или образец, и оно скопировано. История выбора сохраняет последние 16 цветов, так что вы можете собрать несколько оттенков с одного изображения поочерёдно, прежде чем переходить к другому. Наводите на образцы, чтобы увидеть их значения перед кликом. Если вам нужна вся палитра списком, используйте «Копировать всё» — вы получите все восемь hex-кодов через запятую, готовые для вставки в CSS-переменные или документ дизайна.

Да — сделайте скриншот кадра или страницы и вставьте в пипетку через Ctrl+V (файл сохранять не нужно), или используйте пипетку с экрана для прямого взятия цвета, пока PDF или видео воспроизводится. Для PDF в браузере пипетка с экрана обычно самый быстрый вариант: откройте PDF в Chrome, нажмите «Взять с экрана» и кликните на нужный цвет. Для видео сначала поставьте на паузу нужный кадр — так образец будет точнее.

Браузеры могут применять конвертацию цветового профиля (ICC) при отрисовке изображений, а скриншоты наследуют цветовой профиль вашего дисплея. Пипетка сообщает фактические значения пикселей в sRGB в том виде, как они отрисованы браузером — значения, которые вы используете в CSS — что правильно для веб-работы. Если вы видите расхождение с Photoshop или Figma, проверьте, откалиброван ли ваш монитор под sRGB и есть ли во встроенном файле изображения цветовой профиль, соответствующий отображаемому. Для логотипов в идеале дизайнер должен предоставить фирменные HEX-значения напрямую, а не полагаться на извлечение.

imagecolorpicker.com — наиболее используемая альтернатива: предлагает выбор отдельных пикселей и извлечение палитры, но загружает изображение на сервер и показывает рекламу. Adobe Color извлекает палитры из фотографий, но требует аккаунт Adobe и отправляет изображения на серверы Adobe; кроме того, в нём нет выбора отдельных пикселей с лупой. Пипетка Canva встроена в редактор Canva и работает только с изображениями в проекте. Digital Color Meter на macOS и PowerToys Color Picker для Windows подходят для взятия цвета с экрана, но не извлекают палитры из файлов. Этот инструмент — единственный бесплатный, полностью клиентский вариант с лупой, пипеткой с экрана, историей 16 цветов и извлечением палитры в одном месте — без аккаунта, без рекламы, без загрузки на сервер.