TECH I.S.

CSS RGB カラー


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


RGB値

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

RGB(*赤、* *緑*、*青*)

各パラメーター (赤、緑、青) は、0 ~ 255 の色の強度を定義します。

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

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

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

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

rgb(255, 99, 71)

255

99

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(*赤、* *緑*、*青、アルファ*)

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

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

rgba(255, 99, 71, 0.5)

255

99

71

アルファ

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)

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細