Загрузите изображение и кликните на нужный пиксель, чтобы мгновенно получить его точный цветовой код.
Автоматическая генерация палитры (извлечение палитры из изображения) — полезная функция, но она даёт доминирующие цвета. Это работает, когда тебе нужна общая картина: какие оттенки преобладают на фотографии, какой настроение задаёт картинка.
Но представь другую ситуацию: дизайнер прислал макет, и тебе нужен конкретный цвет кнопки, которая занимает 0.3% площади изображения. Автоматическая палитра её проигнорирует — доля слишком мала. А пипетка позволяет точечно указать на эту кнопку и получить её код.
Или другой случай: на фотографии продукта фон белый, но не чистый #FFFFFF, а с лёгким тёплым оттенком. Пипетка покажет разницу — скажем, #FAF8F5. Эта деталь критична, если ты верстаешь карточку товара и хочешь, чтобы фон страницы точно совпадал с фоном фото.
При клике по пикселю инструмент показывает цвет в трёх форматах одновременно. Но какой использовать?
HEX (#FF5733) — самый распространённый веб-формат. Шесть символов после решётки — это три пары шестнадцатеричных чисел, кодирующих красный, зелёный и синий каналы. Используется в CSS, HTML, Figma, Sketch, Adobe XD, Canva. Если работаешь с вебом — начинай с HEX.
RGB (rgb(255, 87, 51)) — тот же цвет, но выражен тремя десятичными числами от 0 до 255. Удобен, когда нужно манипулировать каналами: «сделай красный на 20 темнее» — просто уменьши первое число. В CSS RGB позволяет задавать прозрачность через rgba(), что HEX в чистом виде не поддерживает.
HSL (hsl(14, 100%, 57%)) — тон, насыщенность, яркость. Самый интуитивный формат для дизайнеров: хочешь сделать оттенок бледнее — уменьши насыщенность. Хочешь другой тон — измени первый параметр. HSL особенно удобен при создании гармоничных палитр, где нужно получить вариации одного цвета.
Практический совет: копируй все три значения. Они пригодятся в разных контекстах, и переконвертировать их потом сложнее, чем кажется — особенно если речь о цветах с прозрачностью.
Image color picker — не просто «инструмент для дизайнеров». Вот конкретные рабочие ситуации, в которых он незаменим:
Веб-разработка. Дизайнер передал макет в Figma. Тебе нужно получить цвет текста заголовка, фона секции и акцентной кнопки. Открываешь экспорт макета как PNG, загружаешь в пипетку, собираешь три кода за 30 секунд — и вставляешь в CSS.
Брендинг и айдентика. Клиент прислал скан визитки или фото вывески с логотипом. Ему нужно восстановить фирменные цвета. Пипетка позволяет извлечь точные значения даже с фотографии, сделанной телефоном — при условии хорошего освещения.
Подготовка презентаций. Тебе нужно оформить слайд в цветах партнёра или клиента. Есть только их логотип в формате JPG. Загружаешь в пипетку — получаешь основной и акцентный цвета. Вставляешь в PowerPoint или Google Slides — презентация выглядит профессионально.
Работа с фотографиями. Фотограф хочет воспроизвести цветовую гамму референсного снимка. Пипетка показывает тон кожи, оттенок неба, цвет тени — значения, которые потом используются при цветокоррекции в Lightroom или Capture One.
Разработка приложений. UI-разработчик проверяет, что цвет элемента на скриншоте соответствует дизайн-системе. Отклонение в 2–3 единицы по каналу — и кнопка выглядит «не такой».
Пипетка показывает цвет того пикселя, на который ты кликнул. Точность абсолютная — на уровне конкретного пикселя файла. Но вот нюансы, которые влияют на соответствие «экран vs реальный объект»:
Качество исходного файла. JPG использует сжатие с потерями. При высокой компрессии соседние пиксели «сливаются». Если берёшь цвет с JPG, кликни в область с ровным тоном — не на границе двух цветов. PNG даёт более точный результат.
Цветовой профиль монитора. Один и тот же файл на двух мониторах покажет разные цвета, если устройства не откалиброваны. Для критичных задач (печать, брендирование) калибруй монитор перед извлечением цветов.
Освещение на фотографии. Если снимаешь объект камерой, освещение сдвигает оттенок. Белый свет даёт нейтральные цвета, тёплый ламповый — жёлтит. Для максимальной точности снимай при дневном свете или в студии с нейтральной температурой.
Антиалиасинг и сглаживание. На кривых линиях и тексте края пикселей полупрозрачные. Пипетка покажет смешанный цвет, а не «истинный» цвет объекта. Кликай в центральные области, вдали от краёв.
Оба инструмента работают с цветом из изображений, но решают разные задачи.
Пипетка — инструмент точечного выбора. Ты точно знаешь, какой элемент на картинке нужен, и указываешь на него. Лучше всего подходит, когда нужно 1–5 конкретных цветов.
Автоматическая палитра (из изображения в палитру) — алгоритм анализирует всё изображение и выделяет доминирующие оттенки. Подходит, когда ты ищешь вдохновение или хочешь понять общую цветовую гамму картинки для дизайн-проекта.
На практике их часто используют вместе. Сначала генерируешь палитру — видишь общую картину. Потом пипеткой вытягиваешь конкретные акцентные цвета, которые алгоритм не выделил. Или наоборот: палитра показала пять цветов, а тебе нужно больше деталей — переходишь к ручному выбору.
Для продвинутых задач, таких как создание CSS-тени на основе цвета изображения, сначала извлеки базовый цвет пипеткой, а затем подставь его в параметры box-shadow.