カラー形式変換ガイド：HEX、RGB、HSL、OKLCH 完全網羅
カラー形式の概要
Web 開発でよく使われるカラー形式：
| 形式 | 例 | 特徴 |
|---|---|---|
| HEX | #FF6B35 |
最も一般的、コンパクト |
| RGB | rgb(255, 107, 53) |
直感的、チャンネル値 0-255 |
| HSL | hsl(16, 100%, 60%) |
色相/彩度/明度、調色が直感的 |
| OKLCH | oklch(0.68 0.17 37) |
知覚均一、モダン CSS 推奨 |
異なる形式は同じ色を表現しており、座標系が異なるだけです。
HEX 形式の詳細
HEX は 16 進数で RGB 3 チャンネルを表現します：
#FF6B35
↑ ↑ ↑
R G B → 各チャンネル 00-FF（0-255）
- 3 桁省略形：
#F63は#FF6633と同等 - 4 桁省略形（アルファ付き）：
#F63Aは#FF6633AAと同等 - 8 桁完全形（アルファ付き）：
#FF6B3580（80 = 50% 透明度）
RGB とアルファチャンネル
RGB はディスプレイの三原色に直接対応します：
rgb(255, 107, 53) /* 不透明 */
rgba(255, 107, 53, 0.5) /* 50% 透明 */
rgb(255 107 53 / 50%) /* モダン構文 */
アルファチャンネル：1 = 完全に不透明、0 = 完全に透明。モダン CSS では
rgb()+ スペース区切り +/で透明度を表すことが推奨されます。
HSL：直感的な調色
HSL は色を色相・彩度・明度に分解します：
| パラメータ | 範囲 | 意味 |
|---|---|---|
| H（色相） | 0-360° | カラーホール角度：0=赤, 120=緑, 240=青 |
| S（彩度） | 0-100% | 0%=グレー, 100%=純色 |
| L（明度） | 0-100% | 0%=黒, 50%=純色, 100%=白 |
調色のコツ：
- 同系色の濃淡が欲しい？H と S を固定して L を調整
- 柔らかい色調が欲しい？S を下げる
- 補色が欲しい？H ± 180°
OKLCH：知覚均一な新標準
OKLCH は CSS Color Level 4 で導入された色空間で、人間の知覚に基づいてモデル化されています：
| 利点 | 説明 |
|---|---|
| 知覚均一 | 明度 0.5→0.6 の変化が 0.7→0.8 と同じように見える |
| より広い色域 | P3 などの広色域ディスプレイに対応 |
| 予測可能な調色 | L を固定して C/H を変えても、視覚的な明るさは変わらない |
oklch(0.68 0.17 37)
↑ ↑ ↑
L C H → 明度/彩度/色相
HSL の L=50% は色相によって視覚的な明るさが大きく異なります。OKLCH はこの問題を修正します。
カラー変換ツールの使い方
ステップ1：ツールを開く
カラー変換ツール にアクセスし、任意の形式で色を入力します。
ステップ2：入力形式を選択
入力欄に色を入力。対応形式：
- HEX：
#FF6B35 - RGB：
255, 107, 53 - HSL：
16, 100%, 60% - OKLCH：
0.68, 0.17, 37
ステップ3：変換結果を確認
ツールが全形式の変換結果を自動表示。そのままコピーして使用できます。
ステップ4：アルファチャンネルの調整
「透明度を含む」にチェックを入れ、アルファ値（0-1）を入力。結果にアルファチャンネルが付加されます。
CSS color-mix() の実践
OKLCH と color-mix() を組み合わせると、正確な色の混合が可能です：
/* OKLCH 空間で混合 — 知覚均一 */
.button {
background: color-mix(in oklch, #FF6B35, #3B82F6);
}
/* 30% のアクセントカラーを混合 */
.card {
border-color: color-mix(in oklch, #FF6B35 30%, white);
}
コントラストチェッカー で、混合後の色とテキストのコントラストが基準を満たすか確認しましょう。
グラデーションでのカラー形式
グラデーションジェネレーター を使う際、OKLCH 形式が推奨されます：
/* OKLCH グラデーションは遷移がより均一 */
background: linear-gradient(
in oklch,
oklch(0.7 0.15 30),
oklch(0.7 0.15 250)
);
従来の RGB/HSL グラデーションはカラーホール中間にくすんだ領域が生じますが、OKLCH はこれを回避できます。
よくある問題
| 問題 | 原因 | 解決策 |
|---|---|---|
| HEX→RGB の結果がおかしい | 省略形を展開していない | 先に 6 桁 HEX に展開 |
| HSL→HEX で色がずれる | 浮動小数点精度の損失 | ツールで正確に変換 |
| OKLCH がブラウザで対応しない | 古いブラウザ | CSS フォールバックまたは PostCSS プラグインを使用 |
| アルファ値の表示が異常 | パーセントと小数の混用 | 0-1 の小数または 0%-100% で統一 |
まとめ
HEX、RGB、HSL、OKLCH の 4 形式の原理と変換をマスターすることは、フロントエンド開発とデザインの基礎スキルです。OKLCH の知覚均一性はモダン CSS の第一選択となります。カラー変換ツール で全形式の相互変換をワンクリックで完了し、コントラストチェッカー と グラデーションジェネレーター で完全なカラーワークフローを構築できます。