Как получить точный цвет с изображения: HEX, RGB и HSL

Чтобы получить точный цвет с изображения, считайте значение одного пикселя, а не определяйте цвет на глаз. Откройте картинку в пипетке для цвета, наведите курсор на нужное место, щёлкните и скопируйте HEX-код. Результат — записанное в файле значение этого пикселя, поэтому при повторном выборе той же точки в том же файле цвет будет тем же.

Пипетка для цвета на изображенииНужен точный код цветаСделать бесплатно

Что хранит пиксель

Каждый пиксель — это крошечный квадрат одного цвета. На экране или в файле изображения он хранится как три числа: для красного, зелёного и синего, каждое от 0 до 255. Чистый красный — это 255, 0, 0. Эти три числа несут одну и ту же информацию в любом формате, поэтому один и тот же цвет можно записать несколькими способами.

HEX, RGB и HSL

• HEX записывает каждое число в шестнадцатеричной системе, по два символа на канал. #FF0000 — это чистый красный. Его используют веб-страницы, CSS и большинство инструментов для дизайна.
• RGB записывает те же числа в десятичной системе: rgb(255, 0, 0). Это тот же цвет, что и HEX-код.
• HSL описывает цвет так, как о нём обычно говорят. Тон — это угол на цветовом круге, насыщенность — сила цвета, а светлота — насколько он светлый или тёмный. hsl(0, 100%, 50%) — чистый красный.

Используйте HEX, когда вставляете цвет в код, RGB — когда этого требует инструмент, а HSL — когда хотите более светлый или тёмный вариант того же оттенка. Если в HSL менять только светлоту, тон сохраняется, а с HEX сделать это вручную сложнее. Для проверки контраста между двумя цветами см. статью HEX, RGB, HSL, CMYK и контраст.

Вот цвет, использованный в таблице стилей:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Почему код может не совпадать с экраном

• Изображение сжато. JPEG экономит место, сглаживая мелкие детали, поэтому пиксели у края могут немного отличаться от цвета, который вы видите в середине области.
• Края смешиваются. Там, где сходятся два цвета, пиксели между ними представляют собой смесь, а не самостоятельный цвет.
• Цветовые профили различаются. Пипетка читает значения, которые декодирует браузер, а они в sRGB. Фото, сохранённое с широкогамутным профилем, в других программах может выглядеть иначе.
• Масштабирование смешивает пиксели. Скриншот, сделанный при масштабированном отображении, может содержать смешанные пиксели. По возможности делайте снимок экрана в полном размере.
• Очень большие изображения читаются по копии. Картинки, у которых длинная сторона больше 6000 пикселей, читаются по копии размером 6000 пикселей, поэтому значение отдельного пикселя может немного отличаться от значения в файле полного размера.

Выбирайте точку из середины однотонной области

Найдите участок одного цвета и переместитесь к его центру. Лупа показывает 11 на 11 пикселей вокруг курсора, так что вы видите, однородна ли точка или в ней есть смесь. С клавиатуры перемещайте перекрестие на один пиксель стрелками или на десять с Shift, а для выбора нажмите Enter. Перед копированием проверьте значение в поле вывода.

Используйте палитру для цветовой схемы

На фото редко важен только один цвет. Палитра показывает до шести основных цветов изображения. Она округляет каждый пиксель до 16 уровней на канал, подсчитывает группы и оставляет самые частые группы, отличающиеся друг от друга. Каждый образец показывает среднее значение своей группы. Нажмите на образец, чтобы скопировать его HEX-код. Относитесь к палитре как к отправной точке, ведь это среднее значение, а не измеренный фирменный цвет.

Перевод между форматами

Если инструмент для дизайна просит другой формат, вставьте HEX-код в конвертер цветов. Он переводит между HEX, RGB и HSL без изменения цвета, поэтому результат совпадает с выбранным вами кодом.

Последние выборы и конфиденциальность

Инструмент сохраняет ваши последние выборы на странице, чтобы их можно было сравнить. Они хранятся только в памяти этой вкладки и исчезают при её закрытии. Само изображение читается внутри вашего браузера и никогда не отправляется на сервер.

Как сделать это в fixmint

1. Откройте пипетку для цвета на изображении и перетащите туда фото.
2. Наведите курсор на нужное место. Либо выберите картинку и перемещайте перекрестие стрелками по одному пикселю, удерживая Shift для шага в десять пикселей.
3. Щёлкните или нажмите Enter, чтобы выбрать цвет. Перед копированием проверьте значение в поле вывода.
4. Нажмите кнопку «Копировать» рядом с HEX, RGB или HSL, чтобы скопировать нужное значение.
5. Если инструмент для дизайна просит другой формат, вставьте значение в конвертер цветов.

Быстрые ответы

Почему цвет на моём экране выглядит иначе? Экран показывает масштабированную версию файла с учётом цветового профиля. Выберите точку из середины однотонной области и сравните HEX-код с известным образцом.

Какой формат копировать? HEX — для веб-страниц и большинства инструментов для дизайна. RGB или HSL используйте, когда инструмент требует именно их.

Инструмент загружает моё изображение? Нет. Изображение декодируется и читается внутри вашего браузера.