TECH I.S.

CSS RGB カラー


RGBカラー値は、RED、GREEN、および BLUEの光源を表します。


RGB値

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

RGB(red, green, blue)

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

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

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

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

以下のRGB値を混ぜてみてください。

rgb(255, 99, 71)

red

255

green

99

blue

71

例

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(60, 60, 60)
rgb(90, 90, 90)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(210, 210, 210)
rgb(240, 240, 240)


RGBA値

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

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

rgba(red、green、blue、alpha)

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

以下のRGBA値を混合して実験します。

rgba(255, 99, 71, 0.5)

red

255

green

99

blue

71

alpha

0.5

例

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)