OKLCH とは何ですか？HEX や HSL の代わりに使う理由は？

OKLCH（明度・彩度・色相）は Oklab モデルを基盤とした知覚的均一色空間です。HEX や HSL とは異なり、OKLCH では同じ数値変化が同じ知覚的差異をもたらします。これにより、アクセシブルなカラーパレットの設計、なめらかなグラデーションの作成、一貫性のある Tailwind v4 カラースケールの生成が容易になります。デザイナーは直感的な数値操作で精密な色彩コントロールが可能になります。

HEX を OKLCH に変換するには？

HEX 値（例：#3b82f6）を HEX 入力フィールドにペーストすると、OKLCH フィールドが即座に相当する oklch(0.6 0.18 250) 記法に更新されます。OKLab、RGB、HSL を含む他の全形式も同時に同期されます。複数の形式を行き来しながら作業する際に非常に便利なツールです。

「sRGB 色域外」とはどういう意味ですか？色はどう処理されますか？

一部の OKLCH カラー——特に高彩度の値——は、ほとんどのディスプレイが使用する sRGB 色空間を超えています。この場合、ツールは CSS Color 4 toGamut アルゴリズムを適用して最も近い表示可能な sRGB カラーを見つけます。元の色域外の値とマッピング結果の両方を示す黄色の警告バナーが表示されるため、色の変化を明確に把握できます。

Tailwind v4 OKLCH パレットジェネレーターはどのように機能しますか？

ジェネレーターは Tailwind v4 の公式輝度スケジュール（50=0.971、100=0.945、950=0.238 まで）を現在の色相と彩度に適用します。明るいものから暗いものまで 11 段階のカラーステップを生成し、@theme { --color-brand-50: oklch(...); } のコードブロック形式でエクスポートします。そのまま CSS に貼り付けるだけでデザインシステムの構築に活用できます。

グラデーションで OKLCH 補間が HSL より優れているのはなぜですか？

HSL は円柱座標系で補間を行いますが、これは人間の知覚とは一致しないため、グラデーションの中間部分で灰色のくぼみや予期しない色相シフトが生じることがあります。OKLCH は知覚的均一な Oklab 空間で補間するため、明度と彩度が意外な色のキャストなくなめらかに推移し、自然で美しいグラデーションを実現します。

この OKLCH コンバーターは無料でプライバシーは守られますか？

はい。このツールは完全無料で、culori ライブラリを使用してブラウザ上で完全にローカル実行されます。カラー値がサーバーにアップロードされることは一切なく、すべての計算はお使いのデバイス上で行われます。プライバシーとデータセキュリティが確実に保護されます。

CSS Color 4 の OKLCH はすべてのブラウザで動作しますか？

OKLCH カラー構文（oklch()）は 2023 年以降、Chrome 111+、Firefox 113+、Safari 15.4+、Edge 111+ を含むすべての主要モダンブラウザでサポートされています。古いブラウザに対応する必要がある場合は、このコンバーターが提供する HEX または RGB のフォールバック値を代替として使用してください。

カラーツール

OKLCH カラーコンバーター – CSS Color 4・Tailwind v4 パレットジェネレーター

OKLCH、OKLab、RGB、HSL、HEX のリアルタイム同期に対応した無料 OKLCH カラーコンバーター。L/C/H/alpha スライダー、CSS Color 4 色域マッピング、Tailwind v4 パレットエクスポート機能を搭載。

OKLCH（明度・彩度・色相）は Oklab モデルを基盤とした知覚的均一色空間で、CSS Color Level 4 に正式採用されています。RGB や HSL とは異なり、OKLCH は色相をまたいで知覚的な明度を一定に保つため、アクセシブルなカラーシステム、Tailwind v4 パレット、なめらかなグラデーションの設計に最適です。

OKLCH カラーコンバーターの使い方

1
カラー値を入力する
サポートされている任意の形式で値を入力またはペーストします：oklch(0.6 0.18 250)、#3b82f6、rgb(59, 130, 246)、hsl(217deg 91% 60%)、oklab(0.6 -0.056 -0.169) に対応しています。入力すると他の全形式が即座に同期されます。
2
L/C/H/Alpha スライダーで微調整する
明度（L）、彩度（C）、色相（H）、Alpha スライダーをドラッグして調整します。彩度スライダーには sRGB 色域の境界マーカーが表示されるため、色が標準表示範囲を超えているかどうかを常に把握できます。
3
色域警告が表示された場合は確認する
OKLCH カラーが sRGB 色域外の場合、元の値と表示に使用される CSS Color 4 toGamut マッピング結果を示す黄色の警告バナーが表示されます。
4
Tailwind v4 パレットを生成する
Tailwind v4 OKLCH パレットセクションでは、Tailwind 公式の輝度スケジュールに基づき、現在の色相に対して 50〜950 のカラーステップが自動生成されます。「コピー」をクリックすると、@theme ブロックをそのまま CSS に貼り付けることができます。

