CSS 相对颜色语法

根据另一种颜色的通道和值创建新颜色。

Adam Argyle
Adam Argyle

在 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 关键字后面。浏览器会 转换,将源颜色拆分开来,然后提供 将这些部分作为变量,以便在新颜色定义中使用。

答
显示了语法 rgb(来自绿色 r g b / alpha)的示意图,并带有箭头
先离开绿色顶部,进入函数 RGB 的开头,
这个箭头会分成 4 个箭头,这些箭头分别指向各个变量的相关变量。通过
4 个箭头分别是红色、绿色、蓝色和 alpha 值。红色和蓝色的值为 0,绿色的值为 0
为 128,alpha 为 100%。

上图显示了将源颜色 green 转换为 新颜色的颜色空间, 转换为单独的数字,分别表示为 rgbalpha 变量,这些变量随后会直接用作新的 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,完全改变了颜色。这会沿着颜色旋转色相 圆柱形颜色空间,圆柱形颜色空间 例如 HSLHWBLCHOKLCH

若要直观地查看通道的值,以便您准确进行计算,而无需猜测或记住规范,请尝试使用此相对颜色语法通道值工具。它会根据您指定的语法显示每个渠道值,让您确切知道可以使用哪些值。

检查浏览器是否支持此功能

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

用例和演示

以下示例和用例可以使用许多替代语法来实现 相似或相同的结果。这些变化来自色彩空间和 渠道。

此外,许多示例会显示使用 byto。颜色变化的 by 是相对的颜色变化;使用 并根据其当前值进行调整。答 颜色变化的 to 是绝对的颜色变化;不使用 变量的值,改为指定一个全新的值。

所有演示都可以在此 Codepen 集合中找到。

调亮颜色

OKLCH、OKLAB XYZsRGB 颜色空间 颜色变浅时可预测的结果。

减淡一定量

以下示例 .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() 将色相旋转所需的量。 在本示例中,需要旋转半圈才能找到颜色的互补色 您可以用 180h 通道中添加或移除值,以实现这一结果。

.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))
  );
}