迹忆客 专注技术分享

CSS 的 color 属性表示元素的颜色，可以使用各种方式定义，例如 RGB、HSL、LCH、HWB、Color keyword 等。你可以阅读更多关于这些内容的信息表示颜色的各种方式在这里意味着：https://en.wikipedia.org/wiki/Color_theory。

RGB 是一种流行的颜色模型，所有浏览器都支持。RGB 代表红色、蓝色和绿色，也称为原色。这些原色的不同比例会产生更多的色调。

RGB 立方模型在 X 轴上表示红色，在 Y 轴上表示绿色，在 Z 轴上表示蓝色。如果三个坐标都在 0 处相遇，则代表黑色，255 代表白色。

RGB 颜色可以通过两种方式定义，功能方式和十六进制方式。

功能符号接受算术、百分比、每通道数字 8 位、每通道数字 12 位、每通道数字 16 位和每通道数字 24 位颜色格式。可以通过两种方式定义十六进制表示法，使用 6 位数字 或 3 位数字。

JavaScript 中 rgb() 颜色的语法

rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
#RRGGBB[AA]
#RGB[A]

JavaScript 中 rgb() 颜色的参数

• $red：这是一个强制性参数，用于定义最终颜色中红色脱落的强度。它的范围是 0-255 函数和 0-9, A-F 十六进制表示法。
• $green：这是一个强制性参数，用于定义最终颜色中绿色脱落的强度。它的范围是 0-255 函数和 0-9, A-F 十六进制表示法。
• $blue：这是一个强制性参数，用于定义最终颜色中蓝色脱落的强度。它的范围是 0-255 函数和 0-9, A-F 十六进制表示法。
• $alpha：它是一个可选参数，用于定义颜色的透明度。它采用百分比值，浮点值。

示例代码：

<div id="demo">
  <h1>Hello world!</h1>
  <p>Welcome to RGB tutorial</p>
</div> 

div {
    color: rgb(12, 45, 255, 0.7);
    padding: 20px;
}

<script>
const tag = document.getElementById("demo");
tag.style.color = "rgb(255, 45, 255, 0.7)";
</script>

输出：