意外と知られていないCSSの4桁(#f00f)や8桁の色指定

CSSは4桁や8桁の色指定も可能

CSSは16進数で指定する場合は3桁(#f00)や6桁(#ff0000)の指定しかできないと思っている人が多いが、実は4桁(#f00f)や8桁(#ff0000ff)の指定もできる。

以下の赤いテキストをデベロッパーツールで確認してほしい。

#f00fや#ff0000ffが赤になっていることが確認できるはずだ。

sample1

sample2

sample3

sample4

.sample1 {
  color: #f00;
}

.sample2 {
  color: #f00f;
}

.sample3 {
  color: #ff0000;
}

.sample4 {
  color: #ff0000ff;
}

4桁と8桁の色指定は不透明度を含む

color: #f00f; と color: #ff0000ff; が有効なのは4桁と8桁の色指定が不透明度(Alpha)を含むからだ。

#RGBAと#RRGGBBAAであり、それぞれ rgba(255, 0, 0, 1) と同じ。

つまり半透明の場合は#ff000080となり rgbaだとrgba(255, 0, 0, 0.5)と同じ。

example1

example2

.example1 {
  color: rgba(255, 0, 0, 0.5);
}

.example2 {
  color: #ff000080;
}

なぜ4桁と8桁の色指定は使用されないのか

現在CSSで4桁と8桁の色指定が使用されることはほとんどない。

理由はIE11で使用できないことが大きい。

IE11は2022年6月15日にサポート終了となるが、4桁と8桁は不透明度(Alpha)が16進数なのでわかりにくく、3桁、6桁以外に4桁、8桁が混在するとコードの可読性が低下するので今後も使用されることはないだろう。