“<hex-color>”値~16進数カラーコード

“<hex-color>”値

“16進数カラーコード(Hexadecimal notations)”や単に“カラーコード”と呼ばれることの多い“<hex-color>”値はRGBカラー・モデルの赤、緑、青の色成分を16進数で指定する方法です。16進数カラーコードは“<color>”値として使用することができます。

16進数カラーコードはコンピュータ言語で色を表すもっとも一般的な色の表現方法で、CSSだけでなくHTMLやSVGなどでも使用されてきました。

“<hex-color>”値の構文

ハッシュ(“#”)に続けて色成分を2桁ずつの16進数で続けて記述します。

#〚赤〛〚緑〛〚青〛


色成分は赤、緑、青の順に記述し、範囲は“00”から“ff”です。1桁の色成分には“0”を付けて2桁にします。

“a”~“f”は大文字と小文字は区別されません。

透明度の指定

“<hex-color>”値は最後に2桁を追加した8桁の16進数で透過度を示すアルファ値を指定することができます。

不透明な黒
#000000ff

透明な黒
#00000000


アルファ値の範囲は“00”から“ff”で、“00”が完全な透明、“ff”は不透明を表します。1桁のアルファ値には“0”を付けて2桁にします。

短縮表記

3桁表記

“<hex-color>”値には3桁で各色成分を表す短縮表記があります。

赤
#f00

緑
#0f0

青
#00f


赤、緑、青の各色成分を“0”~“9”と“a”~“f”のうちの1文字で表し、“0”が最低値、“f”が最大値を表します。

4桁表記

“<hex-color>”値には3桁で各色成分を表す短縮表記にアルファ値を表す1桁を追加した記述方法です。

“0”~“9”と“a”~“f”のうちの1文字でアルファ値を表し、“0”が完全に透明、“f”が不透明を表します。

不透明な黒
#000f

透明な黒
#0000


使用例

色を指定する

.banana { background-color: #ffd700;}
.apple { background-color: #dc143c;}
.peach { background-color: #ffdab9;}
.kiwi { background-color: #808000;}
.mangosteen { background-color: #db7093;}
.melon { background-color: #98fb98;}
.orange { background-color: #ffa500;}
.grape { background-color: #483d8b;}
.durian { background-color: #eee8ff;}


バナナ	リンゴ	モモ
キウイ	マンゴスチン	メロン
オレンジ	ブドウ	ドリアン

アルファ値を含む色

.purple-100p { background-color: #c66faaff;}
.purple-90p { background-color: #c66faae6;}
.purple-80p { background-color: #c66faacc;}
.purple-70p { background-color: #c66faab3;}
.purple-60p { background-color: #c66faa99;}
.purple-50p { background-color: #c66faa80;}
.purple-40p { background-color: #c66faa66;}
.purple-30p { background-color: #c66faa4d;}
.purple-20p { background-color: #c66faa33;}
.purple-10p { background-color: #c66faa1a;}
.purple-0p { background-color: #c66faa00;}


100% (ff)	90% (e6)	80% (cc)
70% (b3)	60% (99)	50% (80)
40% (66)	30% (4d)	20% (33)
10% (1a)	0% (00)

仕様書

定義されている仕様書

<hex-color>