3桁HEXと6桁HEXの違いは？WEBカラーの書き方

CSSで色を指定するとき、■#F80のような3桁のコードと、■#FF8800のような6桁のコードを見かけます。3桁は色を大まかに指定する方法なのでしょうか。実は、この2つはまったく同じ橙色です。ただし、すべての6桁HEXを3桁に短縮できるわけではありません。違いを理解して、色を変えずに書き換える方法と実際の使い分けを確認しましょう。

3桁HEXは各文字を2回ずつ繰り返した6桁HEXと同じ色

HEX（16進数によるカラーコード）は、赤・緑・青の成分を「#」と英数字で表す方法です。RGB（赤・緑・青の3成分で色を表す仕組み）を6桁で指定する場合、赤・緑・青にそれぞれ2文字ずつ割り当てます。例えば橙の■#F80を展開すると、赤のFはFF、緑の8は88、青の0は00となり、■#FF8800です。3桁は近似色ではなく、この6桁と完全に一致します。

同様に、青の■#06Cは■#0066CC、白の■#FFFは■#FFFFFFです。大文字と小文字の違いでは色は変わりません。短縮できる条件は、6桁の各2文字が同じ文字になっていることです。例えば「FF・88・00」なら「F・8・0」にできます。

一方、グレーの■#475569は「47・55・69」と並ぶため、赤と青の成分を1文字ずつにまとめられません。無理に3桁へ丸めれば別の色になります。すべての6桁コードを短縮するのではなく、3桁にできるものだけ書き換えるのが正しい扱い方です。

CSSでの使い分け：短縮できる色と6桁のまま使う色

WEBサイトのお知らせカードで具体的に考えます。カードの背景は白の■#FFF、見出しは暗いグレーの■#222、境界線はグレーの■#555です。補足テキストには6桁の■#475569を使います。詳細リンクは青の■#06Cに下線を付け、新着ラベルは橙の■#F80を背景に、暗い文字■#222を合わせます。色の役割が分かれば3桁と6桁を混在させても問題ありません。

HTML（ページの内容と構造を記述する言語）とCSS（色や余白などの見た目を指定するルール）の例です。リンク先は説明用の仮の場所です。

<article class="hex-card">
  <span class="hex-card__tag">新着</span>
  <h3>操作ガイドを更新しました</h3>
  <p class="hex-card__detail">変更点をまとめています。</p>
  <a href="/sample/guide/">詳しく見る</a>
</article>

.hex-card {
  padding: 20px;
  background-color: ■#FFF;
  color: ■#222;
  border: 2px solid ■#555;
  border-radius: 8px;
}
.hex-card__detail { color: ■#475569; }
.hex-card__tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: ■#F80;
  color: ■#222;
  border: 2px solid ■#222;
}
.hex-card a {
  color: ■#06C;
  text-decoration: underline;
}
.hex-card a:focus-visible {
  outline: 3px solid ■#06C;
  outline-offset: 3px;
}

文字と背景のコントラスト比（相対的な明るさの差）は、暗い文字■#222と白■#FFFが約15.91:1、補足の■#475569と白が約7.58:1、リンクの■#06Cと白が約5.57:1です。橙のラベル背景■#F80と暗い文字■#222は約6.65:1、カードの境界線■#555と白は約7.46:1です。いずれも指定した組み合わせを計算した値です。リンクには下線も付け、色だけを手掛かりにしないようにします。

短縮できないコードを勝手に変えず、読みやすさも確認する

チームでCSSを書くときは、3桁と6桁のどちらに統一するかを決めても構いません。色を読み取りやすい6桁にそろえる方法も、短縮できる色だけ3桁にする方法も使えます。重要なのは、見た目を変えずに変換できるかを確認し、意図しない別の色を作らないことです。なお、CSSには透明度を含む4桁・8桁のHEXもありますが、ここで説明した3桁・6桁は不透明色の書き方です。

WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）では、通常サイズの文字に原則4.5:1以上のコントラスト比が必要です。今回の文字と背景の組み合わせはこの基準を上回ります。ただし、色の表記を短くしたこと自体が読みやすさを改善するわけではありません。背景を変えた場合や、ボタン・枠線に意味を持たせた場合は、実際に隣接する色で文字と非テキストのコントラストを改めて確認します。

HueRollでは3桁・6桁のHEXを入力して色を調整でき、コピーするコードは6桁HEXです。選択色と白・黒のコントラストを確認できますが、任意の2色同士の比較やWCAG適合の自動判定はできません。表記の長さよりも、色と用途の対応を明確にして仕上がりを確かめましょう。