网页渲染的颜色竟然和设定值的不同!Chrome 61+色差解决办法

最近在和设计对UI的时候发现色彩总是对不上。。。

打开屏幕截图工具识色,竟然发现浏览器渲染的颜色和设定值不一样!

这差点让我开始怀疑人生了。。竟然还有这样的Bug

%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112162130.jpg

上图可以看到,实际设定rgb(227,109,1),缺渲染出rgb(211,115,47),便暗一些。。

百度搜索无果~~开始翻墙Google

很快找到
https://productforums.google....

%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112161445.jpg

解释大致是Chrome61开始会遵循显示器上的配置文件。

发现我的连的是双屏显示器(一台Surface Stuido外连Dell的屏幕)可能其中一台的颜色配置文件不相同导致的问题。

打开显示器色彩配置:

图片描述

好吧~ 另一台显示器无法修改色彩配置,看来只能从浏览器来解决这个问题了。

解决办法(2选1)

方法一:关闭硬件加速,重启后浏览器就恢复正常
图片描述

方法二:打开chrome://flags/#force-color-profile,将色彩配置设置为sRGB
图片描述


前端后花园
前端后花园分享前端技术

Web

841 声望
13 粉丝
0 条评论
推荐阅读
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs16阅读 1.8k

封面图
图解浏览器的多进程渲染机制
观察浏览器的任务管理器可以发现,打开浏览器的一个页面需要多个进程,包括浏览器进程、GPU 进程、网络进程、渲染进程等,有插件的话还会包括各种插件进程(Chrome 选项 -> 更多工具 -> 任务管理器)。

兰俊秋雨6阅读 736

前端性能指标
传统性能标准初始化阶段navigationStart:请求开始时间,返回 0unloadEventStart:等于用户代理程序开始前一个文档的卸载事件之前的时间unloadEventEnd:等于用户代理程序完成前一文档的卸载事件之后的时间redire...

散一群逗逼9阅读 896

封面图
使用浏览器录制屏幕
最近有一个录制屏幕的需求,类似于录制软件的操作教程给别人演示。在网上搜了一下录制屏幕,结果大多需要下载安装,而且有收费或者广告。无意间找到一个使用浏览器在线录屏的网站,出于好奇,研究了一下实现的方...

来了老弟5阅读 1.8k评论 10

封面图
Chrome 103支持使用本地字体,纯前端导出PDF优化
在前端导出PDF,解决中文乱码一直是一个头疼的问题。要解决这个问题,需要将ttf等字体文件内容注册到页面PDF生成器中。但是之前网页是没有权限直接获取客户机器字体文件,这时就需要从服务器下载字体文件或者提示...

葡萄城技术团队3阅读 13.9k

伪数组(ArrayLike)
伪数组(ArrayLike)伪数组的定义和特性伪数组 (ArrayLike) ,又称类数组。是一个类似数组的对象,但是有如下几个特征。按索引方式储存数据0: xxx, 1: xxx, 2: xxx...具有length属性但是length属性不是动态的,不会...

OceanZH7阅读 10.5k评论 3

vue 实现音乐模块🏄,已添加到github,动起来
预览效果🏄Github地址基于vuejs、vuex歌曲接口基于 QQ音乐API,可以查看 QQ音乐播放地址 API

jigsaw4阅读 2.4k

Web

841 声望
13 粉丝
宣传栏