CSSの8桁HEXとは？透明度を含むカラーコードの読み方

CSSのカラーコードに8桁のHEXが書かれていて、最後の2文字が何を表すのか迷ったことはありませんか。8桁HEXは、普段の6桁HEXに「不透明度」を加えた書き方です。前から順に色の成分を読み、末尾を換算すれば、どの色がどの程度透けるのかを理解できます。この記事では読み取り方と4桁の省略形を説明し、2種類の案内メモを作る例で確かめます。

8桁HEXの順番はRRGGBBAA：最後のAAが不透明度

CSS（WEBページの見た目を指定するルール）のHEXカラーは、#の後に16進数（0～9とA～Fを使う数の表し方）を並べます。8桁の場合は#RRGGBBAAという順番です。RRが赤、GGが緑、BBが青の強さで、最後のAAがアルファ値（不透明度）です。先頭に透明度を置くのではなく、色の6桁の後へ付ける点が重要です。

例えば青緑■#0F766Eに透明度を加えた■#0F766E1Aでは、0Fが赤15、76が緑118、6Eが青110、1Aが不透明度です。末尾の1Aを10進数に直すと26なので、26 ÷ 255 × 100で約10.2%の不透明度になります。これは約89.8%が透明という意味で、10.2%の透明度ではありません。

アルファ値を読むときの目安は、00が0%（完全透明）、33が20%、80が約50.2%、CCが80%、FFが100%（不透明）です。たとえば■#0F766E80は同じ青緑を約50.2%の不透明度にした指定です。16進数の2桁は0～255の256段階なので、割合を整数でぴったり表せない場合もあります。

4桁の#RGBAという省略形もあり、各桁を2回ずつ繰り返して展開します。例えば■#2A8Cは■#22AA88CCと同じ色・不透明度です。4桁に短縮できるのは、展開後の赤・緑・青・アルファの各2桁がそれぞれ同じ文字の繰り返しになる場合だけです。大文字と小文字は区別されません。

8桁HEXを案内メモの背景に使ってみる

ヘルプページの「操作のヒント」と「確認のポイント」を、同じ青緑の濃さだけ変えて表示します。下地は白■#FFFFFF、基準色は青緑■#0F766E、文字は濃い青灰色■#173449です。弱めのメモには■#0F766E1A（不透明度約10.2%）、目を向けてほしいメモには■#0F766E4D（約30.2%）を使います。色だけに意味を任せず、見出しの言葉でも用途を区別します。

<div class="reading-notes">
  <section class="reading-note reading-note--soft">
    <h3>操作のヒント</h3>
    <p>設定の説明を確認してから進みましょう。</p>
  </section>
  <section class="reading-note reading-note--strong">
    <h3>確認のポイント</h3>
    <p>入力内容をもう一度見直してください。</p>
  </section>
</div>

.reading-notes {
  display: grid;
  gap: 16px;
  padding: 20px;
  background-color: ■#FFFFFF;
}
.reading-note {
  padding: 16px 20px;
  border-left: 4px solid ■#0F766E;
  border-radius: 8px;
  color: ■#173449;
}
.reading-note--soft {
  background-color: ■#0F766E1A;
}
.reading-note--strong {
  background-color: ■#0F766E4D;
}
.reading-note h3 { margin: 0 0 8px; }
.reading-note p { margin: 0; }

白い下地と合成された結果、薄いメモの背景はおよそ■#E7F1F0、濃いメモの背景はおよそ■#B7D6D3に見えます。8桁HEXは完成後の塗り色ではなく、元の青緑に不透明度を付けた指定です。background-colorだけに使っているため、本文の文字や左枠線そのものは半透明になりません。

背景との組み合わせを確認し、透け方を調整する

濃い文字■#173449と薄いメモ背景■#E7F1F0のコントラスト比は約11.23:1、濃いメモ背景■#B7D6D3とは約8.36:1です。通常サイズの文字についてWCAG 2.2が求める4.5:1をいずれも上回ります。左枠線の青緑■#0F766Eと各背景の比率は、それぞれ約4.75:1と約3.54:1です。重要なUIの境界など、識別に必要な非テキスト表示では隣接色との3:1も確認の目安になります。

ただし、これらは白い下地の上で合成した場合の計算値です。下地を写真や暗い色に変えると、同じ8桁HEXでも最終的な色とコントラストは変わります。また、後ろの2桁だけを変更すれば透け方を調整できますが、濃くしすぎると文字が埋もれる場合があります。opacityを親要素に指定すると文字まで薄くなるため、背景だけ変えたい場合は色のアルファ値で調整してください。

同じ透明度をRGBA形式でも表せますが、両形式の使い分けを知りたい場合とは別に、8桁HEXでは各桁を正しく読むことが第一歩です。HueRollでコピーできるのは6桁のHEXなので、透明度を加える場合はCSS側で末尾2桁を付けます。HueRollは任意の背景との合成色や2色間のコントラストを自動判定しないため、完成した組み合わせを別途確認しましょう。