Гайды

Как определить цвет пикселя?

Что такое пиксель, зачем узнавать его цвет и как это сделать: практические советы и сервисы для определения
Как определить цвет пикселя?

Каждый пиксель имеет свой цвет. И он всегда зашифрован в цифрах, в зависимости от цветовой модели. Чтобы узнать точный цвет, нужно понять, в какой он модели представлен, и определить его значения.

Спойлер: «на глаз» определить не получится, будем узнавать через специальные инструменты и сервисы.

Что такое пиксель

Пиксель (от англ. picture element — элемент изображения) — минимальный дискретный элемент цифрового изображения или дисплея, его структурная единица. То есть это самая маленькая логическая единица, из которой состоит графическое изображение. Пиксель выглядит как миниатюрный квадратик.

Пиксели используются в цифровой фотографии, видео, компьютерной графике, телевизорах, мониторах и мобильных устройствах. При показе изображений точки сливаются вместе и так создают непрерывное визуальное восприятие.

Аналогию можно провести с мозаикой, где отдельные части одинаковой формы и размера собираются вместе — как пиксели на мониторе — и образуют видимое изображение.

Как определить цвет пикселя
Так выглядит логотип Unisender, разложенный на пиксели

Размер и количество пикселей в изображении определяют его разрешение. Чем больше пикселей — тем лучше и детализированнее картинка.

Зачем определять цвет пикселя

Цвет — важный параметр в визуальных приложениях и областях, связанных с обработкой изображений. А знание цвета пикселя помогает в разных областях решать различные задачи:

Визуальные приложения. При создании и редактировании изображений и видео требуется точное определение цвета пикселей, чтобы достичь желаемых визуальных эффектов.

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

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

Полиграфия и печать. Используют для контроля качества печати, подготовки цветовых профилей для разных типов печатных устройств.

Игровая индустрия. Для создания реалистичной графики — чтобы добиться более точного отображения цветов и оттенков, создавать более живые и естественные изображения в игровых мирах.

Компьютерное зрение. Для распознавания и классификации объектов на изображениях, автоматической сортировки продуктов на производстве, разработки систем безопасности с распознаванием лиц или обнаружением объектов на видео.

Медицина. Для анализа медицинских изображений, таких как рентгеновские снимки или снимки МРТ.

Какие бывают цветовые модели 

Для работы с цветом важно понимать, как он устроен. Есть несколько систем представления цвета, с которыми дизайнеры сталкиваются каждый день.

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

В RGB-модели каждый цветовой канал представлен числом от 0 до 255, где 0 обозначает отсутствие интенсивности цвета, а 255 — максимальную интенсивность. Комбинируя значения этих трёх каналов, мы можем получить огромное количество различных цветов и оттенков.

RGB-модель цвета
Например, пиксель с цветом (255, 0, 0) будет ярко-красным, пиксель с цветом (0, 255, 0) — ярко-зеленым, а пиксель с цветом (0, 0, 255) — ярко-синим

CMYK. Это цветовое пространство используется в полиграфии для стандартной триадной печати. Модель основана на вычитании из белого первичных цветов: голубой цвет вычитает из белого цвета красный, жёлтый — синий, пурпурный — зелёный.

В отличие от RGB-модели CMYK обладает меньшим цветовым охватом.

В CMYK-модели каждый цветовой канал представлен числом от 0 до 100, где 0 обозначает отсутствие цвета, а 100 — максимальную интенсивность. Цвет пикселя в этой модели обозначается четырьмя числами в формате (C, M, Y, K), где каждое число представляет процентное значение интенсивности соответствующего цветового канала.

CMYK-модель цвета
Пиксель с цветом (0, 100, 100, 0) будет насыщенно-красным

HSB. Модель для более гибкого представления цвета. Она основана на модели RGB и имеет другую систему координат. Каждый цвет в этой модели получается при добавлении к основному спектру чёрного или белого цвета.

