CSS RGBカラー

CSSの色 CSS HEX カラー

RGB 値

CSS では、次の式を使用して色を RGB 値として指定できます。

rgb(red, green, blue)

各パラメータ (redgreen 以及 blue) は、0 ~ 255 の色の強度を定義します。

たとえば、rgb(255, 0, 0) は、赤が最大値 (255) に設定されており、その他の設定が 0 であるため、赤で表示されます。

黒を表示するには、rgb(0, 0, 0) のように、すべてのカラー パラメーターを 0 に設定します。

白を表示するには、rgb(255, 255, 255) のように、すべてのカラー パラメーターを 255 に設定します。

次の RGB 値を混合して実験してください:

 

RED

255

GREEN

0

BLUE

0

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

自分で試してみてください

通常、グレーの色合いを定義するには、3 つのライトすべてに同じ値を使用します。

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)

自分で試してみてください

RGBA 値

RGBA カラー値は、アルファ チャネルを備えた RGB カラー値の拡張であり、カラーの不透明度を指定します。

RGBA カラー値は次のように指定されます:

rgba(red, green, blue, alpha)

alpha パラメータは、0.0 (完全に透明) から 1.0 (完全に不透明) までの数値です。

次の RGBA 値を混合して実験してください:

 

RED

255

GREEN

0

BLUE

0

ALPHA

0

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

自分で試してみてください