カラーコードの仕組み — HEXとRGBの違いと使い分け

Webデザインやアプリ開発をしていると、#FF5733 や rgb(255, 87, 51) といった色の表記を頻繁に目にします。これらはすべて同じ色を異なる形式で表したものです。なぜ複数の形式があるのか、それぞれをいつ使うべきかを理解しておくと、デザインと実装の両方がスムーズになります。

RGBとは — 光の三原色で色を表す

コンピュータのディスプレイは、赤（Red）・緑（Green）・青（Blue）の光を混ぜて色を表現します。これが RGB です。それぞれの成分を0〜255の数値で指定し、組み合わせることで約1,678万色を表現できます。

RGBは数値が直感的で、プログラムで色を計算・操作するのに向いています。CSSでは rgb(255, 87, 51) のように記述します。

HEX（16進数）カラーコードは、RGBの各成分を0〜FFの16進数で表し、6桁にまとめた形式です。#RRGGBB の順に並んでいます。

たとえば #FF5733 は R=255（FF）、G=87（57）、B=51（33）を表します。RGBと表現できる色の範囲はまったく同じで、記法が異なるだけです。

HEXはCSSやHTMLで広く使われており、Figma・Sketch・Adobe XDなどのデザインツールでも標準的に使われています。コピー＆ペーストしやすい短い形式のため、コード内での色指定によく使われます。

HSL は色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。RGBやHEXと異なり、人間の色の感覚に近い形で指定できます。

たとえば「同じ色相で明度だけ上げた色バリエーションを作りたい」という場合、RGBでは各値を計算する必要がありますが、HSLなら明度の数値だけを変えるだけです。デザインシステムのカラーパレット設計や、ホバー状態の色変化をCSSで表現するときに特に便利です。