嘿，各位开发者！今天，我们将深入 CSS 颜色函数的世界。 您可能使用过 CSS 来更改网页上元素的颜色，但是您听说过 CSS 颜色函数吗？如果没有，请系好安全带，因为您将学到新的且非常有用的东西！ 让我们从我昨天读到的一句话开始 . 好书 色彩是键盘，眼睛是和声，灵魂是多弦琴。艺术家是演奏的手，触摸一个或另一个键，引起灵魂的振动。  CSS 颜色函数到底是什么？  CSS 颜色函数是一种在 CSS 中使用数学函数指定颜色的方法，而不仅仅是简单的颜色代码。 这些函数提供了对样式表中使用的颜色的更多控制和灵活性。 使用颜色函数，您可以调整颜色的 、 、 和 ，甚至可以将两种或多种颜色混合在一起。 色调 饱和度 亮度 不透明度 有多个 CSS 函数可用，让我们看一些：    - 它采用三个值，分别代表红色、绿色和蓝色，并返回一种颜色。值的范围为 0 到 255。示例：  产生红色。 rgb() color: rgb(255, 0, 0)    - 它类似于  ，但它还允许您设置颜色的不透明度。第四个值 alpha，范围从 0 到 1。示例：  产生半透明的红色。 rgba() rgb() color: rgba(255, 0, 0, 0.5)    - 它采用三个值，分别表示色调、饱和度和亮度，并返回一种颜色。示例：  产生红色。 hsl() color: hsl(0, 100%, 50%)    - 它类似于  ，但它还允许您设置颜色的不透明度。示例：  产生半透明的红色。 hsla() hsl() color: hsla(0, 100%, 50%, 0.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 函数一样。 第四个值是 ，代表颜色的不透明度，取值范围为 0 到 1。 alpha 值 值为 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 代码更加灵活、可维护且更易于使用。编码愉快！

Proof of Work - Portfolio

Read My Stories

Buy Me a Coffee

Portfolio

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

比特币 UTXO 模型，为独特的生态系统提供动力

架构师指南：构建 AI/ML 数据湖参考架构

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

比特币 UTXO 模型，为独特的生态系统提供动力

架构师指南：构建 AI/ML 数据湖参考架构

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps