CSS 过滤颜色

在网页设计中，我们经常需要使用颜色来渲染各种元素。然而，有时我们希望对这些颜色进行一些操作，比如：

• 调整颜色的饱和度、亮度、对比度等属性
• 将颜色转换为其他格式，如 RGBA、HSL 等
• 在多个颜色中选择最优的一种
• 根据颜色生成阴影、边框等样式

在 CSS 中，有许多方法可以对颜色进行操作和过滤。本文将介绍其中的一些常用方法。

颜色格式

在 CSS 中，有多种颜色格式可供选择。最常见的是十六进制格式（如 #ff0000 表示红色），另外还有 RGB、RGBA、HSL、HSLA 等格式。我们可以使用这些格式来表示颜色，也可以通过 CSS 函数将不同格式的颜色进行转换。下面是一些常用的 CSS 颜色函数：

rgb()

用于表示 RGB 颜色。三个参数分别表示红、绿、蓝的色值，范围为 0~255。

color: rgb(255, 0, 0); /* 红色 */

rgba()

用于表示带透明度的 RGB 颜色。四个参数分别表示红、绿、蓝的色值和透明度，透明度范围为 0~1。

color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */

hsl()

用于表示 HSL（色相、饱和度、亮度）颜色。三个参数分别表示色相（0~360）、饱和度（0~100%）、亮度（0~100%）。

color: hsl(0, 100%, 50%); /* 红色 */

hsla()

用于表示带透明度的 HSL 颜色。四个参数分别表示色相、饱和度、亮度和透明度。透明度范围为 0~1。

color: hsla(0, 100%, 50%, 0.5); /* 半透明的红色 */

currentColor

表示当前元素的颜色。通常用于继承父元素的颜色。

color: currentColor;

transparent

表示完全透明的颜色。

color: transparent;

过滤函数

brightness()

用于调整颜色的亮度。参数为一个百分比，表示要增加或减少的亮度。

/* 将文本亮度降低 50% */
color: brightness(50%);

contrast()

用于调整颜色的对比度。参数为一个百分比，表示要增加或减少的对比度。

/* 将文本对比度增加 100% */
color: contrast(200%);

grayscale()

用于将颜色转换为灰度。参数为一个百分比，表示要转换的程度。

/* 将文本转换为 50% 的灰度 */
color: grayscale(50%);

hue-rotate()

用于旋转颜色的色相。参数为一个角度，表示要旋转的角度。

/* 将文本的色相旋转 90 度 */
color: hue-rotate(90deg);

invert()

用于反转颜色。参数为一个百分比，表示要反转的程度。

/* 将文本颜色完全反转 */
color: invert(100%);

saturate()

用于增加颜色的饱和度。参数为一个百分比，表示要增加的饱和度。

/* 将文本颜色增加 50% 的饱和度 */
color: saturate(50%);

sepia()

用于将颜色转换为复古风格的棕色。参数为一个百分比，表示要转换的程度。

/* 将文本颜色转换为 20% 的棕色 */
color: sepia(20%);

颜色选择器

在 CSS 中，也可以使用一些函数来选择合适的颜色。下面是一些常用的颜色选择器。

rgb()

使用 rgb() 函数可以通过给定的红、绿、蓝值来选择颜色。这可以帮助我们快速创建一些定制颜色。

/* 使用 RGB 函数选择橙色 */
color: rgb(255, 165, 0);

rgba()

使用 rgba() 函数可以在 RGB 基础上加上一个透明度参数。这可以帮助我们创建透明的色彩。

/* 使用 RGBA 函数选择半透明的橙色 */
color: rgba(255, 165, 0, 0.5);

hsl()

使用 hsl() 函数可以选择基于色相、饱和度和亮度的颜色。

/* 使用 HSL 函数选择亮绿色 */
color: hsl(120, 100%, 75%);

hsla()

使用 hsla() 函数可以创建具有透明度的 HSL 颜色。

/* 使用 HSLA 函数选择半透明的亮绿色 */
color: hsla(120, 100%, 75%, 0.5);

示例

下面是一个示例，展示了如何使用这些 CSS 函数来调整文本颜色。

/* 将文本颜色设置为红色 */
color: #ff0000;

/* 将文本颜色调暗 50% */
color: brightness(50%);

/* 将文本颜色转换为灰色 */
color: grayscale(100%);

/* 将文本颜色转换为淡粉色 */
color: hue-rotate(30deg) saturate(50%);

/* 选择一组随机的颜色 */
color: rgb(23,56,145);
color: rgba(123,234,56,0.5);
color: hsl(345,54%,67%);
color: hsla(120,100%,75%,0.5);

以上示例演示了如何创建不同的颜色效果，以及如何使用颜色选择器来选择颜色。使用这些 CSS 函数和选择器，我们可以定制出丰富多样的颜色，为网页设计提供更多的可能性。