JavaScript の RGB カラーモデル

Shraddha Paghdar 2024年2月15日
JavaScript の RGB カラーモデル

CSS の color 属性は、要素の色を表します。これは、RGBHSLLCHHWBColor 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>

出力:

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