前端网页制作中，浏览器颜色显示存在色差怎么办，苹果电脑和非苹果电脑显示

时间：2024-01-29 02:05:01 | 来源：网站运营

时间：2024-01-29 02:05:01 来源：网站运营

前端网页制作中，浏览器颜色显示存在色差怎么办，苹果电脑和非苹果电脑显示颜色不一样怎么解决？：题主这个问题其实困扰了不少设计师及将图片分享到网站上的摄影师，所以小编决定来答一波~~




浏览器图片颜色与实际颜色不符，可能是浏览器的问题。

事实上，浏览器也会受到色彩管理系统的控制。当图片上传到互联网上时，可能由于图片与浏览器的色彩空间不匹配，超过浏览器显色范围极限的色彩信息会丢失，从而产生色彩失真的情况。

题主可以尝试从以下两个方面来解决：

① 如果图片采用Adobe RGB色域，建议改成sRGB色域范围

目前，Windows系统及大部分浏览器只支持显示sRGB色域，如果图片是采用Adobe RGB色域范围，建议改为sRGB色域范围。




因为Windows的默认色彩空间是sRGB，互联网web环境的默认色彩空间也是sRGB。如果在设计中使用了Adobe RGB而不进行色彩管理，将设计作品传送到互联网上，色彩可能会显灰，出现严重色偏现象。




② 保存时图片加入ICC配置文件并储存为WEB所用格式，之后使用能支持ICC加载的浏览器。

ICC（international color consortium）配置文件是一种描述设备色彩特性的数据文件，主要用于各种设备之间保持色彩传递的一致性。

如果显示器校色了，那么用校色仪生成的那个ICC文件；如果没有校色的条件，那么用显示器厂商提供的通用ICC文件。

使用支持ICC加载的浏览器时，通过色彩管理系统对ICC文件进行重新转换与处理，可以输出不错的色彩，但如果完全不进行色彩空间的转换，实际差异会非常大。

附上由Web browser color management test提供的浏览器色彩管理测试：

http://cameratico.com/tools/web-browser-color-management-test/

大家只要把这个链接复制到自己使用的浏览器地址栏就可进行测试~

几款主力浏览器Chrome、IE、Firefox、Safari的测试结果可看本站文章停止扯淡！！漫谈显示器色彩管理（四）

懒得戳开原文的老铁，可以看看下面小编做一回搬运工整理的内容~

Chrome：支持v2 ICC profile的图片，无法将untagged的图片和CSS元素正确默认为sRGB色彩空间

IE11：支持v2 ICC profile和v4 ICC profile，能够识别tagged和untagged的图片和CSS元素，却无法正确按我们的意图将图片的ICC Profile映射到显示器Gamut上，而是将显示器Gamut默认为是sRGB色彩空间（也就是把ProPhotoRGB的(255,0,0)与sRGB的(255,0,0)直接划等号对应，但ProPhotoRGB的色彩范围比sRGB广，因此饱和度会降低）

Firefox：添加插件后，既能够正确识别ICC v2和v4，也能正确识别Untagged的图片和CSS元素。且能用Perceptual方式将各种Profile的图片映射到显示器的Gamut上，色彩管理能力最优。

Safari：只能对Tagged图片进行转换，无法转换untagged的图片和CSS元素。




浏览器和显示器的手动分割线>>>>>>>>>>>>>>>>>>




唠完浏览器的毛病，再来唠唠显示器的问题~

题主感觉苹果和非苹果电脑颜色不一致，我猜可能是两台屏幕的色彩显示能力不一致。

因为#f3f3f3偏灰色，#fff偏白色，如果大色块仍无法区分，说明显示器色彩不够准确。

打个比方：

准确色彩是0，苹果笔记本屏显色彩可能是0或者1（取决于你用的哪一款，Pro相对来说色彩更为准确，可能达到0的标准），普通显示器的色彩显示能力一般较弱可能是-1。那么显而易见，因为显色不准，两台屏幕之间有差值，导致色彩不一致。




解决显示器色彩不准的一般方法如下：

① 使用校色仪校色

可参考本站回答笔记本电脑屏幕色差如何调校？




但校色的意义，是将屏幕的色彩调整到面板的最佳显示状态。因此，校色的效果，是会受到屏幕本身的条件基础限制，如果屏幕本身条件不足，比如色域只有60%~70%sRGB，也无法调整到100%sRGB。

因此，如果是因为显示器屏幕本身条件不够而出现的色差，可以采用另一个方法来弥补这个弊端——选择专业显示器。

② 选择专业显示器

因为是用于专业设计，普通显示器的色彩等参数并不能满足设计的需求。因此在选择外接显示器时，必须考虑专业显示器。

关于专业显示器要如何选择，可以参考本站回答怎么挑选做设计用的显示器，要看哪些参数呢？




以上解答希望能对各位老铁有所帮助啦，有说得不对的，还请各位大神温柔指正(〃’▽’〃)