CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间

各位观众老爷,大家好!今天咱们就来聊聊CSS里那些个“高大上”的色彩玩意儿:HDR Color(Rec.2020, Display-P3)和感知均匀性色彩空间。别怕,听名字唬人,其实理解起来很简单,保证你听完能跟人吹牛皮! 第一部分:HDR Color,让你的屏幕亮瞎眼 啥叫HDR?High Dynamic Range,高动态范围。简单来说,就是能显示更亮、更暗,以及更多的颜色。以前的sRGB色彩空间就像个小房间,HDR色彩空间就像个大别墅,住的颜色多了去了。 CSS支持两种主要的HDR色彩空间:Rec.2020和Display-P3。 Rec.2020: 这货是个野心家,目标是覆盖人眼能看到的大部分颜色。但目前来说,大部分显示器还hold不住它,只能显示它的一部分子集。 Display-P3: 相对务实一点,是苹果搞出来的,比sRGB颜色更广,而且现在很多显示器都支持,兼容性更好。 怎么在CSS里用它们? 很简单,用color()函数。这函数就像个万能钥匙,可以打开各种色彩空间的大门。 /* 使用Display-P3 */ body { background-color: color …