色の指定方法（その2）

カスタム検索

色の指定方法（その2）

色の指定には、16進数によるものもあります。この方法が最もよく使用されています。

CSSで使用するだけなら、計算したりする訳ではないので、16進数に馴染みのない人でも気にする必要はありません。16進数で色を指定する際の便利なページも用意してあります。

次の表は、16進数と10進数の関係（変換）です。16進数は9のあとに、a、b、c、d、e、fまであり、fで繰り上がります。

16進数と10進数の関係
16進数	00	01	02	-	09	0a	0b	0c	-	0f	10	11	-	1a	-	ff
10進数	00	01	02	-	09	10	11	12	-	16	17	18	-	26	-	255

16進数での指定

最初に「#」（シャープ）を付けた6桁の16進数でRGB値を表現します。10進数のときのように、「()」で囲む必要も「,」で区切る必要もありません。


h2 {
    color: #0000ff;
}

#のあと、最初の2桁が赤、次の2桁が緑、その次の2桁が青を表し、それぞれの2桁の数が大きいほど、その色が強く表現されます。上の例では、最後の2桁が最も大きい「ff」で、残りの数は「00」なので、最も強い青ということになります。

尚、16進数、10進数による色指定で、どの数値がどのような色になるかを確認できるカラー確認（1677万色）のページを用意してありますので、活用してください。

数値（10進数、16進数とも）の色指定では、256×256×256の16777216色の表現が可能ですが、全てのコンピュータでこれだけの色数を表現できる訳ではありません。ですので、次の16進数でRGBを1桁ずつ指定する方法か、Webセーフカラーを使用するようにしてください。

CSSでは、色を16進数で指定する際、RGBそれぞれの値を1桁に省略して記述する方法も用意されています。例えば、「ff」は「f」として、「cc」は「c」として記述します。この方法だと、16×16×16で、4096色の色指定が可能です。


h2 {
    color: #0f0;
}

上の例では、2つめの桁が最も大きいので、一番強い緑を指定しています。

カラー確認（4096色）のページを用意してありますので、活用してください。

上の16進数を1桁ずつ指定する方法のうち、数値として「0、3、6、9、c、f」のみを使用して記述すると、6×6×6の216色を表現することになります。

この数値の組み合わせによって表現される色を「Webセーフカラー」といい、カラー表示が可能なディスプレイであれば、ほぼ問題なく表示することができます。色に関する特別なこだわり等がない限り、このWebセーフカラーを使用した方が無難です。

尚、Webセーフカラー一覧に、216色全てを一覧表示してあります。