CSSカラーコード完全ガイド：HEX・RGB・HSLの違いと使い分け

CSSには同じ色を表現する方法が複数存在します。たとえば鮮やかな青色は#3b82f6（HEX）、rgb(59, 130, 246)（RGB）、hsl(217, 91%, 60%)（HSL）のいずれでも記述できます。 これだけ多くの形式が存在するのは、歴史的な経緯とそれぞれの利用目的が異なるためです。

HEXはWebが普及した初期から使われており、デザインツールとの親和性が高い形式です。 RGBはモニターが光の三原色（赤・緑・青）を組み合わせて色を表示する仕組みをそのまま反映しており、 プログラムで色を計算するときに扱いやすい形式です。 HSLは人間の色認識（色相・彩度・明度）に近い考え方で、 デザイナーが直感的に色を調整しやすいという特徴があります。

デザインツール（Figma、Adobe XDなど）からコピーした値と、 コードベースやUIライブラリが期待する形式が一致しないことは日常的に起きます。 各形式の特性を理解しておくと、変換作業を素早く行い、適切な形式を選べるようになります。 このサイトの Color Converter を使うと、 HEX・RGB・RGBA・HSLを即座に相互変換できます。

HEXは #RRGGBB の形式で、R（赤）・G（緑）・B（青）それぞれを 00〜FFの16進数2桁で表します。#ff0000 は純粋な赤、#000000 は黒、#ffffff は白です。

3桁の省略形：RR・GG・BBのそれぞれ2桁が同じ文字の繰り返しの場合、#aabbcc → #abc のように3桁に省略できます。#ffffff → #fff、#000000 → #000 が代表例です。

8桁形式（透明度付き）：#RRGGBBAA のように末尾2桁でアルファ値を指定できます。#3b82f6cc のCC（10進数で204）はおよそ80%の不透明度を意味します。 ただし8桁HEXは比較的新しい仕様で、古いブラウザでは非対応のため、 透明度が必要な場合はRGBAを使う方が安全です。

HEXはデザイナーとエンジニアが共通言語として最もよく使う形式です。 デザインツール、スタイルガイド、カラーパレット定義など、 色を「値として管理する」場面に向いています。

rgb(R, G, B) はRGB各チャンネルを0〜255の整数で指定します。rgb(255, 0, 0) は赤、rgb(0, 0, 0) は黒、rgb(255, 255, 255) は白です。 CSS Color Level 4以降は rgb(59 130 246) のようにカンマなしの記法も使えます。

rgba(R, G, B, A) の第4引数はアルファ値で、0（完全透明）〜1（完全不透明）の小数で指定します。rgba(0, 0, 0, 0.5) は半透明の黒です。 背景のオーバーレイ、ホバー時の色変化、シャドウの色付けなど、 透明度を絡めたデザインで頻繁に使います。

RGBはプログラムで色を計算・操作するときに扱いやすい形式です。 例えばモノクロ変換の相対輝度は (0.299 × R + 0.587 × G + 0.114 × B) / 255という式で計算でき、テキスト色を背景色に応じて白か黒かを自動判定するロジックにも応用できます。 アニメーションで色を動的に補間（lerp）する場合も、RGBチャンネルを個別に扱う方が計算がシンプルです。

HSLは Hue（色相）・Saturation（彩度）・Lightness（明度）の頭文字です。hsl(H, S%, L%) の形式で、Hは0〜360の角度（色相環の位置）、 S・Lは0〜100%のパーセントで指定します。hsl(0, 100%, 50%) は純粋な赤、hsl(120, 100%, 50%) は純粋な緑です。

HSLの最大の利点は人間が直感的に色を調整しやすいことです。 例えばある青色の色相を変えずに、明るいバリアントと暗いバリアントを作りたい場合、hsl(217, 91%, 80%)（明るい青）と hsl(217, 91%, 40%)（暗い青）のように Lの値だけを変えればよく、HとSを固定したままバリエーションを作れます。 デザインシステムのカラートークン設計に特に向いています。

shadcn/uiやTailwind CSSのデフォルト設定はHSL（あるいはCSS変数としてのHSL）を採用しています。 例えばshadcn/uiの --primary 変数は222.2 47.4% 11.2%（スペース区切りのHSL）として定義されており、 テーマカスタマイズ時にこの値を変更することでアプリ全体の色を一括で変えられます。

HSLの注意点：HSLは知覚的に均一ではありません。 同じ明度値でも、黄色（hsl(60, 100%, 50%)）は緑（hsl(120, 100%, 50%)）より 人間の目には明るく見えます。 アクセシビリティのコントラスト比を正確に確認したい場合は後述のoklchが適しています。

CSS Color Level 4では、より広い色域と知覚的均一性を持つ新しい色形式が追加されました。 主要ブラウザでのサポートも整ってきており、モダンなプロジェクトでの採用が増えています。

oklch（Oklch、Oklab Lightness-Chroma-Hue）は、 人間の視覚に基づいて設計された色空間です。 明度（L）・彩度（C）・色相（H）で色を表現し、 明度を変えても知覚的なコントラストが均一に変化するという特性があります。 Tailwind CSS v3.3以降ではカラーパレットをHSLからoklchベースに移行しており、 このサイト（HB DevTools）のグローバルCSSもoklchで色変数を定義しています。

color-mix()関数はCSS単体で2色を混合できる機能です。color-mix(in oklch, blue 30%, white) のように書くことで、 JavaScriptなしでホバー色やアクティブ色のバリエーションを生成できます。 デザイントークンを変数で管理しているプロジェクトで特に有用です。

各形式の特徴を踏まえた、実務での使い分け方針を整理します。

• HEX： デザイナーとの色の受け渡し、ブランドカラーの定義、 透明度が不要な静的な色指定に使います。 読みやすく、デザインツールとの互換性が最も高い形式です。
• RGB / RGBA： 透明度を使う場合（オーバーレイ・シャドウ）、 JavaScriptで色を計算・操作する場合に使います。 Canvas APIやWebGLとの相性も良い形式です。
• HSL / HSLA： デザインシステムのカラートークンを定義する場合、 色のバリエーション（明暗・薄濃）を体系的に管理したい場合に使います。 shadcn/uiやTailwind CSSとの統合にも向いています。
• oklch： アクセシビリティを重視したコントラスト設計、 広色域ディスプレイ向けの鮮やかな色表現が必要な場合に使います。 新規プロジェクトで採用する場合は、Tailwind CSS v4やshadcn/uiの最新版と組み合わせると自然です。

• CSS変数で形式を統一する： プロジェクト全体の色を :root のCSS変数として定義し、 各コンポーネントでは変数名（var(--primary)）を使う設計にすると、 形式の違いを気にせずに済み、テーマ変更も一箇所で対応できます。
• コントラスト比の確認： WCAG 2.1の基準では、通常テキストのコントラスト比は4.5:1以上（AA）、 大きなテキストは3:1以上が求められます。 Chrome DevToolsのアクセシビリティパネルや、 WebAIM Contrast Checkerで確認する習慣をつけましょう。
• 色形式の変換： FigmaからコピーしたHEXをshadcn/uiのHSL変数として設定したい場合など、 形式間の変換は手計算では複雑です。Color Converter を使うと HEX・RGB・RGBA・HSLを一度に全形式へ変換でき、コピーボタンですぐに使えます。