開発者公開日 2026年3月18日

開発者のためのカラーコンバーター：HEX、RGB、HSL完全解説

HEX、RGB、HSLカラーフォーマットの使い分けを理解しましょう。CSSカラーシステム、アクセシビリティ基準、ダークモードのヒント、デザイナーと開発者の協業まで実践ガイド。

知っておくべき3つのカラーシステム

開発者として、CSSやデザインツールで3つの主要なカラーフォーマットに出会います。それぞれ異なる状況で最適な選択となる強みがあります。

HEX (#RRGGBB)

HEXカラーは赤、緑、青のチャンネルを00からFFまでの16進数で表現します。例えば、#FF6B35は最大の赤(FF)、中程度の緑(6B)、低い青(35)を意味し、暖かいオレンジ色を作ります。

HEXを使うとき：

デザインファイル（Figma、Sketch、Adobe XD）からカラーをコピーするとき
CSS変数にブランドカラーを設定するとき
コンパクトなカラー表現が必要なとき
デザインハンドオフで最も一般的なフォーマット

HEX省略形： 各チャンネルの2桁が同じ場合、コードを短縮できます。#FF6633は#F63になります。各ペアの2桁が同一の場合のみ使えます。

RGB / RGBA

RGBは各チャンネルに0から255の10進数値を使います。RGBAは0から1のアルファ（不透明度）チャンネルを追加します。

color: rgb(255, 107, 53);
background-color: rgba(255, 107, 53, 0.8);

RGB/RGBAを使うとき：

透明度が必要なとき（RGBAのA）
プログラムで色を計算するとき（補間、ブレンド）
JavaScriptのCanvasや画像操作を行うとき
デザイントークンから個別のR、G、B値が来るとき

HSL / HSLA

HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）の略です。最も人間に優しいカラーモデルです：

色相： カラーホイール上の位置（0-360度）。0 = 赤、120 = 緑、240 = 青。
彩度： 色の鮮やかさ（0% = グレー、100% = フルカラー）。
明度： 明るさまたは暗さ（0% = 黒、50% = 通常、100% = 白）。

color: hsl(18, 100%, 60%);
background-color: hsla(18, 100%, 60%, 0.8);

HSLを使うとき：

カラーパレットとバリエーションの作成
色の調整（暗くする、明るくする、彩度を下げる）
一貫した色相ファミリーでテーマシステムを構築
ダークモードのカラー適応

HSLでカラーパレットを構築

HSLはカラー操作を直感的にします。ベースカラーから始めて、一度に1つの値を調整するだけで全体のパレットを作れます：

同じ色相、異なる明度：

--color-primary-100: hsl(220, 90%, 95%);  /* 非常に明るい */
--color-primary-300: hsl(220, 90%, 75%);  /* 明るい */
--color-primary-500: hsl(220, 90%, 50%);  /* ベース */
--color-primary-700: hsl(220, 90%, 30%);  /* 暗い */
--color-primary-900: hsl(220, 90%, 15%);  /* 非常に暗い */

明度の値だけが変わります。色相と彩度は一貫しており、調和のとれたパレットが保証されます。

アクセシビリティ：WCAGカラーコントラスト基準

色は美的要素だけではありません。コントラスト不足は視覚障害のあるユーザーにテキストを読めなくさせ、明るい日光や低品質のスクリーンでも可読性に影響します。

WCAG 2.1コントラスト要件

| レベル | 通常テキスト | 大きいテキスト | |--------|------------|--------------| | AA（最小） | 4.5:1 | 3:1 | | AAA（強化） | 7:1 | 4.5:1 |

大きいテキストは18pt（24px）の通常体または14pt（18.66px）の太字と定義されます。

実践的なコントラストのヒント

色だけに頼らない。 アイコン、パターン、ラベルを色とともに使って意味を伝えましょう（色覚障害のユーザーに重要）。
実際のコンテンツでテスト。 コントラスト比が技術的に合格でも、長い段落では読みにくく感じることがあります。
白地に薄いグレーが最も一般的な違反。 プレースホルダーテキスト、無効状態、補助テキストはコントラスト要件を満たさないことが多いです。
両方のテーマを確認。 ライトモードで合格する色がダークモードでは不合格になることがあり、逆もまた然りです。

デザイナーと開発者のカラーハンドオフ

色に関するミスコミュニケーションはデザイナーと開発者間の一般的な摩擦の原因です。実践的な解決策を見てみましょう：

デザイントークンの使用

生のカラー値を渡す代わりに、共有トークンシステムを構築しましょう：

/* これはやめましょう */
color: #2563EB;

/* こうしましょう */
color: var(--color-primary);

トークンは単一の情報源を作ります。デザイナーがブランドカラーを変更するとき、更新が必要な変数は1つだけです。

すべての状態を指定

すべてのUI要素について、以下の色を明確にしましょう：

デフォルト状態
ホバー状態
アクティブ/押下状態
無効状態
フォーカスアウトライン
ダークモードバリアント

フォーマットの合意

早い段階でフォーマットに合意しましょう。デザインシステムが内部的にHSLを使っているなら、開発者もHSLで値を保存すべきです。カラーコンバーターはフォーマットが異なるときのギャップを埋めてくれます。

ダークモードのカラー戦略

ダークモードは単に色を反転させることではありません。重要な原則を見てみましょう：

彩度を下げる。 高彩度の色は暗い背景で圧迫感があります。ダークモードでは彩度を10-20%下げましょう。
純粋な黒ではなく、浮き上がった面を使う。 純粋な黒（#000000）は過度なコントラストを生みます。背景には#1a1a2eや#121212のような暗いグレーを使いましょう。
明度スケールを反転。 HSLで最も明るいシェードが最も暗くなり、逆もまた然り。
実際の目でテスト。 ライトモードで問題ない色の組み合わせが、ダークモードでは目を疲れさせることがあります。

今すぐカラーを変換

カラーコンバーターを使って、HEX、RGB、HSLなどを相互変換しましょう。以下もぜひご覧ください：

CSSグラデーション生成器 ライブプレビューで滑らかなカラートランジションを作成
CSSボックスシャドウ生成器 適切な色のシャドウで奥行きを追加