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