В HSB-модели цвет пикселя обозначается тремя значениями: оттенок (H), насыщенность (S) и яркость (B). Оттенок измеряется в градусах от 0 до 360, где 0 и 360 соответствуют красному цвету. Насыщенность и яркость измеряются в процентах от 0 до 100.

HSB-модель цвета
Пиксель с цветом (120, 75, 90) будет иметь зелёный оттенок, среднюю насыщенность и высокую яркость

Шестнадцатеричные цвета или HEX-цвета. Способ определения цветов, который используют в веб-разработке и дизайне. Основан на системе исчисления, в которой каждый цветовой канал (красный, зелёный, синий) представлен двумя шестнадцатеричными символами.

В структуре HEX-кода каждый шестнадцатеричный символ может принимать значения от 0 до 9 и от A до F. Здесь A соответствует числу 10, B — 11, C — 12, D — 13, E — 14 и F — 15. Комбинация этих символов позволяет определить более 16 млн различных цветовых оттенков.

HEX-цвета пример
#FF0000 — насыщенный красный цвет; #00FF00 — насыщенный зелёный; #0000FF — насыщенный синий; #FFFFFF — белый; #000000 — чёрный

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

Каким способом определять цвета пикселей

Paint

Откройте изображение в Paint и выберите инструмент «Палитра». Наведите пипетку на пиксель изображения, цвет которого вы хотите определить, и щёлкните левой кнопкой мыши.

Затем кликните на инструмент «Изменение цветов». Выбранный цвет отображается в таблице «Изменение палитры», в окошке «Цвет/заливка».

Чтобы узнать код цвета, посмотрите на значения RGB (красный, зелёный, синий).

Определение цвета пикселя в Пэйнте
Все параметры цвета отображаются в таблице под палитрой

Код элемента в браузере

Чтобы узнать цвет пикселя на странице в браузере, мышкой выделите на сайте необходимый элемент, затем кликните по нему правой кнопкой мыши и выберите «Просмотреть код страницы».

Когда код откроется, найдите строку color и щёлкните по ней левой кнопкой мыши.

Просмотр цвета через код страницы

Выберите инструмент «Пипетка», наведите курсор на элемент, цвет которого хотите узнать, и кликните по нему. Цвет отобразится в окне палитры, а код — под её окошком. Слева от кода можно изменять цветовую модель, чтобы узнать код элемента.

Определение цвета через код страницы
Немножко кода — и любой оттенок становится известен

Графические редакторы

В любом графическом редакторе можно также определить цвета пикселя. Для этого откройте изображение в нужном редакторе и найдите инструмент «Пипетка». В зависимости от программы он может называться по-разному, но выглядит всегда одинаково — как пипетка.

Затем кликните левой кнопкой мыши в область картинки, цвет которой вас интересует, и перейдите в палитру, чтобы посмотреть оттенки и код цвета.

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

Онлайн-сервисы

Ещё можно воспользоваться онлайн-сервисами, чтобы определить цвет пикселя на картинке или фото. Инструменты работают по похожему принципу и помогают быстро установить значения цвета.

Покажу на примере ImageColorPicker.online. Зайдите в сервис и загрузите картинку. Затем выберите нужную область и кликните по ней  мышкой. Слева вы увидите результат: цвет и код, который можно копировать.

Как определить цвет пикселя в сервисе ImageColorPicker.online

Еще несколько онлайн-сервисов:

Пипетка онлайн — бесплатный сервис, в котором можно определить точный цвет на картинке. Можно загрузить фото или картинку, указав URL-адрес изображения. Поддерживает форматы JPG, JPEG, PNG, GIF, WEBP.

Gradients.app — определяет цвет пикселя загруженной картинки. С его помощью можно составить палитру выбранных на картинке цветов.

Пипетка — бесплатный веб-инструмент для определения цвета пикселя из растрового изображения.