CSSの透明度はHEXとRGBAのどちらで指定する？

CSSで背景や装飾の色を半透明にするとき、HEXとRGBAのどちらを使えばよいか迷うことがあります。結論から言うと、どちらでも透明度を指定でき、同じ色と不透明度なら見え方も同じです。違うのは主に書き方と調整のしやすさです。今回は案内カードを例に、8桁HEXとRGBAを比較し、背景によって変わる見え方まで確認します。

HEXとRGBAはどちらを選べばよい？

CSS（WEBページの見た目を指定するルール）では、6桁のHEXは赤・緑・青を16進数で表します。透明度まで指定する場合は、末尾に2桁を加えた8桁HEXを使います。例えば青■#2563EBを20%の不透明度にするなら、■#2563EB33と書けます。末尾の33は16進数で51を表し、アルファ値（不透明度）は51÷255＝0.2になります。末尾00は完全透明、FFは完全に不透明です。

RGBAはRed（赤）・Green（緑）・Blue（青）・Alpha（不透明度）を数値で指定する書き方です。同じ青ならrgba(37, 99, 235, 0.2)です。末尾の0.2を0.4に変えるだけで不透明度を調整でき、割合を比較しながら試すときに扱いやすい形式です。現在のCSSではrgb(37 99 235 / 20%)という書き方もでき、rgba()は引き続き利用できます。

既存のHEXカラーをそのまま使い、透明度も固定して管理したいなら8桁HEXが便利です。一方、透明度を何度も微調整したり、数値で共有したりするならRGBAやrgb()のアルファ指定が分かりやすくなります。なお8桁HEXの透明度は256段階なので、任意の小数値を必ず完全一致で表せるとは限りません。表示品質の優劣ではなく、作業に合う形式で選びます。

白背景の案内カードで8桁HEXとRGBAを比較

白■#FFFFFFの上に、青■#2563EBを20%だけ重ねた案内カードを2つ並べます。左は8桁HEXの■#2563EB33、右はrgba(37, 99, 235, 0.2)です。両方とも同じ青成分と同じアルファ値なので、同じ白い下地なら同じ色になります。カード内の文字は濃い青灰色■#1E293B、境界線は青■#2563EBにそろえます。

<div class="alpha-demo">
  <section class="alpha-card alpha-card--hex">
    <h3>HEXで指定</h3>
    <p>20%の青を重ねた案内カード</p>
  </section>
  <section class="alpha-card alpha-card--rgba">
    <h3>RGBAで指定</h3>
    <p>同じ青と透明度の案内カード</p>
  </section>
</div>

.alpha-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
  background-color: rgb(255 255 255);
}
.alpha-card {
  flex: 1 1 220px;
  padding: 20px;
  border: 2px solid rgb(37 99 235);
  border-radius: 12px;
  color: rgb(30 41 59);
}
.alpha-card--hex {
  background-color: ■#2563EB33;
}
.alpha-card--rgba {
  background-color: rgba(37, 99, 235, 0.2);
}

ここではbackground-colorだけを半透明にしており、文字や境界線の不透明度は下げていません。透明な青が白と合成されたカード内側の色は、おおよそ淡い青■#D3E0FBになります。文字の濃い青灰色■#1E293Bとこの背景のコントラスト比は約11.02:1で、WCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。境界線の青■#2563EBと内側の淡い青■#D3E0FBは約3.89:1です。実際に別の背景色へ置く場合は、同じ数値になるとは限りません。

背景色が変わったときの注意点

半透明の色は、それ単独で完成色が決まるわけではありません。例えば同じ20%の青■#2563EB33を、白ではなく濃紺■#0F172Aの上に重ねると、合成結果はおおよそ暗い青■#132651になります。この場合、先ほどの文字色■#1E293Bとのコントラストは約1.01:1で、通常サイズの文字の基準を満たしません。必要なら文字を白■#FFFFFFなどへ変更し、実際の隣接色で再計算します。

また、opacity: 0.2をカード全体に設定すると、文字も境界線も含めて薄くなります。背景だけ透かしたいときは、今回のようにbackground-colorの色へアルファを含めてください。画面幅や重なる要素、下地の色が変わる場合も、完成状態を確認する必要があります。

HueRollでは6桁のHEXをコピーでき、選んだ色と白・黒のコントラストを確認できます。ただし8桁HEXをそのままコピーする機能や、半透明色と任意の背景を合成した結果を自動判定する機能はありません。元の色を決めてからCSS側でアルファを指定し、完成した配色の読みやすさを別途確認するのが確実です。