JavaScript 中的 RGB 顏色模型

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>

輸出：