Перевод цветного фото в чёрно-белое: таблицы, формулы и онлайн-конвертер

💻 IT и кодОбновлено: 11 июля 2026 г.5 мин чтения
Вы когда-нибудь пытались перевести цветную фотографию в чёрно-белую и получали грязно-серый результат с потерянными деталями? Проблема в неправильных формулах. В этой статье я покажу, как математически корректно обесцветить фото, дам готовый код на JavaScript и Python, таблицы с весами для разных цветовых пространств и расскажу, как избежать 5 типичных ошибок.
⚡ Коротко: главное
  • Классическая формула luminosity: Gray = 0.299R + 0.587G + 0.114B оптимально передаёт яркость для sRGB.
  • Обесцвечивание через среднее (Average) даёт результат на ~20% темнее воспринимаемой яркости — используйте только для быстрых превью.
  • В Photoshop обесцвечивание через «Чёрно-белое» использует 6 цветовых ползунков — это самое гибкое решение для ручной настройки.
  • Онлайн-конвертер на нашем сайте обрабатывает до 40 МП изображения за 3 секунды с выбором из 4 методов обесцвечивания.

Почему простое усреднение RGB — плохая идея

Многие думают, что преобразовать цветное фото в чёрно-белое — значит взять среднее арифметическое от трёх каналов: Gray = (R+G+B)/3. На деле такой подход даёт неестественно тёмный результат, потому что человеческий глаз воспринимает зелёный в 6 раз ярче красного, а синий — тусклее всех. Пример: небо (R=135,G=206,B=235) по среднему даст 192 (светлый серый), а по luminosity — 191 (почти то же, но для зелёной травы разница принципиальна).

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

Если вы работаете с sRGB (стандарт для веба и мониторов), используйте формулу ITU-R BT.601: Gray = 0.299R + 0.587G + 0.114B

В этой формуле зелёный канал вносит почти 60% яркости, красный — 30%, а синий — всего 11%. Это точнее человеческого восприятия, и результат будет выглядеть контрастным и естественным.

Таблица коэффициентов для разных цветовых пространств

В зависимости от стандарта (телевидение, sRGB, Adobe RGB) коэффициенты могут отличаться. Вот актуальная таблица для 2026 года:

Для обычного фото в интернете достаточно BT.601. Если нужна максимальная точность (например, для научных задач), используйте luminosity с гамма-коррекцией sRGB: сначала примените обратную гамму (γ=2.2), потом взвесьте, потом снова примените гамму.

Пошаговый пример с цифрами: обесцвечивание пикселя

Возьмём пиксель с координатами (100,200) на фото: R=200, G=150, B=100. Шаг за шагом:

  1. Выберите стандарт: Для веба — BT.601 с весом (0.299, 0.587, 0.114).
  2. Вычислите взвешенную сумму: Gray = 0.299*200 + 0.587*150 + 0.114*100 = 59.8 + 88.05 + 11.4 = 159.25.
  3. Округлите до целого: 159 (значение в диапазоне 0–255).
  4. Замените все три канала: R=G=B=159. Получите тёплый серый.

Если бы мы использовали среднее арифметическое: (200+150+100)/3 = 150 — результат на 9 единиц темнее. Для соседнего синего пикселя (R=50,G=100,B=200) среднее даст 116,7, а BT.601 — 103,6 — разница ещё больше.

Grayₜₑₗₑ = 0.299·R + 0.587·G + 0.114·B

На практике это означает, что синие объекты станут темнее, а зелёные — светлее. Такой ч/б снимок будет контрастнее и легче читается.

Как перевести цветное фото в чёрно-белое через код
  1. 1
    Получить пиксельные данные

    Загрузите изображение в массив чисел (R, G, B).

  2. 2
    Выбрать веса

    Для веб-фото используйте (0.299, 0.587, 0.114).

  3. 3
    Вычислить взвешенную сумму

    Gray = 0.299*R + 0.587*G + 0.114*B.

  4. 4
    Округлить до 0-255

    Используйте целое число (0-255).

  5. 5
    Заменить каналы

    Присвойте R= G= B = Gray.

  6. 6
    Записать обратно

    Обновите пиксели в изображении и сохраните.

Этапы преобразования одного пикселя.

Рабочий код на JavaScript и Python

Вот пример функции на JavaScript для браузерного обесцвечивания через Canvas API. Код выполняет преобразование пиксель за пикселем:

function desaturate(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const gray = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
    data[i] = data[i+1] = data[i+2] = gray;
  }
  return imageData;
}
// Использование:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
desaturate(imageData);
ctx.putImageData(imageData,0,0);

Для Python с библиотекой Pillow (актуальная версия 11.1.0 для 2026 года) можно использовать встроенную конверсию. Однако стандартный Image.convert('L') использует веса ITU-R 601, что даёт корректный результат. Но для продвинутого контроля — ручная реализация:

from PIL import Image
import numpy as np

img = Image.open('photo.jpg')
img_array = np.array(img)
weights = [0.299, 0.587, 0.114]
gray = np.dot(img_array[...,:3], weights).astype(np.uint8)
img_gray = Image.fromarray(gray, mode='L')
img_gray.save('photo_bw.jpg')

Обратите внимание: код на JS выше изменяет исходный ImageData — для неразрушающего преобразования предварительно копируйте данные.

Чек-лист для идеального обесцвечивания

0 из 7

Edge-cases: прозрачность, HDR, монохромные исходники

