沈阳网站建设哪家公司好,电商运营怎么做如何从零开始,wordpress .net,桂林漓江官网引言
近期#xff0c;三大主流浏览器引擎均发布最新版本#xff0c;支持W3C的CSS Color 4标准#xff0c;包含新的取色方法color()和相应语法#xff0c;可展示更多的色域及色彩空间#xff0c;这意味着web端能展示更丰富更高清的色彩。虽然目前只有最新版本的现代浏览器…引言
近期三大主流浏览器引擎均发布最新版本支持W3C的CSS Color 4标准包含新的取色方法color()和相应语法可展示更多的色域及色彩空间这意味着web端能展示更丰富更高清的色彩。虽然目前只有最新版本的现代浏览器才支持我们可以先提前了解一下这项新标准。
本文首先会先简单介绍几个色彩的基础概念了解为何需要新标准之后会介绍新标准中的方法和语法使用。
基础概念
色域color gamut
指颜色的可选范围。如sRGB色域目前web广泛应用的色域标准使用红red绿green蓝blue作为基础色色值范围0~255三种基础色互相混合起来可展示255*255*255种颜色这大致可理解为sRGB的色域。
现代web css使用的sRGB色域仅满足基础性的色彩需求能展示的色彩范围远小于人类肉眼所能感知的颜色范围也远低于高清展示的要求。
以下是sRGB与其他几种色域标准的色值范围大小比较 以下是sRGB与人类肉眼可感知的色域比较 色彩空间color space
色彩空间可以理解为一个基于某一色域标准下构建的空间数学模型例如一些简单的方块、圆柱的3D模型可以用来标记出色域中每个颜色的空间位置各个颜色之间的关系等。
再用sRGB举例红red绿green蓝blue三种基础色可设置为3个直线坐标轴每种颜色便可标记为这个立方体中的一个点在css中便是使用rgb()方法来取色参数为指定颜色在色彩空间中的坐标(R, G, B)。
再再比如css的另一个取色方法hsl()使用的是一套完全不同的色彩空间HSLH色相hue是取值范围为0~360的角度可作为角轴S饱和度Saturation和L亮度Lightness作为两个直线轴可构建为一个圆柱形的空间css中使用hsl(H, S, L)表示颜色。 一种色域标准可以使用不同的色彩空间来描述不同的色域标准也可以使用的是同一类的色彩空间表示。例如sRGB可以使用rgb()、hsl()、hwb()等方式进行描述而像Display-P3、Rec2020色域都可以使用RGB的色彩空间来描述只是空间的边界范围有所不同。
为什么要支持高清色彩
高清意味着更高范围的色域让我们先直观感觉一下窄色域与广色域的视觉差距 在实际的css颜色取值中我们常用的方法有很多rgb()、rgba()、hsl()、hwb()对应不同的色彩空间但取的都是同一色域范围内的颜色即sRGB大概只能展示人类肉眼可感知的色彩中的30%仿佛在使用一台90年代的电视机播放4K电影。
虽然目前的网络显示设备很多还是sRGB标准并不支持显示更广色域标准的色彩仅部分HDR显示器、或视频录制设备、电影制造中使用了如Display P3这类更广的色域标准。但对于高清的需求只会越来越多支持更广色域标准注定也是未来web端显示的目标之一。
为应对这一趋势W3C的CSS Color 4标准定义了新方法color()和其他语法能更灵活的指定各种不同色域标准下的颜色以及更好的色彩渐变展示。最近主流三大web浏览器也都已支持了W3C的新标准。
CSS Color 4
回顾现有的色彩空间
2000年以来我们有多种方式指定色值hex色值#rgb、#rrggbb、rgb()、rgba()、或是一些特定颜色的字符如white、pink等2010年左右开始浏览器开始支持hsl()方法2017年hex色值扩展了对于透明度的支持#rrggbbaa之后各种浏览器又陆续增加对hwb()方法的支持。
不同的方法对应的是不同的色彩空间但色域都是同一个即sRGB。
HEX 使用十六进制的数字来分别表示R、G、B、A的值
.valid-css-hex-colors {/* 一般标准 */--3-digits: #49b;--6-digits: #4499bb;/* 带透明度 */--4-digits-opaque: #f9bf; /* 不透明 */--8-digits-opaque: #ff99bbff; /* 不透明 */--4-digits-with-opacity: #49b8; /* 透明度88% */--8-digits-with-opacity: #4499bb88; /* 透明度88% */
}
RGB 使用0255的十进制数字或是0%100%的百分比来指明R、G、B透明度A使用百分比或0~1的数字表示
.valid-css-rgb-colors{--classic:rgb(64, 149, 191);--modern:rgb(64 149 191);--percents:rgb(25% 58% 75%);--classic-with-opacity-percent:rgba(64, 149, 191, 50%);--classic-with-opacity-decimal:rgba(64, 149, 191, .5);--modern-with-opacity-percent:rgb(64 149 191 / 50%);--modern-with-opacity-decimal:rgb(64 149 191 / .5);--percents-with-opacity-percent:rgb(25% 58% 75% / 50%);--percents-with-opacity-decimal:rgb(25% 58% 75% / 50%);--empty-channels:rgb(none none none);
}
HSL 这种色彩空间更符合人类自然理解无需了解红绿蓝基础色是如何混合的。参数分别表示
Hhue色相取值0deg~360degSSaturation饱和度取值0%~100%LLightness亮度取值0%~100%
.valid-css-hsl-colors{--classic:hsl(200deg, 50%, 50%);--modern:hsl(200 50% 50%);--classic-with-opacity-percent:hsla(200deg, 50%, 50%, 50%);--classic-with-opacity-decimal:hsla(200deg, 50%, 50%, .5);--modern-with-opacity-percent:hsl(200 50% 50% / 50%);--modern-with-opacity-decimal:hsl(200 50% 50% / .5);/* 无色相和饱和度仅用亮度可表示黑白色 */--empty-channels-white:hsl(none none 100%);--empty-channels-black:hsl(none none 0%);
}
HWB 形式上和HSL类似但使用的3个维度为
HHue色相取值0deg~360degWWhiteness白色的浓度0~100%BBlackness黑色的浓度0~100%
.valid-css-hwb-colors{--modern:hwb(200deg 25% 25%);--modern2:hwb(200 25% 25%);--modern-with-opacity-percent:hwb(200 25% 25% / 50%);--modern-with-opacity-decimal:hwb(200 25% 25% / .5);/* 无色相和饱和度仅用亮度可表示黑白色 */--empty-channels-white:hwb(none 100% none);--empty-channels-black:hwb(none none 100%);
}
新方法color() 新的color()方法的参数类似于rgb()方法使用R、G、B三个直线轴上的数值来指明色彩不同的是color()方法的第一个参数可以接收除sRGB以外的其他色域下的色彩空间标识符且R、G、B的值仅支持01或0%100%。
.valid-css-color-function-colors {--srgb: color(srgb 1 1 1);--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);--display-p3: color(display-p3 1 1 1);--rec2020: color(rec2020 0 0 0);--a98-rgb: color(a98-rgb 1 1 1 / 25%);--prophoto: color(prophoto-rgb 0% 0% 0%);--xyz: color(xyz 1 1 1);
}
方法定义color(colorspace c1 c2 c3[ / A])
参数colorspace标识符指明使用哪种色彩空间可选值包括srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50, andxyz-d65.参数c1、c2、c3可以是number0~1、百分比或none对应指定色彩空间下的各参数值比如srgb,srgb-linear,display-p3对应的是R、G、B的值具体需要看指定色彩空间描述颜色的维度。参数A可选项可以是number0~1、百分比或none指明颜色的透明度
使用color()描述不同的色彩空间
sRGB
不再支持0255取值改为01范围其实和百分比的形式是等价的。如果传了大于1的数值也默认当作1来解析。
.valid-css-srgb-colors{--percents:color(srgb 34% 58% 73%);--decimals:color(srgb .34 .58 .73);--percents-with-opacity:color(srgb 34% 58% 73% / 50%);--decimals-with-opacity:color(srgb .34 .58 .73 / .5);/* 色值为none或空时表示黑色 */--empty-channels-black:color(srgb none none none);--empty-channels-black2:color(srgb);
}
Linear sRGB
Linear sRGB和sRGB是不同的色彩空间sRGB的取值是通过一个伽马曲线函数做过校正的并不是线性变化的更适应人眼的感知特性即对明暗的感知是非线性的而Linear sRGB的颜色变化是线性的以下是明暗从0-1渐变时两种色彩空间实际的渐变走向。 .valid-css-srgb-linear-colors{--percents:color(srgb-linear 34% 58% 73%);--decimals:color(srgb-linear .34 .58 .73);--percents-with-opacity:color(srgb-linear 34% 58% 73% / 50%);--decimals-with-opacity:color(srgb-linear .34 .58 .73 / .5);/* 色值为none或空时表示黑色 */--empty-channels-black:color(srgb-linear none none none);--empty-channels-black2:color(srgb-linear);
}
Display P3、Rec2020
display P3是最早由苹果公司推行的。如今这一标准已成为HDR显示的基础标准能显示的颜色比sRGB多50%。而Rec2020标准比display P3的色域更广可以用来显示4K甚至8K的影像但目前支持这一标准的终端显示器还很少。两种色域都是使用RGB来描述的。
.valid-css-display-p3-colors{--percents:color(display-p3 34% 58% 73%);--decimals:color(display-p3 .34 .58 .73);--percent-opacity:color(display-p3 34% 58% 73% / 50%);--decimal-opacity:color(display-p3 .34 .58 .73 / .5);/* 无色度色相展示为黑色 */--empty-channels-black:color(display-p3 none none none);--empty-channels-black2:color(display-p3);
}.valid-css-rec2020-colors {--percents: color(rec2020 34% 58% 73%);--decimals: color(rec2020 .34 .58 .73);--percent-opacity: color(rec2020 34% 58% 73% / 50%);--decimal-opacity: color(rec2020 .34 .58 .73 / .5);/* 无色度色相展示为黑色 */--empty-channels-black: color(rec2020 none none none);--empty-channels-black2: color(rec2020);
}
CIE标准
让我们先回到开头的两张色域图会发现基于RGB描述的色域基本是一个三角形因为都是使用3个基础色混合而成但人眼所能感知的色域是形似马蹄的图形具体如何绘制出的感兴趣的可自行搜索了解。基于RGB标准的色彩空间都很难完全覆盖人眼能感知的所有颜色。而基于CIE标准国际照明委员会制定的一种测定颜色的国际标准它描述了人眼对颜色的感知和色彩的测量方法的色彩空间理论上是能够包括人视觉所能感知到的所有颜色。
CSS Color 4新标准也新增了对于CIE标准色域的支持。下面介绍的lab()、lch()、oklab()、oklch()都是基于CIE的取色新方法。 lab() lab()方法描述的是基于CIE标准的色彩空间中的颜色能够覆盖人眼所能看到的全色域。和与基于RGB来描述色彩的维度不同lab使用的维度分别为
Llightness视觉上线性渐变的亮度取值范围0~100或0%~100%A代表更贴合人眼视觉特性的两个色轴之其一红-绿取值范围均为 -125~125 或 -100%~100%。当A为正值则为更偏红色为负值时更偏绿B代表更贴合人眼视觉特性的两个色轴之其二蓝-黄取值范围均为 -125~125 或 -100%~100%。值为正值更偏黄为负值更偏蓝。
.valid-css-lab-colors{--percent-and-degrees:lab(58% -16 -30);--minimal:lab(58 -16 -30);--percent-opacity:lab(58% -16 -30 / 50%);--decimal-opacity:lab(58% -16 -30 / .5);/* 后两个参数为none是可表示纯灰度 */--empty-channels-white:lab(100 none none);--empty-channels-black:lab(none none none);
}
lch() lch使用的维度分别是
Llightness视觉上线性渐变的亮度取值范围0100或0%100%Cchroma颜色的纯度类似于饱和度取值范围0~230但实际上这个值是没有上限的Hhue色相类似hsl和hwb是个角轴取值范围0deg~360deg
.valid-css-lch-colors{--percent-and-degrees:lch(58% 32 241deg);--just-the-degrees:lch(58 32 241deg);--minimal:lch(58 32 241);--percent-opacity:lch(58% 32 241 / 50%);--decimal-opacity:lch(58% 32 241 / .5);/* 后两个参数为none是可表示纯灰度 */--empty-channels-white:lch(100 none none);--empty-channels-black:lch(none none none);
}
oklab() oklab是校正版的lab优化了图片处理质量在CSS中意味着渐变优化和颜色处理函数优化消除了色相偏移hue shift即在lab中改变颜色纯度色相也会变化使用的维度和lab()是一致的。
.valid-css-oklab-colors{--percent-and-degrees:oklab(64% -.1 -.1);--minimal:oklab(64 -.1 -.1);--percent-opacity:oklab(64% -.1 -.1 / 50%);--decimal-opacity:oklab(64% -.1 -.1 / .5);/* 后两个参数为none是可表示纯灰度 */--empty-channels-white:oklab(100 none none);--empty-channels-black:oklab(none none none);
}
oklch() 相应的oklch是lch的校正版取色的逻辑和hsl类似在圆色盘中选择一个角度从而选中一个色相再通过调节亮度和纯度也就是hsl中的饱和度纯度和饱和度基本可认为是等价的区分仅在于纯度和亮度的调节通常是同步进行的否则纯度很容易超出目标色域的范围。这里有一个oklch的拾色器可以体验下。
.valid-css-oklch-colors{--percent-and-degrees:oklch(64% .1 233deg);--just-the-degrees:oklch(64 .1 233deg);--minimal:oklch(64 .1 233);--percent-opacity:oklch(64% .1 233 / 50%);--decimal-opacity:oklch(64% .1 233 / .5);/* 后两个参数为none是可表示纯灰度 */--empty-channels-white:oklch(100 none none);--empty-channels-black:oklch(none none none);
}
color-mix() 除了新增的一些取色方法外新标准还有一个混色函数可以将上边提到的各种不同色彩空间的中颜色进行混合计算出新颜色。
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue,hsl(120 100% 50%) 20%, white);
方法定义color-mix(method, color1[ p1], color2[ p2])
参数method指定混色的色彩空间以 in 的形式包含srgb,srgb-linear,lab,oklab,xyz,xyz-d50, xyz-d65,hsl,hwb,lch, oroklch参数color1、color2为对应method中指定色彩空间中的任一颜色参数p1、p2为可选参数取值范围为0%~100%可以指明混色的比例如果为空默认color1和color2各为50%
项目中如何使用高清色彩
在我们应用一项新语法时我们通常会有两种策略优雅降级和渐进增强具体实施方案
优雅降级
这种实施起来比较简单即同时使用新旧取色方法让浏览器自动判断展示哪种
/* 原代码 */
color: red;
color:color(display-p3 1 0 0);/* 如果浏览器不支持display-p3则会只解析第一行 */
color: red;/* 如果浏览器支持则会最终使用第二行 */
color:color(display-p3 1 0 0);
渐进增强
使用supports和media先判断当前浏览器是否支持新的色域标准并在条件的情况下提供新的色值。
色域媒体查询
dynamic-range取值standard或high用于判断当前硬件设备是否支持高清、高对比度、高色彩精度不过这一属性判断的比较笼统并不能准确判断浏览器是否支持新色域和色彩空间。 media(dynamic-range: high){/* safe to use HD colors */color: color(display-p3 34% 58% 73%);
}
color-gamut取值 srgb、p3 或 rec2020对应可判断用户设备是否支持sRGB、Display P3 或 REC2020色域。 media(color-gamut: srgb){/* safe to use srgb colors */color: #4499bb;
}media(color-gamut: p3){/* safe to use p3 colors */color: color(display-p3 34% 58% 73%);
}media(color-gamut: rec2020){/* safe to use rec2020 colors */color: color(rec2020 34% 58% 73%);
}
除了可以直接使用css媒体查询还可用途JavaScript中的window.matchMedia()方法来进行媒体查询。 const hasHighDynamicRange window.matchMedia((dynamic-range: high)).matches;console.log(hasHighDynamicRange);// true || falseconst hasP3Color window.matchMedia((color-gamut: p3)).matches;console.log(hasP3Color);// true || false
色彩空间查询
使用[supports](https://my.oschina.net/u/688773)判断某个css方法或属性是否支持 supports(background:rgb(0 0 0)){/* rgb color space supported */background:rgb(0 0 0);
}supports(background:color(display-p3 0 0 0)){/* display-p3 color space supported */background:color(display-p3 0 0 0);
}supports(background:oklch(0 0 0)){/* oklch color space supported */background:oklch(0 0 0);
}
应用实例
在实际应用中在新旧标准过渡期间可以综合使用上边的查询方法下面是一个兼容新旧标准的实例
:root{--neon-red:rgb(100% 0 0);--neon-blue:rgb(0 0 100%);
}/* 设备是否支持展示高清 */
media(dynamic-range: high){/* 浏览器是否能解析display-p3 */supports(color:color(display-p3 0 0 0)){/* 安全使用display-p3 */--neon-red:color(display-p3 1 0 0);--neon-blue:color(display-p3 0 0 1);}
}
开发调试
如果更新了最新版本的chrome浏览器的话就能发现DevTools里的拾色器已经支持了CSS Color 4中的新语法点击页面元素中的颜色属性在弹出的拾色器中中间色值右侧的箭头之前的版本中点击箭头是在hex、rgb、hsl和hwb之间切换但新版本中点击箭头会出现下拉框可以看到所有新增的色彩空间和方法以及当前色值所对应的可替换色值。 同时在选择了不同的色彩空间后色彩的可调节参数也会相应改变。 当我们选择了一个非sRGB色域的色值后会发现拾色器的上方区域里会展示一条sRGB的分界线可以清晰地看出当前选择的颜色所在的色域。这能帮助开发者分辨高清色与非高清色。 而当我们选择一个超出sRGB范围的颜色后再来点击色值右侧的箭头弹出选项列表时会发现sRGB色域下的色值后边会带上一个三角叹号。这说明当前色值已超出了sRGB所能描述的范围只能使用相近的颜色作为替代。 关于chrome DevTools更多关于高清颜色的更新可参阅官方文档。
总结
sRGB之外的色域和色彩空间目前虽然还刚刚在web端起步但未来的设计和开发要求可能会慢慢出现尤其是H5动画、游戏、3D图像等等对于色彩显示的要求不会永远停留在sRGB阶段希望本文简陋的介绍能让大家多少开始了解一些关于色彩的东西。如有错误或疏漏欢迎指正讨论。
参考文章
1. https://web.dev/articles/color-spaces-and-functions?hlen
2. https://developer.chrome.com/articles/high-definition-css-color-guide/
3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color 作者京东科技 郑莉 来源京东云开发者社区 转载请注明来源
