CSSで色を指定するときの方法は、下記の6種類があります。
色の指定は半角の英数字を使用します。
CSSでは、大文字・小文字の区別はありません。
16進数で指定する (#RRGGBB形式)
「#」記号に続けて、RGB( Red,Green,Blue )を2桁ずつの16進数で指定します。
Red・Green・Blueをそれぞれ16×16の256段階で指定することができます。
HTMLとCSSとJavaScriptで使用できる指定方法です。
| ・ 赤を指定する場合 : |
#ff0000 |
| ・ 黄を指定する場合 : |
#ffff00 |
| ・ 青を指定する場合 : |
#0000ff |
10進数で指定する (rgb(n,n,n)形式)
RGBに続くカッコの中に、Red・Green・Blueを10進数の256段階(0〜255)で指定します。
これは、CSSのみで使用できる指定方法です。
| ・ 赤を指定する場合 : |
rgb(255,0,0) |
| ・ 黄を指定する場合 : |
rgb(255,255,0) |
| ・ 青を指定する場合 : |
rgb(0,0,255) |
%で指定する (rgb(n%,n%,n%)形式)
RGBに続くカッコの中に、Red・Green・Blueをパーセント(0%〜100%)で指定します。
これは、CSSのみで使用できる指定方法です。
| ・ 赤を指定する場合 : |
rgb(100%,0%,0%) |
| ・ 黄を指定する場合 : |
rgb(100%,100%,0%) |
| ・ 青を指定する場合 : |
rgb(0%,0%,100%) |
色名で指定する
色の名前で直接指定します。
HTMLとCSSとJavaScriptで使用できる指定方法です。
| ・ 赤を指定する場合 : |
red |
| ・ 黄を指定する場合 : |
yellow |
| ・ 青を指定する場合 : |
blue |
システムカラーで指定する
システムカラーのキーワードで直接指定します。
CSSで使用できる指定方法です。
| ・ アクティプなウィンドウの枠の色を指定する場合 |
: |
activeborder |
| ・ 立体的なボタンの表面の色を指定する場合 |
: |
buttonface |
| ・ ウィンドウのテキストの色を指定する場合 |
: |
windowtext |
色の一覧を表示します。