参考資料

W3C CSS Color Level 4 – oklch()
OKLCH カラー記法と色域マッピングアルゴリズムを定義した W3C 仕様書。
Culori – JavaScript カラーライブラリ
このツールの OKLCH 変換、toGamut マッピング、知覚的補間を支えるオープンソースライブラリ。
Evil Martians – CSS における OKLCH：RGB と HSL をやめるべき理由
現代のカラーワークにおける OKLCH の RGB・HSL に対する優位性を詳しく解説した包括的ガイド。
Tailwind CSS v4 – デフォルトパレット
Tailwind 公式カラーパレットドキュメント。このパレットジェネレーターで使用される OKLCH 輝度値を含む。

よくある質問

OKLCH とは何ですか？HEX や HSL の代わりに使う理由は？: OKLCH（明度・彩度・色相）は Oklab モデルを基盤とした知覚的均一色空間です。HEX や HSL とは異なり、OKLCH では同じ数値変化が同じ知覚的差異をもたらします。これにより、アクセシブルなカラーパレットの設計、なめらかなグラデーションの作成、一貫性のある Tailwind v4 カラースケールの生成が容易になります。デザイナーは直感的な数値操作で精密な色彩コントロールが可能になります。
HEX を OKLCH に変換するには？: HEX 値（例：#3b82f6）を HEX 入力フィールドにペーストすると、OKLCH フィールドが即座に相当する oklch(0.6 0.18 250) 記法に更新されます。OKLab、RGB、HSL を含む他の全形式も同時に同期されます。複数の形式を行き来しながら作業する際に非常に便利なツールです。
「sRGB 色域外」とはどういう意味ですか？色はどう処理されますか？: 一部の OKLCH カラー——特に高彩度の値——は、ほとんどのディスプレイが使用する sRGB 色空間を超えています。この場合、ツールは CSS Color 4 toGamut アルゴリズムを適用して最も近い表示可能な sRGB カラーを見つけます。元の色域外の値とマッピング結果の両方を示す黄色の警告バナーが表示されるため、色の変化を明確に把握できます。
Tailwind v4 OKLCH パレットジェネレーターはどのように機能しますか？: ジェネレーターは Tailwind v4 の公式輝度スケジュール（50=0.971、100=0.945、950=0.238 まで）を現在の色相と彩度に適用します。明るいものから暗いものまで 11 段階のカラーステップを生成し、@theme { --color-brand-50: oklch(...); } のコードブロック形式でエクスポートします。そのまま CSS に貼り付けるだけでデザインシステムの構築に活用できます。
グラデーションで OKLCH 補間が HSL より優れているのはなぜですか？: HSL は円柱座標系で補間を行いますが、これは人間の知覚とは一致しないため、グラデーションの中間部分で灰色のくぼみや予期しない色相シフトが生じることがあります。OKLCH は知覚的均一な Oklab 空間で補間するため、明度と彩度が意外な色のキャストなくなめらかに推移し、自然で美しいグラデーションを実現します。
この OKLCH コンバーターは無料でプライバシーは守られますか？: はい。このツールは完全無料で、culori ライブラリを使用してブラウザ上で完全にローカル実行されます。カラー値がサーバーにアップロードされることは一切なく、すべての計算はお使いのデバイス上で行われます。プライバシーとデータセキュリティが確実に保護されます。
CSS Color 4 の OKLCH はすべてのブラウザで動作しますか？: OKLCH カラー構文（oklch()）は 2023 年以降、Chrome 111+、Firefox 113+、Safari 15.4+、Edge 111+ を含むすべての主要モダンブラウザでサポートされています。古いブラウザに対応する必要がある場合は、このコンバーターが提供する HEX または RGB のフォールバック値を代替として使用してください。

OKLCH カラーコンバーターの使い方

参考資料

関連ツール

よくある質問