У вас есть изображение, и вам нужно одно число из него: hex-код конкретного цвета. Может, это логотип, чья бренд-спецификация давно пропала, скриншот сайта, чей синий вы хотите повторить, или фото с оттенком, который хотелось бы переиспользовать. Печатать то, что вы думаете, что это за цвет, не работает — глаз не может считать #3A7BD5 с экрана, а цвет, который выглядит верным, обычно на несколько цифр мимо. Вот как прочитать реальное значение прямо из пикселей.
Почему угадывание никогда толком не работает
Один «синий» на экране на деле — разброс почти идентичных синих, а яркость и калибровка вашего монитора сдвигают их дальше. Выберите на глаз — и попадёте близко, но неверно; достаточно близко, чтобы несовпадение раздражало, но не бросалось в глаза, так что вы жжёте десять минут, гадая, почему кнопка не совпадает с шапкой. Решение — перестать угадывать и прочитать число, которое пиксель на самом деле хранит.
Получите код за три шага
Надёжный способ — сэмплировать пиксель напрямую пипеткой цвета.
- Загрузите изображение. Перетащите логотип, скриншот или фото, из которого вытягиваете.
- Наведитесь на точный пиксель. Лупа-увеличитель следует за вашим курсором и увеличивает область под ним, так что на резком крае вы видите, какой пиксель — плоский фирменный цвет, а какой — сглаженная смесь двух.
- Кликните для сохранения, затем скопируйте. Каждый клик держит цвет образцом, показывающим его HEX, RGB и HSL, каждый со своей кнопкой копирования. Кликните HEX — и он в вашем буфере обмена.
Попадите в правильный пиксель
Лупа важнее, чем кажется. Там, где цвет встречает другой — буква на фоне, край иконки — пиксели между ними сглажены: плавная смесь двух цветов, а не какой-то из них. Сэмплируйте там — получите мутное значение, которое не совпадает ни с чем. Целитесь в плоскую область на несколько пикселей внутри формы, где цвет сплошной, и увеличенный вид позволяет подтвердить, что вы на нём, до клика.
На чистом логотипе или плоском интерфейсе это легко — цвет однороден на широкой области. На фото это требует больше аккуратности, потому что зерно и сжатие означают, что соседние пиксели действительно различаются. Выбирайте из спокойной, равномерно освещённой области и возьмите пару сэмплов, чтобы проверить, что они согласуются.
HEX, RGB или HSL — берите, что подходит
Каждый образец даёт вам все три сразу, так что вы копируете тот, что хочет ваш пункт назначения:
- HEX (
#3A7BD5) — веб-стандарт. CSS, Figma, Canva, брендбуки. Копируйте этот, если нет причины не делать. - RGB (
rgb(58, 123, 213)) — значения каналов, полезно, когда инструмент их просит или нужна прозрачность черезrgba. - HSL (
hsl(215, 65%, 53%)) — тон, насыщенность, светлота. Лучше всего, когда хотите подстроить цвет: осветлить для состояния наведения, приглушить для варианта или построить из него шкалу.
Поскольку каждый образец несёт все три, вы никогда не пересэмплируете просто ради смены формата.
Захват нескольких цветов разом
Логотип редко бывает одного цвета. Кликните основной, акцентный и цвет текста за один проход — каждый складывается в список, так что можно сравнить их и скопировать один за другим, а не загружать изображение три отдельных раза.
Если вам нужна цветовая сводка всего изображения, а не конкретные пиксели — общая палитра, из которой построено фото — это другая задача, и отдельный инструмент палитры img.diy авто-извлекает доминирующие цвета за вас. Используйте эту пипетку, когда знаете точное место; используйте инструмент палитры, когда хотите, чтобы изображение охарактеризовали за вас.
Оно остаётся на вашем устройстве
Изображение читается локально в вашем браузере с canvas — ничего не загружается, нет регистрации, а после первой загрузки работает офлайн. Так что невыпущенный макет или приватный ассет клиента никогда не покидают вашу машину лишь потому, что вам понадобился один hex-код из него.
Загрузите изображение, наведитесь на пиксель, кликните и скопируйте код.