HEXとRGBの違いは？WEB制作ではどちらを使う？

TIPS

WEBサイトの色を指定するとき、HEXとRGBのどちらを使うべきか迷うことがあります。実は、同じ色の成分を指定すれば、どちらも同じ色を表せます。違うのは主に数値の書き方です。大切なのは表記の優劣より、色の指定方法を正しく理解し、チームで扱いやすくすることです。同じ案内カードを2つの形式で書き比べながら選び方を見ていきましょう。

HEXもRGBも赤・緑・青の値を表す。違うのは書き方

HEXは、色を「#」と16進数（0〜9とA〜Fを使う数の表し方）で指定する形式です。一般的な6桁HEXでは、赤・緑・青に2桁ずつ割り当てます。RGBはRed（赤）・Green（緑）・Blue（青）の頭文字で、CSSのrgb()では3成分を通常0〜255の数値で指定します。どちらもWEBの一般的な色指定では同じ赤・緑・青の組み合わせを表現できます。

例えば青 #1D4ED8とrgb(29 78 216)は同じ色です。HEXの「1D」は十進数の29、「4E」は78、「D8」は216です。同様に白 #FFFFFFとrgb(255 255 255)、黒 #000000とrgb(0 0 0)もそれぞれ同じ色になります。形式を変えただけでは、色の濃さや読みやすさが改善するわけではありません。

CSS（WEBページの色や配置などの見た目を指定するルール）では、HEXとrgb()をどちらもcolorやbackground-colorに使えます。RGB形式にはパーセントや透明度の指定方法もありますが、HEXにも透明度を表せる8桁形式があります。透明度が必要だから必ずRGBにする、という決まりはありません。

同じ案内カードをHEXとRGBで書き比べる

架空の講座案内カードを例にします。外側は薄い青灰色 #F8FAFC、カードは白 #FFFFFF、見出しと本文は濃い青灰色 #1F2937にします。日時などの補足にはグレー #475569、カードの枠線には別のグレー #64748B、詳細リンクには青 #1D4ED8を選びます。リンクには下線を付け、色だけで操作場所を判断させないようにします。

まずHTML（WEBページの内容と構造を記述する言語）を共通にします。リンク先は説明用の仮のURLです。

<section class="color-format-area">
  <article class="color-format-card">
    <h3>週末のWEB講座</h3>
    <p class="color-format-card__meta">開催日時と参加方法をご案内します。</p>
    <a href="/sample/course/">講座の詳細を見る</a>
  </article>
</section>

HEXで書く場合は、色のコードをそのままCSSへ入力します。

.color-format-area {
  padding: 24px;
  background-color: ■#F8FAFC;
}
.color-format-card {
  padding: 20px;
  background-color: ■#FFFFFF;
  color: ■#1F2937;
  border: 2px solid ■#64748B;
  border-radius: 10px;
}
.color-format-card__meta { color: ■#475569; }
.color-format-card a {
  color: ■#1D4ED8;
  text-decoration: underline;
}
.color-format-card a:focus-visible {
  outline: 3px solid ■#1D4ED8;
  outline-offset: 3px;
}

RGBで書く場合は同じ成分を十進数で指定します。次のCSSは上のHEX版と同じ表示になる代替コードなので、両方を重ねて貼り付ける必要はありません。

.color-format-area {
  padding: 24px;
  background-color: rgb(248 250 252);
}
.color-format-card {
  padding: 20px;
  background-color: rgb(255 255 255);
  color: rgb(31 41 55);
  border: 2px solid rgb(100 116 139);
  border-radius: 10px;
}
.color-format-card__meta { color: rgb(71 85 105); }
.color-format-card a {
  color: rgb(29 78 216);
  text-decoration: underline;
}
.color-format-card a:focus-visible {
  outline: 3px solid rgb(29 78 216);
  outline-offset: 3px;
}

コントラスト比（2色の相対的な明るさの差）は、白いカードと本文の濃い文字が約14.68:1、補足のグレーが約7.58:1、青いリンクが約6.70:1です。枠線はカードの白と約4.76:1、外側の淡い背景と約4.55:1になります。いずれもHEXで書いてもRGBで書いても変わりません。

迷ったら既存の管理方法に合わせ、透明度と隣接色を確認する

ブランドの指定色やデザイン資料がHEX中心なら、HEXのまま使うと共有しやすくなります。一方、赤・緑・青の数値を確認しながら調整するならrgb()が分かりやすい場合があります。CSSでは両者を混在させても構いませんが、共同作業では書き方や色の命名を統一すると管理しやすくなります。

例えばrgb(29 78 216 / 20%)と書けば、青の不透明度を20%にできます。8桁HEXでも透明度を表せます。ただし半透明の色は背後の色と合成されるため、文字や重要な枠に使う場合は完成画面での実際の組み合わせを確認してください。表記形式だけでコントラスト比やアクセシビリティが決まることはありません。

WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）では、通常サイズの文字に原則4.5:1以上、操作部品の識別に必要な非テキスト表示には隣接色と原則3:1以上のコントラストが求められます。色だけでリンクを示さず、下線やキーボード操作時の枠線も残しましょう。

HueRollでは3桁・6桁のHEXを入力して色を調整でき、RGBの値も確認できます。ただしRGB形式の直接入力には対応せず、コントラスト確認は選択した色と白・黒の組み合わせに限られます。任意の2色やWCAG適合の自動判定もできないため、完成したWEBページの配色は別途確かめてください。