CSS での RGB カラーの使用の分析

この記事では主にCSSのRGBカラーの詳細な使い方を紹介します。CSSの入門学習のための基礎知識です。

RGBカラーモデルの説明

ある色に含まれる赤、緑、青の三原色の量を測定する方法は、水彩絵の具や油絵の具を混ぜて希望の色を得るのと同じです。

純粋な青を作りたい場合を想像してください。これを実現するには、この色に赤と緑を入れることはできません。そこで、赤と緑を 0% に設定し、緑を 100% に設定します。

rgb(0%, 0%, 100%)

結果:

しかし、必要なものが青ではなく紫だったらどうでしょうか? 100% の赤と 100% の青を混ぜることで藤色を得ることができます:

rgb(100%, 0%, 100%)

結果:

基本的な色彩理論から、どの色も黒ではないことがわかっています。したがって、黒を取得するには、赤、緑、青の 3 原色を 0% に設定することで実現できます:

rgb(0%, 0%, 0%)

結果:
RGB カラーの値を決定する方法

次のカラーピッカー関数を使用できます。 Photoshop では、特定の色の赤、緑、青の 3 原色の値を取得できますが、Color Slider や The RGB Color Calculator などの無料のオンラインツールもあります。

w3school の RGB カラーの説明:

RGB カラー

すべてのブラウザは RGB カラー値をサポートしています。

RGB カラー値は次のように指定されます: rgb(赤、緑、青)。各パラメータ (赤、緑、青) は色の強度を定義し、0 ～ 255 の整数、またはパーセンテージ値 (0% ～ 100%) を指定できます。

たとえば、rgb(0,0,255) 値は青で表示されます。これは、青のパラメータが最高値 (255) に設定されており、その他のパラメータは 0 に設定されているためです。

同様に、rgb(0,0,255) と rgb(0%,0%,100%) の値は同じ色を定義します。
例

p   
{   
background-color:rgb(255,0,0);   
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連記事