カラー・チュートリアル

❮ ホームへ 次章へ ❯

色は、赤、緑、青の光源の組合せで表示されます。


色名

CSS では、色の名前を使用して設定することができます:

名前
 Red
 Orange
 Yellow
 Cyan
 Blue
Try it Yourself ❯

CSS 色の値

CSS では、色を指定するのにいろいろな方法があります:


RGB カラー

RGB カラーの値は、全てのブラウザでサポートされています。

RGB カラーの値は、次のように指定します: rgb(red, green, blue).

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

例えば、rgb(0,0,255) は、青色のパラメータがその最高値(255)に設定され、その他は 0 に設定されているため、 青色として表示されます。

RGB
  rgb(255,0,0) Red
  rgb(0,255,0) Green
  rgb(0,0,255) Blue
Try it Yourself ❯

グレーの色合いは、大抵、3 つの光源すべてに同じ値を使用して定義されています:

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

16進数 カラー

16進数 のカラーの値も、すべてのブラウザでサポートされています。

16進数 のカラーの値は、次のように指定します:#RRGGBB.

RR (赤)、GG (緑)、BB (青) は、色の強さを指定する 00 ~ FF の16進数です。

例えば、#0000FF は、青色の成分がその最高値(255)に設定され、その他は 0 に設定されているため、 青色として表示されます。

16 進数 RGB
  #FF0000 rgb(255,0,0) Red
  #00FF00 rgb(0,255,0) Green
  #0000FF rgb(0,0,255) Blue
Try it Yourself ❯

グレーの色合いは、大抵、3 つの光源すべてに同じ値を使用して定義されています:

16 進数 RGB
  #000000 rgb(0,0,0) Black
  #808080 rgb(128,128,128) Gray
  #FFFFFF rgb(255,255,255) White
Try it Yourself ❯

大文字か小文字か?

16進数を指定するのに、大文字でも小文字でも使用することができます。

小文字は書きやすく、大文字は読みやすくなります。


色名

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

次の章では、16 進数値付きの完全な色名のアルファベット順リストを参照できます:

色名 Hex
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  

❮ ホームへ 次章へ ❯