カラーコード（Color Code）

カラーコード（Color Code）とは、赤・緑・青などの色を、数値や記号の組み合わせで正確に指定するための表記方法のことです。人の感覚に頼らず、誰が指定しても同じ色を再現できる仕組みとして、Webサイトやデザインの現場で広く使われています。

たとえるなら、カラーコードは色の「住所」のようなものです。地図上の座標を指定すれば同じ場所にたどり着けるように、コードを指定すればどんな環境でも狙った色を正確に再現できます。

カラーコードが使われる場面

カラーコードは、Webサイトのデザインやロゴ制作、資料のグラフ配色など、色を正確に伝える必要がある場面で幅広く使われています。口頭で「明るい青」と伝えても人によって思い浮かべる色は微妙に異なりますが、コードを共有すれば、デザイナーとエンジニアの間でも誤解なく同じ色を扱えます。

カラーコードにはいくつかの表記方法があり、代表的なものに「HEX形式」「RGB形式」「HSL形式」があります。それぞれ数値の並べ方や考え方が異なりますが、どれも同じ色を別の切り口で表現しているにすぎません。主な違いをまとめると、次のとおりです。

表記方法	書き方の例	特徴
HEX形式	#FF8800	16進数6桁で色を表す。CSSやデザインツールで最も一般的。
RGB形式	rgb(255, 136, 0)	赤・緑・青の強さを0〜255の数値で表す。
HSL形式	hsl(32, 100%, 50%)	色相・彩度・明度で直感的に指定できる。
カラー名	orange	あらかじめ決められた色名で指定する簡易な方法。

もっとも広く使われているのがHEX形式で、「#」に続けて赤・緑・青それぞれの強さを2桁ずつの16進数で表します。たとえば「#FF8800」であれば、赤が最大、緑が中程度、青がゼロに近いオレンジ色を意味しており、6桁の数字だけで無数の色を区別できる点が特徴です。

通常のカラーコードは色そのものしか表せませんが、透明度を含めたい場合は「RGBA形式」「HEXA形式」を使います。たとえば「rgba(255, 136, 0, 0.5)」のように末尾へ0〜1の数値を加えることで、背景を透かして見せる半透明の色を指定できます。

HEX形式で16進数が採用されているのは、0〜255までの256段階を2桁で簡潔に表せるためです。10進数だと桁数が増えて読みづらくなりますが、16進数なら「00」から「FF」までの2文字に収まり、コードの見た目もすっきりします。

HEX形式は赤・緑・青それぞれを256段階（0〜255）で調整できるため、組み合わせは256の3乗、約1677万通りにのぼります。これは一般に「フルカラー」と呼ばれる範囲で、人の目でほとんど区別できないほど滑らかな色のグラデーションを表現できます。

デザインツールやブラウザの開発者ツールには、色をクリックするだけでカラーコードを自動で表示してくれる「スポイト」機能が備わっています。気になる色を見つけたら、実際に数値を測ってコードとして保存しておくと、後から同じ色を正確に再現できます。

文字と背景のカラーコードを組み合わせる際は、色の明るさの差である「コントラスト比」にも注意が必要です。似た明るさの色同士を組み合わせると、視力の弱い人や高齢者にとって文字が読みにくくなるため、Webサイト制作ではコントラスト比を確認する習慣が重要視されています。

HEXコードは、「#RRGGBB」という形式で、赤（R）・緑（G）・青（B）それぞれの強さを2桁ずつの16進数（00〜FF）で表す仕組みです。たとえば「#FF0000」であれば、赤の成分が最大（FF）で、緑と青の成分がゼロ（00）であることを示しており、純粋な赤になります。

RGB形式は、赤・緑・青それぞれの強さを0から255までの10進数で表す方法で、HEXコードと表している内容は同じです。CSSのコードを書く際には、rgb(255, 0, 0)のようにカンマ区切りの数値で色を指定することもできます。