Почему шестнадцатеричный цвет в моем PNG отличается от того же шестнадцатеричного кода в браузере?

Вот проблема, которую я не могу решить: у меня есть изображение PNG с маленьким синим треугольником. Это актив, используемый для веб-сайта, который я создаю с разработчиком. Внешний вид его синего цвета немного отличается, он очень немного отличается от того же шестнадцатеричного цвета, который применяется к элементам через CSS.

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

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

Различные настройки цвета
Шестнадцатеричный код не один и тот же независимо от того, в каком профиле вы находитесь, это именно то, что делает профиль — сказать вам, что означает этот шестнадцатеричный код.
Ну, это именно то, что я имел в виду; то, что вы видите, может отличаться на разных экранах, но код остается тем же. Теперь, почему мой экран показывает другой цвет для одного и того же шестнадцатеричного кода в CSS, чем тот, который показывает мне Photoshop? Фотошоп просто использует мой общий цветовой профиль.
это профиль sRGB IEC 61966-2-1? Если это не так, то этот шестнадцатеричный код соответствует другому цвету.
Привет, RaymonV, добро пожаловать в GDSE и спасибо за вопрос. Если вы хотите узнать больше о сайте, посетите справочный центр или свяжитесь с одним из нас в чате графического дизайна , как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!
Мои настройки цвета в фотошопе: sRGB IEC61966-2.1, а политика управления цветом заключается в сохранении встроенных профилей. Моя калибровка экрана, конечно, не настроена на этот профиль (не будет отображать правильные цвета), но при переключении на этот профиль и отключении сохранения встроенных профилей файл по-прежнему дает мне тот же шестнадцатеричный для синего
Не могли бы вы опубликовать изображение?
Вот он, синий должен быть #1c314c. Я также должен отметить, что разница в цвете более заметна на моем компьютере с Windows, чем на моем Mac, и мой экран Windows не откалиброван. raymonvanvught.com/wp-content/uploads/2016/10/…
Ну, у меня это работает отлично, поэтому я не уверен, в чем проблема... не могли бы вы дать ссылку на место, где вы видите проблему?
Я не могу поделиться сайтом, на котором он размещен, все еще находящимся под эмбарго, но вот скриншот, который я сделал из изображения в контексте на моем компьютере с Windows. Вы можете ясно видеть, что треугольник имеет другой оттенок. raymonvanvught.com/wp-content/uploads/2016/10/color-diff.png
Кстати, я сделал круг и посмотрел на некоторых экранах моих коллег (у нас разные экраны), и на их экранах все выглядит нормально. Теперь это приводит меня к выводу, что весьма вероятно, что виноват экран моего ПК с Windows. Теперь я все еще действительно задаюсь вопросом, что заставляет этот единственный экран вести себя таким образом...

Ответы (1)

Это может произойти в сочетании со следующими причинами:

  • Профиль в управлении цветом ОС.
  • Профиль в настройках цвета Photoshop.
  • Профиль включен в ваше изображение.

Ваша проблема выглядит так, как будто ваше изображение имеет тот же профиль, что и Photoshop, но отличается от профиля ОС.

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

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

При работе для веба (экранов), чтобы избежать проблем с цветом:

  • Установите одинаковые цветовые профили в Windows и Photoshop (лучше всего использовать sRGB).
  • Не включайте (встраивайте) цветовые профили в изображения.
  • Настройте то, что вы хотите видеть, в настройках монитора, а не через профили или драйвер графической карты.
Почему шестнадцатеричный цвет в моем PNG отличается от того же шестнадцатеричного кода в браузере?
СпросиСетьПолитика конфиденциальности1y, 0v