カラーモデルの基礎知識
Webデザインやフロントエンド開発では、色を正確に指定することが不可欠です。色の表現方法にはいくつかのモデルがあり、それぞれに特徴と適した用途があります。このページでは、Web制作で頻繁に使用されるHEX・RGB・HSLの3つのカラーモデルについて解説し、効果的な使い分け方をご紹介します。
HEX（16進数カラーコード）とは
HEXカラーコードは、色を16進数で表現する方式です。「#」記号に続けて6桁の16進数（0〜9、A〜F）を記述します。先頭2桁が赤（R）、中央2桁が緑（G）、末尾2桁が青（B）を表し、それぞれ00〜FFの範囲で明るさを指定します。たとえば「#FF0000」は純粋な赤、「#000000」は黒、「#FFFFFF」は白です。CSSでの色指定として最も広く普及しており、デザインツールやブランドガイドラインでも標準的に使用されています。短縮記法として、各2桁が同じ文字の場合は「#RGB」形式（例：#FFF）で記述することも可能です。
RGB（光の三原色）とは
RGBは、Red（赤）・Green（緑）・Blue（青）の光の三原色を混合して色を表現するモデルです。各チャンネルは0〜255の整数値で指定し、すべてが0なら黒、すべてが255なら白になります。CSSでは「rgb(255, 128, 0)」のように記述します。ディスプレイやモニターはRGB方式で色を再現しているため、画面上の色を直接的にコントロールしたい場合に適しています。透明度を含む場合は「rgba(255, 128, 0, 0.5)」のようにアルファ値を追加します。プログラミングで色を動的に計算・変換する際にも、RGBは基本的なデータ形式として頻繁に使われます。
HSL（色相・彩度・明度）とは
HSLは、Hue（色相）・Saturation（彩度）・Lightness（明度）の3要素で色を表現するモデルです。色相は0〜360度の角度で色の種類を指定し、0度が赤、120度が緑、240度が青です。彩度は0〜100%で色の鮮やかさ、明度は0〜100%で明るさを表します。CSSでは「hsl(30, 100%, 50%)」のように記述します。HSLの最大の利点は、人間の直感に近い方法で色を操作できることです。たとえば「もう少し明るくしたい」ときはLの値を上げるだけ、「色を淡くしたい」ときはSの値を下げるだけで済みます。配色の調整やバリエーション作成に非常に便利なモデルです。
用途に応じた使い分け
HEXは記述が短く広く普及しているため、静的なCSSでの色指定に最適です。RGBはJavaScriptなどプログラムで色を扱う場合や、透明度を設定する際に便利です。HSLは配色の調整やホバー状態の色変化など、色のバリエーションを体系的に管理したい場面で力を発揮します。現代のCSS仕様ではどの形式も同等にサポートされているため、状況に応じて使い分けることが推奨されます。
CSSでの色の指定方法
CSSでは、color（文字色）やbackground-color（背景色）、border-color（枠線色）などのプロパティで色を指定します。HEX・RGB・HSLのいずれの形式でも指定可能なほか、CSS4で導入されたhwb()やlch()、oklch()などの新しいカラー関数も利用できます。また、「red」「blue」「tomato」などの名前付きカラーも147色が定義されており、プロトタイプ作成時などに手軽に使えます。CSSカスタムプロパティ（CSS変数）と組み合わせて、テーマカラーを一元管理する手法も広く採用されています。
色のアクセシビリティとコントラスト比
Web制作において、色のアクセシビリティは非常に重要なテーマです。WCAG（Web Content Accessibility Guidelines）2.1では、テキストと背景のコントラスト比について明確な基準が定められています。通常のテキストではコントラスト比4.5:1以上（AA基準）、大きなテキストでは3:1以上が求められます。より厳格なAAA基準では、通常テキストで7:1以上が必要です。色覚多様性を持つユーザーは日本人男性の約5%に該当するとされ、色だけに依存しない情報伝達（アイコンや下線の併用など）を心がけることが大切です。コントラスト比の確認には専用のチェックツールを活用しましょう。
Webセーフカラーの歴史
1990年代のインターネット黎明期には、多くのパソコンが256色しか表示できませんでした。異なるOS間で色の見え方を統一するため、216色の「Webセーフカラー」が定義されました。RGBの各チャンネルが00・33・66・99・CC・FFの6段階のみに限定された色の組み合わせです。現代のディスプレイはフルカラー（約1677万色）に対応しているため、Webセーフカラーの制約は実質的に不要になりましたが、Web技術の歴史的背景として知っておくと理解が深まります。