WEBで色を指定するときの方法は、下記の6種類があります。
HTML、JavaScriptでは16進数指定(#RRGGBB形式)と色名指定ができますが、CSSはそれに加えて#RGB、RGB(n%,n%,n%)、RGB(n,n,n)とシステムカラーの指定もできます。
また、この色の指定は半角の英数字を使用します。
HTMLやCSSでは、大文字・小文字の区別はありませんが、JavaScriptでは、大文字・小文字は区別されます。
間違えるとスクリプトが動作しないので注意しましょう!
16進数で指定 (#RRGGBB形式)
「#」記号に続けて、RGB( Red,Green,Blue )を2桁ずつの16進数で指定します。
Red・Green・Blueをそれぞれ16×16の256段階で指定することができます。
HTMLとCSSとJavaScriptで使用できる指定方法です。
・ 赤を指定する場合 :
・ 黄を指定する場合 :
・ 青を指定する場合 : |
#ff0000
#ffff00
#0000ff |
16進数で指定 (#RGB形式)
「#」記号に続けて、RGB( Red,Green,Blue )を1桁ずつの16進数で指定します。
Red・Green・Blueをそれぞれ16段階で指定することができます。
この指定は、各RGBの1桁の値をふたつ並べた数値と同じになります。(「#f00」の場合、「#ff0000」となります)
これは、CSSのみで使用できる指定方法です。
・ 赤を指定する場合 :
・ 黄を指定する場合 :
・ 青を指定する場合 : |
#f00
#ff0
#00f |
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 |