根据另一种颜色的通道和值创建新颜色。
在 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))
);
}