Перевод цветного фото в чёрно-белое: таблицы, формулы и онлайн-конвертер
💻 IT и кодОбновлено: 11 июля 2026 г.5 мин чтения
Вы когда-нибудь пытались перевести цветную фотографию в чёрно-белую и получали грязно-серый результат с потерянными деталями? Проблема в неправильных формулах. В этой статье я покажу, как математически корректно обесцветить фото, дам готовый код на JavaScript и Python, таблицы с весами для разных цветовых пространств и расскажу, как избежать 5 типичных ошибок.
⚡ Коротко: главное
Классическая формула luminosity: Gray = 0.299R + 0.587G + 0.114B оптимально передаёт яркость для sRGB.
Обесцвечивание через среднее (Average) даёт результат на ~20% темнее воспринимаемой яркости — используйте только для быстрых превью.
В Photoshop обесцвечивание через «Чёрно-белое» использует 6 цветовых ползунков — это самое гибкое решение для ручной настройки.
Онлайн-конвертер на нашем сайте обрабатывает до 40 МП изображения за 3 секунды с выбором из 4 методов обесцвечивания.
Многие думают, что преобразовать цветное фото в чёрно-белое — значит взять среднее арифметическое от трёх каналов: 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 года:
Стандарт
Red
Green
Blue
Применение
ITU-R BT.601 (SDTV)
0.299
0.587
0.114
Веб, sRGB, JPEG
ITU-R BT.709 (HDTV)
0.2126
0.7152
0.0722
HD-видео, Adobe RGB
Weighted Average (Photoshop)
0.3
0.59
0.11
Приближённый
Luminosity (sRGB с гаммой)
0.2126
0.7152
0.0722
Преобразование с гамма-коррекцией
Для обычного фото в интернете достаточно BT.601. Если нужна максимальная точность (например, для научных задач), используйте luminosity с гамма-коррекцией sRGB: сначала примените обратную гамму (γ=2.2), потом взвесьте, потом снова примените гамму.
Пошаговый пример с цифрами: обесцвечивание пикселя
Возьмём пиксель с координатами (100,200) на фото: R=200, G=150, B=100. Шаг за шагом:
Выберите стандарт: Для веба — BT.601 с весом (0.299, 0.587, 0.114).
Округлите до целого: 159 (значение в диапазоне 0–255).
Замените все три канала: 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
Получить пиксельные данные
Загрузите изображение в массив чисел (R, G, B).
2
Выбрать веса
Для веб-фото используйте (0.299, 0.587, 0.114).
3
Вычислить взвешенную сумму
Gray = 0.299*R + 0.587*G + 0.114*B.
4
Округлить до 0-255
Используйте целое число (0-255).
5
Заменить каналы
Присвойте R= G= B = Gray.
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, что даёт корректный результат. Но для продвинутого контроля — ручная реализация:
При работе с PNG с альфа-каналом нужно решить: оставлять альфу или заполнять белым фоном. Если оставить, прозрачные области станут чёрными (так как альфа не участвует в расчёте). Лучше сначала скомпозировать с цветом фона. Для Callback-функций в браузере используйте context.drawImage() на непрозрачном фоне.
HDR-изображения: если цветовые значения превышают 255 (например, в RAW), предварительно приведите к диапазону 0-1, примените tone-mapping, а затем обесцветьте — иначе получите пересветы. Для отладки выводите гистограмму.
Уже чёрно-белые исходники: проверьте, что все три канала равны — если нет, значит фото цветное, но выглядит серым. В этом случае любая формула даст одинаковый результат, но BT.601 безопаснее.
Типичные ошибки и как их отладить
Результат слишком тёмный: скорее всего используете усреднение. Замените на взвешенную формулу с битностью не менее 32 бит на пиксель.
Цветные шумы в B/W: JPG-сжатие оставляет артефакты, которые становятся пятнами. Примените лёгкое размытие по Гауссу (радиус 0.5) перед обесцвечиванием.
Неравномерные каналы после конвертации: проверьте, что преобразуете именно sRGB, а не Adobe RGB. Иначе цветовой охват сместится, и серый будет с оттенком.
Потеря деталей в тенях: используйте гамма-коррекцию: перед вычислением яркости примените обратную гамму, потом вычислите 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). Оба дают чёрно-белое, но математически разные.