JavaScript の RGB カラーモデル

CSS の color 属性は、要素の色を表します。これは、RGB、HSL、LCH、HWB、Color keyword などのさまざまな方法で定義できます。これらの詳細については、こちらを参照します。

RGB は、すべてのブラウザでサポートされている人気のカラーモデルです。RGB は赤、青、緑の略で、原色とも呼ばれます。これらの原色のさまざまな比率により、さらに多くの色合いが生成されます。

RGB キュービックモデルは、X 軸に赤色、Y 軸に緑色、Z 軸に青色を表します。3つの座標すべてが 0 で交わる場合、それは黒の色を表し、255 は白の色を表します。

RGB の色は、機能的な方法と 16 進数の方法の 2つの方法で定義できます。

機能表記は、算術、パーセンテージ、デジタル 8 ビット/チャネル、デジタル 12 ビット/チャネル、デジタル 16 ビット/チャネル、およびデジタル 24 ビット/チャネルカラーフォーマットを受け入れます。16 進表記は、6 桁または 3 桁の 2つの方法で定義できます。

JavaScript での rgb() カラーの構文

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

JavaScript の rgb() カラーのパラメータ

• $red：これは必須のパラメータで、最終的に得られる色の赤の強度を定義します。その範囲は、機能では 0-255、16 進表記では 0-9, A-F です。
• $green：これは必須のパラメータで、最終的に得られる色のうち、緑の部分の強度を定義します。その範囲は、機能では 0-255、16 進表記では 0-9, A-F です。
• $blue：これは必須のパラメータで、最終的な色に含まれるブルーの色の濃さを定義します。その範囲は、機能では 0-255、16 進表記では 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>

出力：