16 進カラー構文
16 進カラー構文は sRGB カラーを 16 進数で記述するための記法で、その原色成分(赤、緑、青)と透明度を記述します。<color> 型が許容される箇所であればどこでも使うことができます。
構文
#RGB // 3 桁の構文 #RGBA // 4 桁の構文 #RRGGBB // 6 桁の構文 #RRGGBBAA // 8 桁の構文
値
RまたはRR-
色の赤成分を
0からff(255) までの 16 進数(大文字と小文字を区別しない)で指定します。数字が 1 桁の場合は同じ数字 2 桁と解釈されます。1は11を意味します。 GまたはGG-
色の緑成分を
0からff(255) までの 16 進数(大文字と小文字を区別しない)で指定します。数字が 1 桁の場合は同じ数字 2 桁と解釈されます。cはccを意味します。 BまたはBB-
色の青成分を
0からff(255) までの 16 進数(大文字と小文字を区別しない)で指定します。数字が 1 桁の場合は同じ数字 2 桁と解釈されます。9は99を意味します。 AまたはAA省略可-
色の透明度を示すアルファ成分を
0からff(255) までの 16 進数(大文字と小文字を区別しない)で指定します。数字が 1 桁の場合は同じ数字 2 桁と解釈されます。eはeeを意味します。0は完全な透明色を、ffは完全な不透明色を表します。
メモ:
この構文は大文字と小文字を区別しないため #00ff00 は #00FF00 と同値です。
例
html
/* 不透明な濃いピンク色の 16 進構文 */
#f09 <div class="c1"></div>
#F09 <div class="c2"></div>
#ff0099 <div class="c3"></div>
#FF0099 <div class="c4"></div>
css
div {width: 40px; height: 40px;}
.c1 { background: #f09}
.c2 { background: #F09}
.c3 { background: #ff0099}
.c4 { background: #FF0099}