伪原创网站,本人想求做网站,开发一个公司官网大概多少钱,装修自己设计3d效果手机软件当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法 ✔️ 11.2.2.… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法 ✔️ 11.2.2.1 RGB 与 十六进制颜色 ✔️11.2.2.2 HSL 颜色表示法 ✔️11.2.2.3 HWB 颜色表示法 ✔️11.2.2.4 新一代色彩空间 ✔️11.2.2.5 LAB 和 OKLAB 颜色表示法 ✔️11.2.2.6 LCH 和 OKLCH 颜色表示法 ✔️ 文章目录 11.2.2 CSS 颜色表示法 CSS color notations11.2.2.1 RGB 与十六进制颜色表示法 RGB and hex color11.2.2.2 HSL 颜色表示法 HSL color11.2.2.3 HWB 颜色表示法 HWB color11.2.2.4 新一代色彩空间 Next-generation color spaces11.2.2.5 LAB 和 OKLAB 颜色表示法 LAB and OKLAB color11.2.2.6 LCH 和 OKLCH 颜色表示法 LCH and OKLCH color 《CSS in Depth》新版封面 译者按 再次怀着无比敬畏之心完成本小节的翻译。本篇几乎完全重写了上一版中的同名章节内容将 CSS 近年来在颜色描述方面的重大进展及相关背景情况都一一进行了介绍。虽然每个部分的篇幅并不长但硬核知识点是一个都不少。即便是亲自翻译了一遍个别知识点的理解还远远不够需要另抽时间不断强化。一起来看看吧。 11.2.2 CSS 颜色表示法 CSS color notations
CSS 目前支持多种颜色表示方法包括 rgb() 表示法和 hsl() 函数表示法等。这些函数在各种浏览器中都得到了很好的支持。
另外还有一些新的表示法尚未得到很好的支持例如 hwb()、lab()、lch()、oklab()、oklch() 等等。这些颜色表示方法也是直到 2022 年末至 2023 年 6 月前后才陆续添加到浏览器中。截止到 2024 年 6 月前后启用这些颜色表示法可能还需要定义回退值才妥当不过随着浏览器的逐步升级这些新的表示法也将逐渐推广普及。想了解最新的浏览器兼容情况可以查看 Can I Use 网站发布的最新数据https://mng.bz/EZKo。 译注OKLCH 的浏览器最新兼容情况 以下为截至 2024 年 12 月 6 日 OKLCH 颜色表示法在各种浏览器上的兼容情况截图。可以看到目前 OKLCH 已经得到了各大主流浏览器的全面支持综合支持率也已高达 92.19%。是时候深入解析这一全新的颜色描述方式了。 【补图OKLCH 颜色体系当前的浏览器支持情况一览表已全面获得各主流浏览器支持截至 2024 年 12 月 6 日】 上面提到的每一种表示方法都对应一个特定的色彩空间它们整体为 CSS 的颜色管理提供了海量的选择。接下来我将简要介绍每种表示法的工作原理以及它们之间的相互关系。然后会从中选取几种表示法进行对比演示。
我最偏好的表示法是 hsl() —— 这也是浏览器目前兼容性最好的颜色表示方法了。此外还有 oklch() 表示法 —— 一种最为直观intuitive的颜色表示法。相信在不久的将来一旦得到浏览器的普遍支持oklch() 必将成为我新的首选表示法。
11.2.2.1 RGB 与十六进制颜色表示法 RGB and hex color
十六进制颜色表示法分别规定了红、绿、蓝三原色的取值且每种颜色分量都用两位数的十六进制数值来表示取值范围介于 00 到 FF 之间。十六进制是一种以 16 为基数的数字系统十到十五的数值分别用字母 A 到 F 表示。例如颜色 #80c090 表示红色 80、绿色 c0、蓝色 90相当于十进制下的红色 128、绿色 192 和蓝色 144。
新版的八位十六进制表示法还包括了另外两位数用于表示 α 通道alpha channel 值即透明度的大小。该值的取值范围同样介于 00即完全透明到 FF即完全不透明。因此#80c09088 其实是颜色值 #80c090 的半透明版本。 注意 十六进制表示法有时也可以简写为三位数其中每位数字都各重复一次doubled。例如#c90 等效于 #cc9900。此外还有一种对应的四位数表示可以通过类似处理扩展为带 α 值的八位十六进制颜色值。 而 rgb() 函数则是一种使用十进制数而非十六进制数来描述颜色的方法。其各颜色分量的取值范围不再是十六进制下的 00 到 FF而是对应的 0 到 255。例如 rgb(0 0 0) 表示纯黑色等效于 #000rgb(136 0 0) 则表示砖红色等效于 #800。
RGB 与十六进制表示法仅适用于 sRGB 色域标准。无论是 RGB 表示法还是十六进制表示法理解起来都有点费劲。我们见到一个颜色值例如 #2097c9或者它对应的 RGB 颜色无法联想到它在页面会渲染成什么样。如果尝试分解一下它的红色值20将非常少绿色值97为中等水平蓝色值c9则相对偏高。经分析得出该颜色的蓝色和绿色占主导但是颜色有多深呢又有多鲜艳呢都说不准。事实上RGB 颜色表示法很不直观它们本来就是方便计算机读取的并不适合用肉眼识别。
十六进制颜色表示法只有当需要某种书写简洁、且可以方便地在不同应用程序之间复制粘贴颜色值时才有一席用武之地而 RGB 表示法同样问题多多和十六进制法相比妥妥的令人费解有余而方便简洁不足。然而其他大部分颜色表示法都比它们更加好懂且易用。
11.2.2.2 HSL 颜色表示法 HSL color
HSL 则是一种更适合人类读取的颜色表示法其名称分别代表色调Hue、饱和度Saturation和亮度Lightness。HSL 的语法形如 hsl(198deg 73% 46%)相当于十六进制下的 #2097c9。
在 HSL 中代表色调的第一个参数其实是一个角度值取值范围介于 0 度到 359 度之间。它代表色相环 1 上的度数可以从红色red0度依次过渡到黄色yellow60度、绿色green120度、青色cyan180度、蓝色blue240度、洋红色magenta300度然后再回到红色。此外角度取值范围以外的值仍然是有效的并可通过加减 360 度来找到等效的色相环上的色调值。书写时也可以省略角度单位 deg直接写成一个数字。
HSL 表示法的第二个参数代表饱和度是一个代表颜色强度的百分数值为 100% 时颜色最鲜艳为 0% 则意味着没有彩色仅呈现一片灰色。
HSL 表示法的第三个参数表示亮度。它也是百分数用以描述颜色的明暗程度。大部分鲜艳的颜色采用的是 50% 的亮度值且亮度值越高颜色越浅浅至 100% 时就变成了纯白色而当亮度值越低颜色越深深至 0% 就变成了黑色。
再比如hsl(198deg 73% 46%) 这个颜色值其色调为青蓝色饱和度相当高73%而亮度接近 50%因此会产生一个比天蓝色更深一些的蓝色。HSL 颜色表示法也只适用于 sRGB 色域标准。 提示一种更新的、不使用逗号的颜色函数表示法 在 CSS 首次引入 RGB 表示法和 HSL 表示法时rgb() 和 hsl() 颜色函数在使用时必须用逗号分隔每个参数不能写作 rgb(136 0 0)而必须写作 rgb(136, 0, 0)。为了向下兼容这些颜色函数继续保留用逗号分隔的写法而对于其他新推出的颜色函数就只支持不带逗号的写法。因此推荐使用无逗号写法这样所有浏览器都支持该语法。 rgb() 和 hsl() 也有相应的 rgba() 版本和 hsla() 版本这些扩展函数可以接受第四个参数来设置代表颜色透明度的 alpha 通道值。现在已经不用再写这些扩展函数了因为新版语法也支持写在斜线后的 alpha 参数设置。例如rgb(136 0 0 / 0.7) 定义了一个 不透明度 为 70% 的砖红色brick red。后续介绍的所有颜色函数都支持通过这种方式设置的不透明度。 11.2.2.3 HWB 颜色表示法 HWB color
HWB 表示色调Hue、白度Whiteness和黑度Blackness。例如某颜色利用该表示法可以写作 hwb(198deg 12.5% 20.4%)。它其实等效于之前介绍过的用 HSL 表示法描述的那个深蓝色。
HWB 颜色表示法中的色调值等同于 HSL 表示法中的色调值同样它既可以写成一个角度值也可以直接写成一个数字。
HWB 表示法中的 W 值和 B 值均为百分数分别用于描述该颜色混入了多少白色或黑色。如果两个值都偏低那么最终颜色就会更鲜艳。hwb(0deg 100% 0%) 即为纯白色此时的颜色与色调无关而 hwb(0deg 0% 100%) 则为纯黑色如果 W 和 B 之和大于或等于 100%则最终颜色将为纯灰色其深浅程度取决于二者中取值更大的一方。HWB 表示法同样仅适用于 sRGB 色域标准。
11.2.2.4 新一代色彩空间 Next-generation color spaces
接下来的四种颜色表示法适用于 广色域色彩空间wide gamut color spaces。这些表示方法不局限于 sRGB 色域或其他任何色域而是能够代表人眼所能看到的任何颜色。换句话说它们甚至可以描述超出硬件能力边界的颜色。在这种情况下浏览器会自动将这些颜色做圆整处理并归入最接近的可用色域范围内——只要不超出预期的取值范围通常就能得到可接受的备选颜色。比如可以利用这个原理来指定 P3 色域下的颜色对于不支持 P3 色域的显示器而言用户最终看到的将是最接近该颜色的 sRGB 色域下的近似值。
这些颜色表示法的另一个好处在于它们力求在色彩感知上做到线性展示。也就是说其颜色值是根据我们人类的感知来定制的。例如在 HSL 体系中亮度为 50% 的绿色会比同等亮度下的蓝色看起来更亮一些因为我们的眼睛会认为绿色更亮而在新一代色彩空间中色彩是均衡的balanced因此相同亮度的所有色调对我们的眼睛而言都是一样的。同理在控制色彩鲜艳度的数值上也是如此。
LAB 和 LCH 是其中最先创建的两种颜色表示法但它们的规范尤其是在一些蓝色和紫色的色调方面还存在一些与规范不一致的地方因此其表现也差强人意。后来 OKLAB 和 OKLCH 表示法取代了它们。新方法在概念上类似但行为上可预测性更强。虽然接下来我将分别介绍这四种颜色表示法的工作原理但还是强烈推荐使用 OKLAB 和 OKLCH 表示法。浏览器对以上四种表示法的支持情况也几乎完全相同。
11.2.2.5 LAB 和 OKLAB 颜色表示法 LAB and OKLAB color
LAB 颜色及其后续版本 OKLAB 都定义了三个维度值亮度、A 轴A axis与 B 轴B axis。其语法格式形如 lab(58% -19 -35) 或者 oklab(65% -0.06 -0.1)。虽然二者的数值不同但在概念上都是相同的。
第一个参数亮度是一个值域介于 0%即黑色到 100%白色的百分数。在 LAB 表示法中也可以使用 0 到 100 间的数字来表示而在 OKLAB 中还可以写成 0 到 1.0 之间的数字。鉴于这种写法上的差异可能引起混淆推荐还是使用百分数为上。
而 A 轴的取值范围介于红色到绿色B 轴则介于蓝色到黄色。在 OKLAB 中这些值的具体范围分别是 -0.4 到 0.4也可以使用 -100% 到 100% 之间的百分数来表示。而在 LAB 中上述值的值域则为 -125 到 125。
LAB 和 OKLAB 都是矩形色彩空间类似于 RGB 的广色域版本但与 RGB 类似它们使用起来都不是很直观。
11.2.2.6 LCH 和 OKLCH 颜色表示法 LCH and OKLCH color
LCH 和 OKLCH 则是与 HSL 相似的圆柱形色彩空间cylindrical color spaces。它们定义的是这三个维度值亮度Lightness、色度Chroma和色调Hue语法上则可以写作 lch(58% 39.8 241.5deg) 以及 oklch(64% 0.12 233deg)。 提示 OKLCH 这个名字有点拗口。Web 开发者 埃里克·波蒂斯Eric Portis 首创了 “Oklachroma” 这个词来作为 OKLCH 的一种更为友好的发音方式别说还挺好记的。 第一个参数定义了感知到的亮度。它也是一个介于 0%即黑色到 100%即白色的百分数也可以写成 0 到 1.0 的十进制形式与 HSL 中的亮度定义非常类似但 LCH 和 OKLCH 在不同的色调表现中更加一致更符合我们人眼的感知。
第二个参数色度值chroma value表示色彩的鲜艳程度。色度值为 0 则表示纯灰色这与 HSL 中的饱和度也十分类似。从理论上讲该参数值是没有范围限制的但在实际应用中OKLCH 色度的取值往往不超过 0.5在 sRGB 色域中也不会超过 0.33。而在 LCH 中色度的取值范围则是 0 到 230。
最后一个参数是色调hue。它也是色相环上的某个角度值类似 HSL 中的色调概念只是具体数值重新做了调整。其取值范围为从红色red30依次过渡到黄色yellow90、绿色green140、青色cyan195、蓝色blue260、洋红色magenta330最后又回到红色。 利用 color() 函数在更宽的色域中使用 RGB 颜色 CSS 提供了一个 color() 函数可以用来手动设置色域及颜色值。例如color(display-p3 0.3 0.59 0.77) 可以对 P3 色域下的红色、绿色、蓝色分别进行定义。该颜色值等效于 oklch(64% 0.12 233deg)。 个人认为在通常情况下该颜色表示法不如前面介绍的几种实用因为它采用的是一种基于 RGB 的范式RGB-based paradigm写起来也比较冗长。由于 OKLAB 和 OKLCH 等广色域表示法可以描述肉眼可见光谱中的任何颜色因此如若将来显示器升级到支持更广的色域标准它们仍然可以胜任各种色彩的展示。 不过color() 函数除了支持 sRGB、Display p3 和 Rec2020 色域外还支持更多冷僻色域因此如果需要在特定色域内定义颜色color() 函数应该会非常有用。想了解更多 color() 函数的相关信息可以参考 MDN 的在线文档https://mng.bz/lMQ6。 总结一下以上介绍的每种颜色表示法都是由以下参数分别定义的
RGB —— 红、绿、蓝值域均为 0 到 255HSL —— 色调角度值、饱和度百分数、亮度百分数HWB —— 色调角度值、白度百分数、黑度百分数LAB —— 亮度百分数A 轴-125 红色至 125 绿色B 轴-125 蓝色至 125 黄色OKLAB —— 亮度百分数A 轴-0.4 红色至 0.4 绿色B 轴-0.4 蓝色至 0.4 黄色LCH —— 亮度百分数、色度值域 0 到 230、色调角度值OKLCH —— 亮度百分数、色度值域 0 到 0.5、色调角度值
上述表示方法中大部分还支持 none 关键字来代替其中的某个参数用于表示该参数无关紧要。例如oklch(100% 0 0deg) 表示白色因此色调的取值基本上没有意义。这时就可以写作 oklch(100% 0 none) 甚至是 oklch(100% none none)。
图 11.12 对比展示了几种典型颜色在指定的几种色彩空间中的不同表示方法。对于其中个别数值做了些微调。 【图 11.12 等效颜色值对比图】
以上这些特定的颜色也可以通过引用它们的合法名称来进行声明如 blue、lavender、lightgray 等。CSS 中大约有 150 种类似的合法命名颜色named colors。有关命名颜色的完整列表详见 MDN 官方文档 named-colorhttps://mng.bz/NRoN。
想要熟悉 OKLCH 或者其他任何色彩空间最好的方法莫过于付诸实践。下一节我将深入介绍 OKLCH 在页面颜色配置中的具体用法并推荐几个在使用过程中挺有帮助的实用工具。 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版$44.99中文版139.00原版$59.99中文版暂无待出版现价原版$36.49中文版52.54 起步原版$52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00
本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
目前已完结的章节可进入本专栏查看详情连载期间完全免费 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局已完结 5.1 构建基础网格5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容5.6 对齐相关的属性5.7 本章小结 第六章 定位与堆叠上下文已完结 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 6.2.1 关闭按钮的绝对定位6.2.2 伪元素的定位问题 6.3 相对定位 6.3.1 创建下拉菜单上6.3.2 创建 CSS 三角形下 6.4 堆叠上下文与 z-index 6.4.1 理解渲染过程与堆叠顺序上6.4.2 用 z-index 控制堆叠顺序上6.4.3 深入理解堆叠上下文下 6.5 粘性定位6.6 本章小结 第七章 响应式设计已完结 7.1 移动端优先设计原则上篇 7.1.1 创建移动端菜单下篇7.1.2 给视口添加 meta 标签下篇 7.2 媒体查询上篇 7.2.1 深入理解媒体查询的类型上篇7.2.2 页面断点的添加中篇7.2.3 响应式列的添加下篇 7.3 流式布局7.4 响应式图片7.5 本章小结 第八章 层叠图层及其嵌套 8.1 用 layer 图层来操控层叠规则上篇 8.1.1 图层的定义上篇8.1.2 图层的顺序与优先级下篇8.1.3 revert-layer 关键字下篇 8.2 层叠图层的推荐组织方案8.3 伪类 :is() 和 :where() 的用法8.4 CSS 嵌套的使用 8.4.1 嵌套选择器的使用8.4.2 深入理解嵌套选择器8.4.3 媒体查询及其他 规则 的嵌套 8.5 本章小结 第九章 CSS 的模块化与作用域 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分9.2.2 模块的命名 9.3 CSS 的作用域 9.3.1 CSS 作用域的就近原则9.3.2 划定作用域的边界9.3.3 CSS 中的隐式作用域9.3.4 关于 CSS 作用域与层叠图层 9.4 CSS 模式库9.5 本章小结 第十章 CSS 容器查询 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 10.2.1 容器的类型10.2.2 容器的名称10.2.3 容器与模块化 CSS 10.3 与容器相关的单位10.4 容器样式查询的用法 10.4.1 将模块与所在容器解耦10.4.2 减少重复代码 10.5 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介 色相环Hue Circle是一个用于表示颜色关系的圆形图表通常用于视觉艺术、设计和色彩理论中。色相环展示了颜色之间的相对位置和过渡帮助理解色彩的组合和对比。 ↩︎
