CSS Colors

❮ 前章へ 次章へ ❯

色は赤、緑、青の光を混合して表示されます。


CSS の色は、多くの場合、次により指定されます:


色名

色名を使用して設定する色:

名前
 Red
 Green
 Blue
 Orange
 Yellow
 Cyan
 Black
Try it Yourself ❯

注: 色名は、大文字小文字の区別をしません:"Red" は、"red" や "RED" と同じです。

HTML および CSS は、140 の標準色名をサポートしています。


RGB (赤、緑、青)

RGB カラー値は、次の形式で指定します:rgb(赤、緑、青).

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

例えば、rgb(255,0,0) は、赤が最大値(255)に設定され、他は 0 に設定されているため、赤で表示されます。 実験的に RGB 値を混合したものを以下に示します:

255 0 0

RGB
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,165,0)
  rgb(255,255,0)
  rgb(0,255,255)
Try it Yourself ❯

灰色は、大抵、3 光源全てを同じ値にして定義されています:

RGB
  rgb(0,0,0)
  rgb(128,128,128)
  rgb(255,255,255)
Try it Yourself ❯

16進カラー

RGB の値は、次の形式で 16 進カラー値を使用して指定することもできます:#RRGGBB。 RR (赤)、GG (緑)、BB (青) は、 00 ~ FF (10 進数の 0-255 に同じ) の16進数の値です。

例えば、#FF0000 は、赤が最大値(FF)に設定され、他は最小値 (00) に設定されているため、赤で表示されます。

注: HEX 値は、大文字と小文字を区別しません:"#ff0000" と "FF0000" は同じ値です。

HEX
  #FF0000
  #00FF00
  #0000FF
  #FFA500
  #FFFF00
  #00FFFF
Try it Yourself ❯

灰色は、大抵、3 光源全てを同じ値にして定義されています:

HEX
  #000000
  #808080
  #FFFFFF
Try it Yourself ❯

❮ 前章へ 次章へ ❯