2023 年的 CSS 颜色函数——入门所需的一切

嘿，各位开发者！今天，我们将深入 CSS 颜色函数的世界。

您可能使用过 CSS 来更改网页上元素的颜色，但是您听说过 CSS 颜色函数吗？如果没有，请系好安全带，因为您将学到新的且非常有用的东西！

让我们从我昨天读到的一句话开始好书.

色彩是键盘，眼睛是和声，灵魂是多弦琴。艺术家是演奏的手，触摸一个或另一个键，引起灵魂的振动。

CSS 颜色函数到底是什么？

CSS 颜色函数是一种在 CSS 中使用数学函数指定颜色的方法，而不仅仅是简单的颜色代码。

这些函数提供了对样式表中使用的颜色的更多控制和灵活性。

使用颜色函数，您可以调整颜色的色调、饱和度、亮度和不透明度，甚至可以将两种或多种颜色混合在一起。

有多个 CSS 函数可用，让我们看一些：

1. rgb() - 它采用三个值，分别代表红色、绿色和蓝色，并返回一种颜色。值的范围为 0 到 255。示例： color: rgb(255, 0, 0)产生红色。

   
   

2. rgba() - 它类似于rgb() ，但它还允许您设置颜色的不透明度。第四个值 alpha，范围从 0 到 1。示例： color: rgba(255, 0, 0, 0.5)产生半透明的红色。

   
   

3. hsl() - 它采用三个值，分别表示色调、饱和度和亮度，并返回一种颜色。示例： color: hsl(0, 100%, 50%)产生红色。

   
   

4. hsla() - 它类似于hsl() ，但它还允许您设置颜色的不透明度。示例： color: hsla(0, 100%, 50%, 0.5)产生半透明的红色。

   
   

5. mix() - 它允许您使用可选的权重参数将两种颜色混合在一起。示例： color: mix(red, blue)产生紫色阴影。

让我们详细了解它们。

红绿蓝()

好吧，让我们继续探索 CSS 颜色函数的世界，深入了解 RGB 函数。 RGB 函数是 CSS 中最常用的颜色函数之一，这是有充分理由的！

它很容易理解，并且可以让您更好地控制您在网站上使用的颜色。

RGB 函数取三个值，每个值代表

• 红色的，

• 绿色，和

• 分别为蓝色。

这些值的范围可以从 0 到 255。通过混合不同强度的红色、绿色和蓝色，您可以创建任何您喜欢的颜色。

例子：

• 对于红色 - rgb(255, 0, 0)

• 对于绿色 - rgb(0, 255, 0)

• 对于蓝色 - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

国标()

好吧，让我们继续学习 CSS 中另一个有用的颜色函数——HSL 函数！

HSL 函数类似于 RGB 函数，但它不使用红色、绿色和蓝色的值，而是使用以下值：

• 色调，

• 饱和度，和

• 亮度。

  
  

  这使得它更容易理解和使用，特别是对于那些刚接触色彩理论.

  
  

HSL 函数中的 hue 值表示颜色本身，取值范围为 0 到 360。

• 色调值0 表示红色，色调值 120 表示绿色，色调值 240 表示蓝色。

  
  

• HSL 函数中的饱和度值表示颜色的强度，取值范围为 0% 到 100%。饱和度值为 100% 表示颜色完全饱和，而值为 0% 表示颜色为灰色。

  
  

• HSL函数中的明度值表示颜色的亮度，取值范围为0%到100%。亮度值为50%表示颜色为中性灰色，值为100%表示颜色为全亮，值为0%表示颜色为全暗。

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

好了伙计们，让我们来谈谈RGBA功能吧！

RGBA 函数就像 RGB 函数一样，但有一个额外的好处：

• 它允许您指定颜色的不透明度。

当您想为元素创建半透明效果时，例如当您希望背景颜色部分透明时，这会派上用场。

RGBA 函数有四个值，前三个是红色、绿色和蓝色值，就像 RGB 函数一样。

第四个值是alpha 值，代表颜色的不透明度，取值范围为 0 到 1。

值为 0 表示颜色完全透明，而值为 1 表示颜色完全不透明。

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

高密度脂蛋白（）

好了伙计们，我们来谈谈 HSLA 功能吧！

HSLA 函数与 HSL 函数一样，但有一个额外的好处：它允许您指定颜色的不透明度。

当您想为元素创建半透明效果时，例如当您希望背景颜色部分透明时，这会派上用场。

HSLA 函数有四个值，前三个是色调、饱和度和亮度值，就像 HSL 函数一样。

第四个值是 alpha 值，代表颜色的不透明度，取值范围为 0 到 1。

值为 0 表示颜色完全透明，而值为 1 表示颜色完全不透明。

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

