Как узнать точный цвет с любой картинки (HEX, RGB, HSL)
Три надёжных способа взять цвет с изображения, почему пиксель у края обманывает и когда HEX удобнее HSL — плюс бесплатная пипетка в браузере.
Клиент присылает логотип и просит «сделать сайт в том же синем». Брендбука нет, гайдлайна нет — только PNG. Нужно точное значение цвета, а подбор на глаз в редакторе CSS даёт похожий оттенок, но никогда не тот самый.
Самый быстрый способ — пипетка в браузере
Откройте Пипетку для изображений, перетащите файл и кликните по нужному пикселю. Цвет придёт сразу в трёх форматах — HEX для CSS, RGB для кода, HSL для подгонки оттенков — с кнопкой копирования у каждого. Изображение читается локально через Canvas API и никуда не отправляется. Это важнее, чем кажется: многие «бесплатные» онлайн-пипетки сначала загружают файл на свой сервер, что странно делать с ещё не опубликованным дизайном.
Есть и настольные варианты, вполне достойные: на macOS предустановлен Digital Color Meter, на Windows пипетка входит в PowerToys. Но обе берут цвет с экрана, а не из файла — и здесь начинается проблема, о которой стоит знать.
Почему цвет с экрана может врать
Внутри файла у пикселя одно истинное значение. На экране это значение сначала проходит через цветовой профиль дисплея. На мониторе с широким охватом (почти все MacBook с 2016 года, многие смартфоны) не откалиброванный по цвету скриншотер может показать sRGB-красный #FF0000 как что-нибудь вроде #FB0007. Сдвиг маленький, но если такое значение попадёт в стили бренда, логотип и фон вокруг него так и не совпадут.
Пипетка по файлу обходит дисплей стороной: браузер декодирует сами данные изображения, и вы копируете ровно то значение, которое экспортировал дизайнер.
Ловушка сглаживания
Самая частая ошибка при выборе цвета вообще не связана с профилями. Увеличьте край любого логотипа или буквы — увидите переход в 1–3 пикселя, где фигура перетекает в фон. Это сглаживание. Кликните туда — и получите мутный промежуточный оттенок, которого в дизайне нет. JPEG-сжатие добавляет проблем, рассыпая шум вокруг резких границ.
Спасают две привычки:
- Берите цвет из середины однотонной области, подальше от краёв.
- Пользуйтесь лупой. Пипетка показывает сетку 11×11 пикселей вокруг курсора с выделенным целевым пикселем — видно, стоите вы на чистом цвете или на переходе.
Если соседние пиксели дают чуть разные значения — #2A6FD1, #2B70D2, #2A6ED0 — это шум JPEG. Возьмите то, что встречается чаще, или попросите PNG.
HEX, RGB или HSL — что копировать?
Все три описывают один и тот же цвет, так что вопрос в том, что вы будете с ним делать. HEX — компактный стандарт для CSS и любого графического редактора; сомневаетесь — копируйте его. RGB ждут canvas-код и большинство графических библиотек. HSL я выбираю, когда из цвета нужно вырастить семейство: оставляете тон и насыщенность, двигаете светлоту — и получаете состояния наведения и рамки, которые не выбиваются из стиля. Дальше можно больше: скормите цвет Генератору цветовых палитр, а пары «текст — фон» проверьте в Проверке контрастности.
Заодно соберите палитру
Каждый клик попадает в историю до двенадцати образцов, так что можно пройтись по фотографии — небо, кожа, тень, блик — и за минуту собрать рабочую палитру. Попробуйте на следующей картинке, которую вам пришлют вместо гайдлайна: Пипетка для изображений.