Почему один HEX-код выглядит по-разному на разных экранах
HEX задаёт цвет в sRGB, но экран, профиль и освещение меняют его вид.
Проверка от CSS до комнаты покажет, где расходится цвет: в записи, профиле, настройках, возможностях дисплея или восприятии. Заодно станет понятно, когда Display P3 помогает, а когда его обвиняют зря.
В статье вы узнаете:
Что на самом деле задаёт HEX
Запись #336699 содержит три числа: 51 для красного канала, 102 для зелёного и 153 для синего. В CSS такая запись относится к пространству sRGB. Это важно: решётка и шесть знаков описывают не абстрактный «приглушённый синий», а конкретную точку внутри согласованной цветовой модели.
Спецификация CSS прямо относит HEX, rgb() и hsl() к способам записи sRGB. Для более широкого пространства браузеру нужна явная запись вроде color(display-p3 0.2 0.4 0.7). Одинаковые ненейтральные тройки в sRGB и Display P3 обычно не обозначают один и тот же цвет, потому что у пространств разные основные цвета [W3C, CSS Color 4].
В конвертере HEX, RGB и HSL можно ввести #336699 и получить rgb(51,102,153). Запись изменится, а цветовое пространство останется sRGB. Конвертер полезен, чтобы сверить числа и убрать ошибку формата, но он не знает, какой монитор стоит на столе и включён ли на телефоне ночной режим.
Значит, HEX решает только первую половину задачи. Он сообщает программе, какой цвет требуется. Вторая половина начинается, когда операционная система и дисплей пытаются этот цвет воспроизвести. Для печати к этой цепочке добавляется ещё один профильный перевод: отдельно разобрано, почему CMYK нельзя точно превратить в HEX одной формулой.
Почему Display P3 не виноват сам по себе
Display P3 охватывает больше насыщенных цветов, чем sRGB, особенно в красно-зелёной части диапазона. Отсюда родилась удобная, но неточная версия: якобы любой sRGB-цвет на P3-экране автоматически становится ядовитее.
При работающем управлении цветом этого происходить не должно. Браузер знает, что #336699 задан в sRGB, система знает профиль дисплея с широким цветовым охватом и пересчитывает сигналы так, чтобы экран воспроизвёл нужный sRGB-цвет. Больший охват здесь похож на большую коробку карандашей: наличие дополнительных зелёных не заставляет заменять ими обычный зелёный.
Перенасыщение появляется, если цепочка теряет смысл чисел. Например, приложение отправляет sRGB-значения на широкоформатный дисплей как необработанные значения его собственных каналов. Тогда координаты, рассчитанные для одних основных цветов, попадают на другие, более насыщенные основные цвета. Виноват не сам P3, а пропущенное преобразование.
Есть и обратная ситуация. Цвет, заданный через color(display-p3 ...), может лежать за пределами sRGB. Обычный дисплей физически его не воспроизведёт и покажет ближайший доступный вариант после преобразования цветового охвата. Тут различие ожидаемо: один экран умеет показать исходный цвет, второй вынужден приблизить его.
Где два экрана начинают расходиться
Путь от кода до глаза проходит несколько мест, в каждом из которых появляется своя погрешность.
Программа должна правильно истолковать цвет. CSS-код #336699 имеет понятный смысл, а у картинки может быть встроен другой профиль или не быть профиля вообще. Поэтому цвет фона в CSS и визуально такой же участок в PNG иногда расходятся, хотя пипетка показывает похожие числа. Дополнительную путаницу создают приложения, которые по-разному работают с профилями.
ICC-профиль должен правдиво описывать дисплей. Профиль сообщает системе, какие цвет и яркость экран воспроизводит в ответ на управляющие значения. Система использует это описание, чтобы скорректировать сигнал. Чужой профиль от похожей модели или старый профиль после изменения настроек может быть хуже стандартного: числа в нём точные, но описывают уже не тот экран.
Калибровка и профиль выполняют разные работы. Калибровка приводит дисплей к выбранному состоянию: настраивает яркость, цвет белого и тоновую характеристику. Профилирование измеряет получившееся поведение и записывает его для системы. Если после измерения поднять яркость, переключить режим «Яркий» или изменить температуру белого, профиль останется прежним, а свет уже изменится.
Матрица имеет физические границы. Бюджетный дисплей может не покрывать весь sRGB, плохо различать тёмные оттенки или заметно менять цвет под углом. Высокая паспортная яркость тоже не означает точную цветопередачу. Экран способен светить сильнее и одновременно ошибаться в нейтральном сером.
Автоматические режимы меняют цель. Ночная подсветка делает белый теплее, адаптивная яркость реагирует на комнату, режим энергосбережения снижает свет, а фирменные «улучшатели» могут поднять насыщенность и контраст. Эти функции полезны для глаз или батареи, но сравнивать цвет при разных режимах бессмысленно.
Комната участвует в просмотре. Яркое окно снижает видимый контраст, тёплая лампа меняет адаптацию зрения, цветная стена влияет на окружение. Международный консорциум по цвету отдельно указывает, что точность дисплейной калибровки зависит от условий просмотра, а небольшие различия человеческого зрения могут дать разные совпадения между дисплеями [ICC, Display calibration].
Наконец, один цвет может казаться разным даже на одном идеально настроенном экране. Поставьте серый квадрат сначала на белый, затем на чёрный фон. Значения пикселей не изменятся, а восприятие светлоты изменится. HEX остаётся прежним, зато мозг сравнивает его с новым окружением.
Как найти причину расхождения
Начинайте не с покупки калибратора, а с цифровой части. Она проверяется бесплатно и часто ловит проблему раньше дисплея.
1. Сверьте итоговые значения элемента. В инструментах разработчика посмотрите вычисленный color или background-color вместо одной переменной в исходном CSS. Проверьте opacity, альфа-канал, градиент, фильтр, режим смешивания и полупрозрачный слой сверху. Код #336699 и код #33669980 дают разные задачи, потому что второй смешивается с фоном.
2. Уберите разное окружение. Покажите образец одинакового размера на одном нейтрально-сером фоне. Не сравнивайте маленькую кнопку на белой странице с большой плашкой на тёмной. Это проверяет не дисплей, а контекст.
3. Используйте один и тот же файл или веб-страницу. Отправка через мессенджер может перекодировать изображение или удалить метаданные. Скриншот помогает отделить часть цифровой цепочки от физического света экрана, но система может преобразовать захват, выбрать SDR- или HDR-представление и встроить профиль. Поэтому перед сравнением проверьте пространство и профиль самого файла. Фотография монитора добавляет автобаланс белого, экспозицию, обработку камеры и свойства уже второго дисплея. Получается семейный портрет погрешностей.
4. Сравняйте режимы. Отключите ночную температуру, адаптивный цвет, повышенную насыщенность и энергосбережение. Выберите обычный sRGB-режим, если он есть, поставьте близкую яркость и смотрите на экраны под прямым углом в одной комнате.
5. Проверьте управление цветом. Убедитесь, что системе назначен профиль именно этого дисплея, а приложение его применяет. Для изображения проверьте встроенное цветовое пространство. Команда «назначить профиль» меняет смысл прежних чисел, а «преобразовать в профиль» меняет числа ради сохранения внешнего вида. Путать эти действия опаснее, чем перепутать две соседние буквы в HEX.
6. Если цвет важен для работы, измерьте экран. Приборная калибровка и профиль помогают согласовать дисплеи в заданных условиях. Они не делают разные панели идентичными и не отменяют границы охвата, зато заменяют настройку «на глаз» измеряемой процедурой.
Полезный контрольный тест состоит из нейтральных серых полей, плавных градиентов и нескольких sRGB-цветов. Если серый уходит в зелёный, проблема не в конкретном фирменном синем. Если расходится только картинка, а CSS-плашка совпадает, проверяйте профиль файла и программу. Если оба варианта одинаково слишком тёплые, смотрите настройки белого и ночные режимы.
Как работать с цветом для разных экранов
Для обычного сайта храните базовые цвета как sRGB и записывайте их в HEX, RGB или HSL. Это даёт понятный общий знаменатель для браузеров и большинства устройств. P3-версию имеет смысл добавлять как улучшение для совместимых экранов, если нужен цвет за пределами sRGB, а не просто потому, что новый синтаксис выглядит солидно.
Проверяйте интерфейс хотя бы на хорошем широкоформатном экране и на обычном sRGB-дисплее. При этом оценивайте не магическое совпадение оттенка, а устойчивость решения: читается ли текст, различаются ли состояния, остаётся ли акцент заметным, не превращается ли спокойный фон в кислотную плашку.
Для фирменного цвета укажите пространство вместе с числами: например, sRGB #336699. Отдельно задайте P3-координаты, если они подготовлены осознанно. Одна подпись «HEX» сообщает формат записи, но не обещает, что любой экран в солнечном кафе выдаст одинаковый спектр света.
Самый практичный вывод такой: одинаковый HEX в CSS означает один sRGB-цвет, но одинаковый код и одинаковое зрительное впечатление разделяет вся система вывода. Сначала проверьте числа, альфу и профили, затем режимы и окружение, а для цветокритичной работы измеряйте дисплей. Спор двух мониторов на глаз обычно заканчивается тем, что оба уверены в своей правоте. А если нужно понять более раннюю физическую развилку между светом экрана и отражением материала, она разобрана в статье о смешении цветов на экране и в краске.
Есть что добавить?
Напишите своё мнение, комментарий или предложение.