Почему шестнадцатеричный код — главный формат для CSS
Эта страница создана для тех, кому нужен именно шестнадцатеричный код цвета из изображения. В отличие от соседних страниц, которые отдают приоритет функциональной записи rgb() или hsl(), здесь первичным выводом является шестизначный HEX‑код (например, #1E90FF). Именно этот компактный формат без лишних скобок и разделителей используется в подавляющем большинстве CSS‑свойств: color, background-color, border-color и других. Для веб‑разработчика и дизайнера, работающего в Figma или Photoshop, HEX — это стандарт, который не требует дополнительного синтаксиса и сразу готов к вставке в код.
Важно понимать: стандартный шестизначный HEX не кодирует альфа‑канал. Современный CSS поддерживает восьмизначный HEX (#RRGGBBAA), но на данной странице выводится только шестизначный код, а прозрачность сообщается отдельно в процентах. Это сознательное решение, основанное на том, что подавляющее большинство проектов по‑прежнему используют шестизначную нотацию, а альфа‑канал приходится задавать отдельно — через rgba() или opacity. Инструмент не пытается угадать, как вы будете использовать прозрачность, но даёт точную информацию о ней.
Как происходит выбор пикселя
При загрузке изображения (поддерживаются форматы PNG, JPG, WebP, GIF, AVIF, HEIC — соответствующие MIME‑типы перечислены в спецификации) инструмент сразу показывает цвет и координаты центрального пикселя. Дальше всё управляется движением мыши: когда вы наводите курсор на изображение, под ним появляется увеличительное стекло (лупа), которое помогает прицелиться в конкретный пиксель. Значения HEX, RGB и HSL обновляются синхронно с перемещением курсора.
Если кликнуть мышью, текущий выбранный цвет сохраняется в историю (до 12 записей). Клик по любому отображаемому значению цвета (HEX, RGB, HSL) копирует его в буфер обмена. Если браузер блокирует доступ к буферу (например, по политике безопасности в HTTP‑версии сайта), выводится сообщение: «Could not copy — your browser blocked clipboard access.» — этот момент стоит учитывать при тестировании в не‑HTTPS окружении.
Изображения с наибольшей стороной более 4096 пикселей автоматически масштабируются. Это ограничение связано с производительностью отрисовки и объёмом данных, обрабатываемых в браузере. Для большинства практических задач такого разрешения более чем достаточно.
Прозрачность и её отображение
Поскольку шестизначный HEX не содержит альфа‑канала, прозрачность пикселя выводится отдельной строкой: «Alpha ‹n›% — this pixel is partly transparent.». Процент вычисляется на основе значения альфа‑канала в исходном изображении (от 0 до 255, пересчитывается в проценты). Например, если пиксель имеет альфа = 128, это 50% прозрачности.
Важно: инструмент считывает точное значение пикселя, как оно хранится в файле, не учитывая то, что может находиться за ним на экране. Если у вас PNG‑изображение с полупрозрачным красным цветом на прозрачном фоне, вы получите именно красный с альфа = 50%, а не смесь с каким‑либо фоном. Это корректное поведение для задачи извлечения цвета из самого изображения. Если вам нужен цвет, который получится при наложении на белый или чёрный фон, потребуется дополнительное вычисление — данный инструмент даёт сырые данные пикселя.
Влияние сжатия и антиалиасинга
Файлы JPEG, а также скриншоты и растровые изображения, прошедшие через антиалиасинг (сглаживание), почти никогда не содержат пикселей с идеально одинаковыми значениями в однотонной области. Например, область, которая кажется белой (#FFFFFF), на самом деле может состоять из пикселей с оттенками #FEFEFE, #FDFDFD и #FFFFFF. Это результат компрессии с потерями (JPEG) или алгоритмов сглаживания, которые смешивают цвета соседних объектов.
Поэтому инструмент показывает именно то значение, которое хранится в файле, а не то, которое вы ожидаете увидеть. Если вам нужен «чистый» цвет, старайтесь выбирать пиксель в центре однородной области, вдали от краёв и градиентов. Лупа помогает увидеть, состоит ли область из одинаковых пикселей или нет. Для PNG‑логотипов с резкими краями и сплошными заливками вы получите точный HEX‑код заливки. Для JPEG‑фотографий вы получите один из миллионов оттенков, на которые разбита фотография — это нормально.
Управление с клавиатуры и история выбранных цветов
Для тех, кто предпочитает клавиатуру или нуждается в повышенной точности, реализована навигация с помощью стрелок. Перемещение стрелками сдвигает перекрестие на один пиксель, а зажатый Shift — на десять пикселей. Это позволяет выбирать цвет с субпиксельной точностью, не боясь дрожания руки. Клавиши Enter или Space сохраняют текущий цвет в историю.
В истории сохраняется до 12 записей. Если вы кликнете по одному и тому же пикселю несколько раз, он будет добавлен повторно, так как инструмент не удаляет дубликаты. Однако стоит обратить внимание: цвета с одинаковыми значениями R, G и B, но с разным альфа‑каналом, считаются разными записями. Например, пиксель #FF0000 с альфа 100% и #FF0000 с альфа 50% будут сохранены дважды — это логично, так как их внешний вид различается.
При нажатии на любой сохранённый образец в истории текущий цвет сбрасывается к этому образцу, но не в изображении, а в панели вывода. Это удобно, если вам нужно скопировать значение сохранённого цвета повторно.
Практические сценарии использования
- Дизайнер интерфейсов загружает скриншот сайта или мокап, выбирает пиксель фона или кнопки и получает точный HEX‑код для использования в Figma или CSS.
- Веб‑разработчик находит на референсном изображении оттенок, который нужно повторить в стилях, и копирует
#1E90FFпрямо из панели. - Бренд‑менеджер проверяет, соответствует ли цвет логотипа на фотографии официальному HEX‑коду бренда (например, #FF6600).
- Контент‑мейкер подбирает цветовую палитру для обложки видео, вытягивая доминирующие оттенки из фотографии.
Инструмент полностью работает на стороне клиента: файл не загружается на сервер. Это важно для конфиденциальности — вы можете обрабатывать чувствительные изображения, не опасаясь утечки.
Часто задаваемые вопросы
Почему HEX‑код не показывает прозрачность?
Шестизначный HEX (например, #1E90FF) не содержит информации об альфа‑канале. Восьмизначный HEX поддерживается CSS, но на данной странице выводится только шестизначный код, а прозрачность указывается отдельно в процентах. Это сделано, чтобы не путать пользователей, привыкших к классической записи.
Почему в соседнем приложении (Photoshop) тот же участок даёт другой цвет?
Photoshop или другой редактор может применять цветовой профиль (ICC), преобразовывать цвета в своё цветовое пространство (sRGB, Adobe RGB) или учитывать компенсацию гаммы. Данный инструмент считывает значения, как они хранятся в файле, без дополнительной цветокоррекции. Если исходное изображение не содержит встроенного профиля, результаты будут совпадать, но при наличии профиля возможно расхождение.
Можно ли загрузить изображение больше 4096 пикселей?
Да, но оно будет автоматически уменьшено до длинной стороны 4096 пикселей. Это сделано для производительности, так как каждый пиксель может быть считан при наведении мыши. Если вам нужен пиксель из области, которая оказалась за пределами уменьшенной версии, сначала обрежьте изображение до нужного участка.
Почему я сохранил цвет, а он исчез из истории после 12-го?
История ограничена 12 записями. Когда вы добавляете 13-й цвет, самый старый удаляется. Это упрощает интерфейс и предотвращает переполнение. Если вам нужно сохранить больше цветов, вы можете скопировать их и хранить в отдельном файле.
Как сбросить всё и начать заново?
Нажмите кнопку «Start over». Она очищает загруженное изображение, удаляет всю историю выбранных цветов и возвращает инструмент в начальное состояние.
Что делать, если я перепутал формат файла?
Поддерживаются только PNG, JPG, WebP, GIF, AVIF и HEIC. Если вы перетащите файл другого формата (например, BMP или TIFF), появится сообщение: «That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.». Также если файл повреждён или не может быть открыт браузером, вы увидите сообщение о том, что изображение не открылось.