OKLCH変換・アクセシブルパレット生成
OKLCH・HEX・RGB・HSL間のカラー変換をリアルタイムで行い、OKLCHの色相を保ったままWCAGコントラスト比を満たす色を自動提案できる無料のオンラインツールです。CSS Color Level 4で正式採用されたOKLCH色空間は知覚的に均一なため、HSLよりも直感的に色を調整できます。WCAG AA/AAAのコントラスト適合判定と改善色の自動提案機能により、ブランドカラーの色相を保ちながらアクセシブルなデザインを実現できます。デザインシステムのカラートークン設計に最適です。
最終更新:
使い方
使い方を開く使い方を閉じる
- 1
カラーコードを入力
入力欄にHEX、RGB、HSL、OKLCHのいずれかの形式でカラーコードを入力するか、カラーピッカーで色を選択します。
- 2
変換結果を確認
入力した色がリアルタイムでHEX、RGB、HSL、OKLCH（CSS関数形式含む）に変換されます。各形式のコピーボタンで値を取得できます。
- 3
アクセシブルパレットを生成
背景色を指定すると、WCAGコントラスト比の適合判定と、OKLCHの色相を保ったまま適合する色の提案が表示されます。
カラー入力
HEX (#FF5733)、RGB (rgb(255,87,51))、HSL (hsl(9,100%,60%))、OKLCH (oklch(62.8% 0.258 29.2)) に対応
プレビュー
変換結果
HEX
#3B82F6CSS OKLCH
oklch(62.3% 0.188 259.8)CSS RGB
rgb(59, 130, 246)CSS HSL
hsl(217, 91%, 60%)OKLCH
L: 62.3%, C: 0.188, H: 259.8°RGB
R: 59, G: 130, B: 246HSL
H: 217°, S: 91%, L: 60%※ HSL値は整数丸めのため、往復変換で±1〜2程度ズレる場合があります
アクセシブルパレット生成
コントラスト比: 3.68:1,通常テキスト AA (4.5:1): 不適合,通常テキスト AAA (7:1): 不適合
コントラスト比: 3.68:1
| テキストサイズ | AA (4.5:1) | AAA (7:1) |
|---|---|---|
| 通常テキスト | 不適合 | 不適合 |
| 大きいテキスト | 適合 | 不適合 |
色相を保った改善提案
AA適合色（4.5:1以上）
#2C72E5 / oklch(57.4% 0.188 259.8)
コントラスト比: 4.52:1
AAA適合色（7:1以上）
#0452C2 / oklch(47.3% 0.188 259.8)
コントラスト比: 7.02:1
OKLCH変換ツールとは
OKLCH変換ツールは、CSS Color Level 4で導入されたOKLCH色空間に対応したカラー変換・パレット生成ツールです。OKLCHは知覚的に均一な色空間であり、明度（L）・彩度（C）・色相（H）を直感的に制御できます。従来のHSLベースの色調整と異なり、色相を変えずに明度だけを調整してWCAGコントラスト比を満たすことができるため、ブランドカラーの色相を保ちながらアクセシブルな配色を設計できます。HEX・RGB・HSL・OKLCHの4形式間のリアルタイム変換に対応しており、CSS oklch()関数形式での出力もサポートしています。アクセシブルパレット生成機能では、背景色に対してWCAG AA（4.5:1）およびAAA（7:1）コントラスト比を満たす前景色を、OKLCHの色相を保ったまま自動で提案します。Webフロントエンド開発者やUIデザイナーのカラー設計ワークフローを大幅に効率化します。
主な機能
- HEX、RGB、HSL、OKLCH間のリアルタイム変換
- CSS oklch() 関数形式の出力対応
- カラーピッカーによる視覚的な色選択
- WCAG AA/AAA コントラスト比チェック
- OKLCHの色相を保った改善色の自動提案
- ランダムカラー生成機能
こんな場面で役立ちます
- ブランドカラーの色相を保ちながらアクセシブルな配色を設計したいとき
- CSS Color Level 4 のOKLCH値を確認・変換したいとき
- デザインシステムのカラートークンを定義するとき
- WCAG適合のテキスト色を素早く見つけたいとき
- OKLCHの知覚的な均一性を活かしたパレット設計
よくある質問
OKLCHとは何ですか？
OKLCHはCSS Color Level 4で導入された色空間で、Oklab色空間の円柱座標表現です。L（明度）、C（彩度）、H（色相）の3つのパラメータで色を表現し、知覚的に均一であるためHSLよりも直感的に色を調整できます。
HSLとOKLCHの違いは何ですか？
HSLは数学的に単純ですが知覚的に不均一です。例えば、HSLで明度を50%にしても色相によって明るさが大きく異なります。OKLCHは知覚的に均一なため、同じL値を持つ色は実際に同じ明るさに見えます。
色相を保ったまま提案する利点は何ですか？
従来のHSLベースの調整では、明度を変えると彩度や色の印象も変わりがちです。OKLCHのL（明度）のみを調整することで、ブランドカラーの色相と彩度を可能な限り維持しながら、WCAGコントラスト基準を満たす色を見つけることができます。
sRGB色域外の色はどうなりますか？
OKLCHではsRGB色域外の色も表現できますが、画面表示のためにsRGBにクランプ（最も近い表現可能な色に変換）されます。提案色もsRGB色域内に収まるよう調整されます。
ブラウザのCSS oklch() サポート状況は？
主要なモダンブラウザ（Chrome 111+、Firefox 113+、Safari 15.4+）でCSS oklch() 関数がサポートされています。古いブラウザ向けにはHEXやRGBへのフォールバックを用意することを推奨します。