HEXカラーとは？WEBで使う色コードを初心者向けに解説

TIPS

WEBサイトの色を指定するとき、先頭に「#」が付いた英数字の並びを見かけます。これがHEXカラーと呼ばれる色の表し方です。初めて見ると暗号のようですが、仕組みが分かれば背景色や文字色を自分で指定できます。まず6桁の読み方を知り、WEBページで使う方法と注意点を確認しましょう。

HEXカラーは赤・緑・青を16進数で表すコード

HEXはhexadecimal（16進数）の略です。16進数は0～9とA～Fの16種類の文字で数を表す方法です。WEBでよく使う6桁HEXは、最初の「#」の後ろに、赤（R）・緑（G）・青（B）の強さを2桁ずつ並べたものです。RGBとは、この3成分を組み合わせて画面の色を表す仕組みを指します。

例えば青 #1D4ED8 は、最初の「1D」が赤29、中央の「4E」が緑78、最後の「D8」が青216を意味します。16進数の「00」は0、「FF」は255に当たります。赤・緑・青がすべて255の白 #FFFFFF と、すべて0の黒 #000000 も、この組み合わせで読み取れます。

HEXカラーは色の名前ではなく、赤・緑・青の数値をまとめたものです。同じ青 #1D4ED8 は、CSSでは rgb(29 78 216) と書いても同じ色です。英字の大文字と小文字による色の違いもありません。

CSSで使う例：背景・文字・リンクを指定する

CSS（WEBページの色や配置などの見た目を指定するルール）では、background-colorが背景色、colorが文字色です。例えばお知らせカードの外側を薄い青灰色 #F8FAFC、カードの中を白 #FFFFFF、見出しと本文を濃い青灰色 #1F2937 にします。カードの境界にはグレー #64748B、リンクには青 #1D4ED8、キーボードでリンクを選んだときの枠線には濃紺 #0F172A を使います。色ごとに役割を決めておくと、修正箇所を探しやすくなります。

次はHTML（ページの内容と構造を記述する言語）とCSSの例です。リンク先は説明用の仮のURLです。

<section class="notice-page">
  <article class="notice-card">
    <h3>イベントのお知らせ</h3>
    <p>開催日時と参加方法をご案内します。</p>
    <a href="/sample/notice/">詳細を見る</a>
  </article>
</section>

.notice-page {
  padding: 24px;
  background-color: ■#F8FAFC;
}
.notice-card {
  padding: 24px;
  border: 1px solid ■#64748B;
  border-radius: 10px;
  background-color: ■#FFFFFF;
  color: ■#1F2937;
}
.notice-card h3 { margin-top: 0; }
.notice-card a {
  color: ■#1D4ED8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notice-card a:focus-visible {
  outline: 3px solid ■#0F172A;
  outline-offset: 3px;
}

色付き■は見本であり、CSSに入力するのは後ろのHEXコードだけです。リンクは青い文字だけで区別させず、下線も常に表示しています。

白いカードと本文色のコントラスト比（2色の相対的な明るさの差）は約14.68:1、リンクの青と白は約6.70:1です。グレーの枠線と白いカードは約4.76:1、外側の薄い背景とは約4.55:1です。選択中の濃紺の枠と白の比率は約17.85:1です。色コードが正しくても、文字や境界の見やすさは隣接する色との組み合わせで変わります。

3桁の短縮形や実際の見やすさに注意する

CSSには6桁を短くした3桁HEXもあります。例えば橙 #F80 は、6桁の #FF8800 と同じ色です。各成分の1文字を2回繰り返す仕組みなので、どんな6桁コードも3桁に短縮できるわけではありません。CSSでは透明度を含む4桁・8桁の形式も扱えますが、初めは不透明な6桁の指定に慣れると理解しやすいでしょう。

文字の読みやすさの基準として、WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）は、通常サイズの文字に原則4.5:1以上のコントラスト比を求めます。今回の本文とリンクの例はこの値を上回りますが、背景を変えたら再計算してください。操作を見分けるのに必要な枠線やアイコンには、隣接色との非テキストコントラストも確認します。

HueRollでは3桁または6桁のHEXを入力し、色を調整したり6桁のコードをコピーしたりできます。選択した色と白・黒とのコントラストは確認できますが、任意の2色の比較やWCAG適合の自動判定はできません。色を決めた後は、完成画面で文字・背景・枠線の組み合わせを別途確認しましょう。