都是一样的 A 表示 Alpha 是我们（alpha 值为 0.75）为两个函数中的半透明效果而编辑的，很简单。

自定义属性或 CSS 变量

现在，我们来谈谈 CSS 中的自定义属性，也称为 CSS 变量。自定义属性允许您存储可在整个样式表中重复使用的值，从而更容易维护您的样式并使您的代码更易于使用模块化的灵活。

要创建自定义属性，您只需使用--语法后跟属性名称，然后是值

:root { --primary-color: blue; }

在这里，我们创建了一个名为--primary-color自定义属性，其值为blue 。

现在，要使用此自定义属性，您可以在 CSS 选择器中使用var()函数。

 button { background-color: var(--primary-color); }

上面的代码将所有<button>元素的背景颜色设置为蓝色，因为我们使用了自定义属性--primary-color 。

如果我们要改变--primary-color的值，我们只需要改变一个地方，它会自动更新整个样式表.

使用自定义属性的优点包括：

• 代码重用：无需在整个样式表中重复值，您可以将值存储在自定义属性中并根据需要重用它们。

• 可维护性：自定义属性可以更轻松地维护您的样式，因为您只需要在一个地方更新值。

• 灵活性：自定义属性允许您通过更改一个位置的值来更改站点的外观，而不是在多个选择器中进行更改。

CSS 颜色函数最佳实践

好吧，让我们谈谈在项目中使用 CSS 颜色函数的最佳实践。

这些技巧将帮助您创建一致且具有视觉吸引力的调色板用于您的网站，并确保所有用户都可以阅读和访问您的颜色。

为您的网站创建调色板：

使用 CSS 颜色时，您应该做的第一件事就是为您的网站创建一个调色板。这可以很简单，只需选择几种您喜欢的并且可以很好地搭配的颜色。

您可以使用 RGB、HSL、RGBA 或 HSLA 函数来定义颜色。

一个好的开始是选择一种主色，然后选择 2-3 种强调色来补充它。

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

使用 CSS 颜色函数进行对比和层次结构：

使用颜色在您的设计中创建对比度和层次结构非常重要。例如，您可以为背景使用较浅的颜色，为文本使用较深的颜色，以确保其易于阅读。

您还可以使用颜色来吸引对特定元素的注意，例如按钮或链接。

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

测试颜色函数的可读性和可访问性：

最后，测试颜色的可读性和可访问性很重要。确保您的颜色具有足够的对比度以便于阅读，尤其是对于有色觉缺陷的用户。

您可以使用在线工具检查颜色的对比度并确保它们符合无障碍标准。

• WebAIM 对比度检查器

• Muzli 调色板生成器

• Experte - 对比度检查器

• coolors - 调色板生成器

• Canva 调色板生成器

CSS 颜色函数高级技术

在本节中，我们将深入探讨一些使用 CSS 颜色函数的高级技术。

将 CSS 变量用于动态配色方案

您是否曾经想只用几行代码来改变您网站的配色方案？使用 CSS 变量，也称为自定义属性，您可以！

您可以创建一组变量来存储您的调色板，然后在整个样式表中使用它们。

这样，如果您想更改配色方案，只需更新变量中的值即可。

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

在这个例子中，我们为我们的主要颜色和次要颜色创建了两个自定义属性。然后我们使用它们来设计我们的h1和button元素。

使用 CSS 颜色函数创建动画

使用 CSS 颜色函数可以做的一件很酷的事情就是为它们设置动画！您可以在颜色之间创建平滑过渡，为您的网站增添一些活力。例如，您可以让按钮在用户将鼠标悬停在按钮上时改变颜色。

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

在这里，我们将按钮的默认背景颜色设置为绿色色调 ( hsl(120, 100%, 50%)并添加了过渡效果，以便在将鼠标悬停在按钮上时使颜色平滑变化。

我们将悬停状态的颜色更改为蓝色 ( hsl(240, 100%, 50%) )。

使用 CSS 颜色函数实现渐变和透明度

使用 CSS 颜色函数可以做的另一件有趣的事情是创建渐变和透明度。您可以使用 RGBA 和 HSLA 颜色函数创建半透明颜色，然后将它们组合以创建渐变。

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

在这里，我们创建了一个从红色 RGBA 颜色到绿色 HSLA 颜色的线性渐变。两种颜色的 alpha 值为 0.5，使它们成为半透明的。

你有它！

一些具有 CSS 颜色功能的高级技术。体验这些技巧的乐趣，尽情发挥您的创造力吧！

资源

• caniuse.com [支持 HTML5、CSS3 的表格]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

结论

总之，我希望这篇介绍对您开始使用 CSS 颜色函数和自定义属性有所帮助。

这些功能强大的工具可以使您的 CSS 代码更加灵活、可维护且更易于使用。编码愉快！