<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
RGB hexadecimal notation (#RRGGBB, #RGB, …)
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

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