CSSでのRGBによる色指定

この教科書の最初に、色について学んだ時、 色は英語の単語で指定するか、rgbを介して指定するか、 または#を介して指定できるとお伝えしました。 後者の2つの形式は、あらゆる色調の色を得ることを可能にします。 これらの形式が具体的にどのように機能するかを見ていきましょう。

これらの方法を理解するために、まずは コンピュータの画面上で必要な色がどのように生成されるかを 理解する必要があります。

実際のところ、画面上の個々の点（ピクセル）は 必要な全ての色を発光することはできません。 技術的に非常に複雑になってしまうためです。 画面上の各点は、3つの色：赤、緑、青のみを 発光することができます。ただし、同時に、 異なる割合で発光することが可能です。

これらの色を組み合わせることで、画家が絵の具を使って 行うのと同様に、必要な任意の色を得ることができます： いくつかの色を混ぜ合わせることで、新しい別の色を作り出します。

CSSで色を混ぜるには、プロパティの値として キーワードrgbを指定し、その後ろにカンマで区切って これら3つの基本色をどの割合で取るかを指定します。 各色の値は0から255まで変化させることができます。 なお、ゼロは色の不在を意味し、255は 純色（例えば、純粋な赤）を意味します。

文字rgb自体は、red（赤）、green（緑）、 blue（青）の略です。

例を見てみましょう。

例

純粋な赤と純粋な青を混ぜてみましょう。 そのためには、最初の値を255に、 2番目の値を0に、3番目の値を255に設定します。 紫色が得られます：

:

例

今度は最初の値を255に設定し、 他のすべての値をゼロに設定してみましょう。 結果として純粋な赤色が得られます：

:

例

このようにすると純粋な緑色が得られます：

:

例

緑の値を255ではなく、 100に設定すると、部分的に緑色になります：

:

例

3つの色を任意の割合で混ぜてみましょう。 どうなるかご覧ください：

:

例

すべての値を255に設定すると、 純粋な白色になります：

例

すべての値を0に設定すると、 純粋な黒色になります：

実践的な課題