多年来，我们习惯于使用Sass等CSS预处理器来处理诸如调整预定义颜色透明度这样的需求。如今，通过CSS相对颜色，我们有了全新的原生解决方案。本文将深入探讨这一特性，并通过大量实用示例展示其工作原理。

问题一：颜色透明度调整

假设我们有一个十六进制颜色，如何在CSS中修改其透明度？

css

:root {

–brand-color: #9c3ce7;

}

传统解决方案

使用Sass预处理器：

scss

$brand-color: #9c3ce7;
.element {

background-color: rgba($brand-color, 0.5);

}

纯CSS方案：

css

:root {

–brand-opacity: 1;

–brand-color: rgb(156 60 231 / var(–brand-opacity));

}
.element {

–brand-opacity: 0.5;

background-color: var(–brand-color);

}

虽然可行，但这不是最佳方案，我们需要在CSS中包含每个颜色的rgb()版本。

问题二：颜色深浅变化

在使用CSS颜色时，我们经常需要主颜色的更浅或更深变体。使用十六进制或RGB颜色空间等绝对值时，除非打开颜色选择器，否则无法编辑颜色。

传统实现方式

css

.btn {

–btn-bg-color: #9c3ce7;

–btn-bg-color-hover: #9c3ce7;

background-color: var(–btn-bg-color);

}
.btn:hover {

background-color: var(–btn-bg-color-hover);

}

较深的颜色是通过浏览器或Figma等设计工具中的颜色选择器选择的。

认识CSS相对颜色

兼容性说明：自2024年9月起，该功能已在最新设备和浏览器版本中全面支持。

在CSS中，我们现在可以生成相对于另一种颜色的颜色。

语法解析

使用相对颜色需要指定以下内容：

颜色函数
原始颜色
通道
Alpha值（可选）

css

color-function(from origin-color channel1 channel2 channel3 / alpha(optional))

实际示例

创建具有10%透明度的黑色：

css

.button {

border-color: rgb(from #000 r g b / 0.1);

}

简单来说，这就像是说：从#000获取rgb值，并将alpha更改为0.1。

修改颜色通道

我们可以将calc()与相对颜色结合使用来修改任何颜色通道。

HSL颜色示例

使用hsl()颜色函数创建颜色比例尺：

css

.color-item {

background-color: hsl(from #9333ea h s calc(l + 10));

}

calc(l + 10)的作用是获取当前亮度通道值并加10，使颜色更浅。

使颜色变深：

css

background-color: hsl(from #9333ea h s calc(l - 10));

LCH颜色空间

在某些情况下，使用hsl()的相对颜色在人眼看来效果不佳。lch()颜色空间专为人眼感知设计，而非屏幕。

css

lch(from var(–brand) l c h)

lch(from var(–brand) calc(h + 90) c h)

还有oklch()颜色空间，它解决了lch()的一些问题。

使用color-mix()函数

调整颜色透明度

css

.button {

border-color: color-mix(in srgb, #000 10%, transparent);

}

生成颜色深浅变体

css

.button:hover {

background-color: color-mix(in srgb, #8136ba, black 10%);

}

使用@supports提供回退方案

为确保兼容性，可以使用@supports为不支持相对颜色的浏览器提供回退方案。

CSS相对颜色使我们的工作更加简单直接，为现代Web开发提供了强大的颜色处理能力。

.button {
  border-color: color-mix(in srgb, #000 10%, transparent);

  @supports (color: rgb(from #000 r g b / 0.1)) {
    border-color: rgb(from #000 r g b / 0.1);
  }
}

总结来自： https://ishadeed.com/article/css-relative-colors/#the-problem-take-1

留言

发表留言

留言

发表留言