JavaScript 中的 RGB 颜色模型

Shraddha Paghdar 2022年5月11日
JavaScript 中的 RGB 颜色模型

CSS 的 color 属性表示元素的颜色,可以使用各种方式定义,例如 RGBHSLLCHHWBColor 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>

输出:

JS 中的 RGB 颜色模型

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Color