<hex-color>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
<hex-color>
は CSS のデータ型で、sRGB 色の原色成分(赤、緑、青)を 16 進数で記述し、その透明度も記述する記法です。
<hex-color>
値は、 <color>
が使用できるところならどこでも使用することができます。
構文
#RGB // 値 3 つの構文 #RGBA // 値 4 つの構文 #RRGGBB // 値 6 つの構文 #RRGGBBAA // 値 8 つの構文
値
R
またはRR
-
色の赤の成分であり、
0
からff
(255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は1
が11
になるように複製されます。 G
またはGG
-
色の緑の成分であり、
0
からff
(255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合はc
がcc
になるように複製されます。 B
またはBB
-
色の青の成分であり、
0
からff
(255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は9
が99
になるように複製されます。 A
またはAA
省略可-
色のアルファ成分であり、
0
からff
(255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合はe
がee
になるように複製されます。0
または00
は完全に透明な色で、f
またはff
は完全に不透明な色です。
メモ:
構文は大文字小文字の区別がなく、 #00ff00
は #00FF00
と同じです。
例
完全に不透明なホットピンクの 16 進構文
HTML
<span>
#f09
<div class="c1"></div>
</span>
<span>
#F09
<div class="c2"></div>
</span>
<span>
#ff0099
<div class="c3"></div>
</span>
<span>
#FF0099
<div class="c4"></div>
</span>
CSS
div {
width: 40px;
height: 40px;
}
.c1 {
background: #f09;
}
.c2 {
background: #f09;
}
.c3 {
background: #ff0099;
}
.c4 {
background: #ff0099;
}
結果
仕様書
Specification |
---|
CSS Color Module Level 4 # hex-notation |
ブラウザーの互換性
BCD tables only load in the browser