根据另一种颜色的通道和值创建新颜色。
在 Chrome 119 中，它是 CSS 颜色级别 5 中的一项非常强大的颜色功能。相对颜色语法 可创建流畅的 CSS 路径，以便在 CSS 中处理颜色， 作者和设计师：
在相对颜色语法之前，要修改颜色的不透明度，您需要 为某种颜色的渠道（通常为 HSL）创建自定义属性，然后组装 转换为最终颜色和最终变体颜色。这意味着要管理大量 这可能会很快成为繁琐工作。
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
在相对颜色语法之后，您可以创建具有任何颜色空间的品牌颜色 或语法，并使用更少的代码创建半不透明变体。时间是 样式和系统的意图也更易于阅读。
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
如果您更喜欢视频，此 GUI 挑战将涵盖以下几乎所有文章。
语法概览
相对颜色语法的目标是允许从其他
color 决定。基础颜色称为源颜色，也就是
跟在新的 from 关键字后面。浏览器会
转换，将源颜色拆分开来，然后提供
将这些部分作为变量，以便在新颜色定义中使用。
上图显示了将源颜色 green 转换为
新颜色的颜色空间，
转换为单独的数字，分别表示为 r、g、b 和 alpha
变量，这些变量随后会直接用作新的 rgb() 颜色的值。
虽然此图片显示了细分数据、流程和变量， 更改颜色这些变量被放回原色，因此 如此一来，它就会呈现为绿色
from 关键字
要学习语法的第一部分是 from <color> 部分，
指定颜色。它会在您指定值之前进行。以下是验证码
在其中添加的所有内容都是 from green，紧挨着放在值的前面，
rgb() 时指定的。
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
该 from 关键字在函数表示法中被视为第一个参数时，
将颜色定义转换为相对颜色！在 from 关键字之后，CSS 提供商会
需要一种颜色，一种能够激发下一种颜色的颜色。
颜色转换
简而言之，它会将绿色通道转换为 r g 和 b 通道，以便用于新的 color 决定。
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
自定义属性中的颜色
“rgb from green”读起来非常清晰易懂。这就是为什么
自定义属性和相对颜色语法是很好的选择，因为
可以揭开 from 颜色的神秘面纱。此外，通常也无需
自定义属性颜色的颜色格式
自定义颜色。
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
使用您偏好的颜色空间
您可以使用功能性颜色表示法来选择颜色空间。
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
相对颜色语法包含该转换步骤：from 之后的颜色是
已转换为相对路径开头指定的颜色空间
color 决定。输入和输出不需要匹配，这样非常方便。
颜色空间的选择能力也非常强大， 往往更加注重颜色交替类型， 偏好设置。偏好设置出现在结果中，而非颜色格式或通道中 。这一点将在应用场景演示部分中更加清楚易懂， 不同的颜色空间非常适合不同的任务。
混合、匹配、省略和重复变量
这个语法有点奇怪，但又令人兴奋，因为变量不一定必须是 可以按顺序放回去并且可以重复
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
不透明度作为变量
该语法还以名为 alpha 的变量的形式提供不透明度。这一步是可选的
在功能性颜色表示法中，紧跟在 / 之后。
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
对变量使用 calc() 或其他 CSS 函数
到目前为止，我们一直在不断地创建绿色。了解 熟悉转换和解构步骤。现在是 修改变量，更改输出，使其不同于 输入。
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
现在是海军蓝了！色调被翻了一番，采用 120 色调并将其转换为
240，完全改变了颜色。这会沿着颜色旋转色相
圆柱形颜色空间，圆柱形颜色空间
例如 HSL、
HWB、
LCH 和
OKLCH。
若要直观地查看通道的值，以便您准确进行计算，而无需猜测或记住规范，请尝试使用此相对颜色语法通道值工具。它会根据您指定的语法显示每个渠道值，让您确切知道可以使用哪些值。
检查浏览器是否支持此功能
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
用例和演示
以下示例和用例可以使用许多替代语法来实现 相似或相同的结果。这些变化来自色彩空间和 渠道。
此外，许多示例会显示使用 by 和
to。颜色变化的 by 是相对的颜色变化；使用
并根据其当前值进行调整。答
颜色变化的 to 是绝对的颜色变化；不使用
变量的值，改为指定一个全新的值。
所有演示都可以在此 Codepen 集合中找到。
调亮颜色
OKLCH、OKLAB XYZ 或 sRGB 颜色空间 颜色变浅时可预测的结果。
减淡一定量
以下示例 .lighten-by-25 接受颜色 blue 并将其转换为
OKLCH，然后通过乘以 l（亮度）通道增加蓝色
按 1.25 计算当前值。这会将蓝色亮度推向白色的亮度增加 25%。
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
调亮到特定值
以下示例 .lighten-to-75 未利用 l 渠道来
调亮 blue，而是将该值完全替换为 75%。
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
调暗颜色
同样适用于提亮颜色的相同颜色空间 较深的颜色。
调暗一定量
以下示例 .darken-by-25 会获取蓝色并将其转换为
OKLCH，然后将 l（亮度）通道降低 25%，将蓝色调暗
值乘以 .75。这会将蓝色方向推向黑色，调整幅度为 25%。
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
调暗到指定值
以下示例 .darken-to-25 未利用 l 通道调暗
blue，它会将值完全替换为 25%。
.darken-to-25 {
background: oklch(from blue 25% c h);
}
饱和色彩
饱和度
以下示例 .saturate-by-50 使用 hsl() 中的 s 来增加
使用相对 50% 衡量 orchid 的饱和度。
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
将饱和度设置为特定金额
以下示例 .saturate-to-100 未利用 s 中的
hsl()，而是指定所需的饱和度值。在此示例中
饱和度提高至 100%。
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
降低颜色饱和度
降低饱和度
以下示例 .desaturate-by-half 使用 hsl() 中的 s 来降低
indigo的饱和度减半
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
将饱和度降低到特定值
您可以将饱和度降低到特定的所需
值。以下示例 .desaturate-to-25 根据
indigo，但将饱和度设置为 25%。
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
增强色度
这种效果类似于饱和色彩，但在几个不同的方面有所不同
方法。首先，这是一项 chroma 更改，而不是 saturation 更改，这是
因为可以增强到高动态范围的颜色空间不使用
饱和度。“chroma”功能的颜色空间为高动态范围
使色彩鲜明度得到提升，而不是饱和度
甚至连能力都没有
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
调整颜色的不透明度
制作颜色的半透明变体是最常见的颜色之一 在设计系统中进行的调整。请参见本单元 这篇文章，它很好地概述了问题所在。
调整不透明度的量
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
将不透明度调整为特定值
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
反色
颜色反转是颜色库中常用的颜色调整函数。 一种方法是将一种颜色转换成 RGB，然后减去 从 1 开始计算渠道值。
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
补充颜色
如果你的目标是反转颜色，而是补充颜色，则可以选择色调调节。
您可能想要采用轮播设置挑选一个色彩空间
将 hue 指定为角度，然后使用 calc() 将色相旋转所需的量。
在本示例中，需要旋转半圈才能找到颜色的互补色
您可以用 180 在 h 通道中添加或移除值，以实现这一结果。
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
颜色对比
要获得可行的色彩对比度，请考虑使用最低(Lstar)。
该模式使用
LCH 和 OKLCH，位于 calc()。根据您定位的是低、中还是高
和增量大约为 40、50 或 60。
该技术适用于 LCH 或 OKLCH 的任何色调。
对比较深的颜色
.well-contrasting-darker-color 类演示了增量为 60 的 L*。
由于源颜色是深色（低亮度值），因此系统会添加 60% (0.6)
添加到亮度通道。这个技巧用于找出
浅色背景上色调相同的深色文字。
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
对比浅色
.well-contrasting-lighter-color 类演示了增量为 60% 的 L*
。由于源颜色是浅色（高价值亮度值），因此 0.60 即为
从亮度通道中减去。
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
调色板
相对颜色语法擅长创建调色板。尤其是 因为可用的颜色空间非常多，所以颜色空间非常丰富。以下 所有样本都使用 OKLCH，因为亮度通道可靠，且色调 可以旋转且不会产生副作用。最后一个示例演示了 结合使用亮度和色调旋转调整功能， 结果！
打开这些内容的示例源代码，并尝试将 --base-color 更改为
看看这些调色板的动感。它非常有趣！
如果您喜欢视频，我可以为您提供深入的信息，帮助您在 YouTube 上使用 OKLCH 在 CSS 中构建调色板。
单色调色板
创建单色调色板是指使用相同色调来创建调色板， 使它们呈现不同的亮度和暗度变化中间颜色是源颜色 其中两个较浅的变体和两个较深的变体分别 一面。
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
试用一系列使用相对颜色语法和 OKLCH 制作的调色板
Open Props 是一个免费的 CSS 变量库， 采用此策略构建的调色板，使其易于使用， 导入。它们的设计也采用了可自定义的颜色，您只需给出 并给出调色板！
类似调色板
由于使用 OKLCH 和 HSL 可以轻松地进行色调旋转，因此创建 相似调色板。 将色调旋转一定量，然后更改基本颜色， 看看浏览器构建的新调色板。
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
三等分色调色板
类似于互补色，三等分色调色板
给定基本颜色，是相反但和谐的色调旋转。其中，
互补色位于颜色的另一侧，如直线
三等分色调色板就像是
直线三角形，找到 2 种颜色从基准颜色相等旋转的角度。
可通过旋转色调 120deg 来实现这一点。
这对颜色理论稍有简化，但足以引人入胜 如果您有兴趣，可以先使用更复杂的三等分色调色板
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
四进制调色板
四进制调色板是四种颜色均匀分布在色轮上， 没有明确的主色的调色板。您也可以将其想象成 互补色对。如果使用得当，可能就会有很大的意义。
这对颜色理论稍有简化，但足以引人入胜 如果您有兴趣，可以开始接触更复杂的四边形调色板
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
略微旋转色调的单色
许多色彩专家一直在坚持不懈地运用这种技巧。问题是， 单色色阶可能很单调解决方法是添加 随着亮度的变化，对每种新颜色进行细微或主要色调旋转。
以下示例将每个色样的亮度降低 10%，同时旋转 将色调调高 10 度。结果，从艳粉色到靛蓝色的调色板 可以像渐变一样无缝融合
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
试试这个使用 OKLCH 和色调旋转构建的排行榜
以下排行榜界面使用此色调旋转策略。每个列表
项通过名为 --i 的变量跟踪它在文档中的索引。此索引为
然后用于调整色度、亮度和色调。调整幅度仅为 5%，或者
5°，这比上面这个深粉色例子的细微差别，
观察此排行榜为何会呈现任何具有
优雅。
务必更改排行榜下方滑块中的色调， 相对颜色语法创建美丽的色彩时刻。
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}