При работе с PNG с альфа-каналом нужно решить: оставлять альфу или заполнять белым фоном. Если оставить, прозрачные области станут чёрными (так как альфа не участвует в расчёте). Лучше сначала скомпозировать с цветом фона. Для Callback-функций в браузере используйте context.drawImage() на непрозрачном фоне.

HDR-изображения: если цветовые значения превышают 255 (например, в RAW), предварительно приведите к диапазону 0-1, примените tone-mapping, а затем обесцветьте — иначе получите пересветы. Для отладки выводите гистограмму.

Уже чёрно-белые исходники: проверьте, что все три канала равны — если нет, значит фото цветное, но выглядит серым. В этом случае любая формула даст одинаковый результат, но BT.601 безопаснее.

Типичные ошибки и как их отладить

  1. Результат слишком тёмный: скорее всего используете усреднение. Замените на взвешенную формулу с битностью не менее 32 бит на пиксель.
  2. Цветные шумы в B/W: JPG-сжатие оставляет артефакты, которые становятся пятнами. Примените лёгкое размытие по Гауссу (радиус 0.5) перед обесцвечиванием.
  3. Неравномерные каналы после конвертации: проверьте, что преобразуете именно sRGB, а не Adobe RGB. Иначе цветовой охват сместится, и серый будет с оттенком.
  4. Потеря деталей в тенях: используйте гамма-коррекцию: перед вычислением яркости примените обратную гамму, потом вычислите luminosity, потом снова гамму.

Для отладки выводите гистограмму каналов. На ч/б изображении гистограммы трёх каналов должны совпадать. Если нет — где-то ошибка.

Как проще: онлайн-инструменты и бонусы

Если не хотите писать код, воспользуйтесь готовыми онлайн-решениями. Наш Конвертер цветного фото в чёрно-белое поддерживает 4 режима: Luminosity, Average, Custom веса и фильтр «Серый» как в старых фотоплёнках. Достаточно загрузить фото, выбрать режим и скачать результат. Инструмент работает в браузере — данные не уходят на сервер.

После обесцвечивания часто нужно дополнительно обработать фото: Фото в PDF для создания документа, Сжать фото онлайн для уменьшения размера файла, Обрезать фото онлайн для кадрирования или Отразить фото онлайн для зеркального отображения. Все инструменты бесплатны и не требуют регистрации.

Совет: для пакетной обработки десятков фото используйте наш конвертер в паре с инструментом «Сжать фото» — получится быстрый пайплайн.

🧮 Посчитайте сами — инструменты по теме

🧭 Разделы по теме

Частые вопросы

Какая формула для перевода цветного фото в чёрно-белое самая правильная?

Для стандартного sRGB и веба используйте формулу ITU-R BT.601: Gray = 0.299R + 0.587G + 0.114B. Она учитывает разную чувствительность глаза к цветам и даёт естественный результат.

Почему после обесцвечивания фото получается слишком тёмным?

Скорее всего вы используете среднее арифметическое (R+G+B)/3. Эта формула игнорирует восприятие яркости. Исправьте на взвешенную формулу с коэффициентами 0.299, 0.587, 0.114.

Как перевести фото в чёрно-белое в Photoshop?

В Photoshop перейдите в Image > Adjustments > Black & White. Появится панель с 6 ползунками (Reds, Yellows, Greens, Cyans, Blues, Magentas). Настройте яркость каждого цвета вручную для тонкого контроля.

Можно ли обесцветить фото онлайн без потери качества?

Да, используйте наш Конвертер цветного фото в чёрно-белое. Он работает без сжатия, на стороне клиента, качество не теряется. Поддерживает форматы JPG, PNG, WEBP до 40 МП.

Как перевести фото в чёрно-белое на iPhone?

Откройте фото в приложении «Фото», нажмите «Править», затем значок фильтра (три кружка) и выберите «Монохромный». Для более тонкой настройки используйте сторонние приложения, например Snapseed.

Что делать с прозрачными пикселями при обесцвечивании PNG?

Перед преобразованием скомпозируйте изображение с белым фоном, иначе прозрачные области станут чёрными. В коде можно обработать альфа-канал: Gray = (R * alpha + 255 * (1-alpha)) для каждого канала, но проще сначала нарисовать на белом фоне.

Как обесцветить фото без потери деталей теней?

Используйте формулу luminosity с гамма-коррекцией: сначала примените обратную гамму (γ=2.2), вычислите яркость с весами (0.2126, 0.7152, 0.0722), затем снова примените гамму. Это сохранит детали в тёмных участках.

Какая разница между обесцвечиванием и десатурацией?

Обесцвечивание (grayscale) заменяет цвет на яркость, теряя информацию о цветности. Десатурация (desaturation) уменьшает насыщенность до нуля, но может сохранить цветовой тон (если алгоритм использует цветовую модель HSV/HSL). Оба дают чёрно-белое, но математически разные.

Источники и нормативные документы

  1. ITU-R BT.601-7 Recommendation
  2. MDN Web Docs - Manipulating video using canvas
  3. Pillow (PIL Fork) Documentation

Ещё по теме «IT и код»

СтандартRedGreenBlueПрименение
ITU-R BT.601 (SDTV)0.2990.5870.114Веб, sRGB, JPEG
ITU-R BT.709 (HDTV)0.21260.71520.0722HD-видео, Adobe RGB
Weighted Average (Photoshop)0.30.590.11Приближённый
Luminosity (sRGB с гаммой)0.21260.71520.0722Преобразование с гамма-коррекцией