<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 つだけの場合は 111 になるように複製されます。

G または GG

色の緑の成分であり、0 から ff (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は ccc になるように複製されます。

B または BB

色の青の成分であり、0 から ff (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は 999 になるように複製されます。

A または AA 省略可

色のアルファ成分であり、0 から ff (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は eee になるように複製されます。 0 または 00 は完全に透明な色で、 f または ff は完全に不透明な色です。

メモ: 構文は大文字小文字の区別がなく、 #00ff00#00FF00 と同じです。

完全に不透明なホットピンクの 16 進構文

HTML

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

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

関連情報

  • <color>: 色のデータ型
  • rgb(): 色の 3 成分および透明度を 10 進数で使用するように設定する関数
  • CSS 色モジュール