ページを読み込んでいます
OKLCH、HEX、RGB、HSL間のカラー変換をリアルタイムで行い、OKLCHの色相を保ったままWCAGコントラスト比を満たす色を自動提案するツールです。CSS Color Level 4のOKLCH色空間にネイティブ対応し、アクセシブルなカラーパレット設計を支援します。
入力欄にHEX、RGB、HSL、OKLCHのいずれかの形式でカラーコードを入力するか、カラーピッカーで色を選択します。
入力した色がリアルタイムでHEX、RGB、HSL、OKLCH（CSS関数形式含む）に変換されます。各形式のコピーボタンで値を取得できます。
背景色を指定すると、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変換ツールは、CSS Color Level 4で導入されたOKLCH色空間に対応したカラー変換・パレット生成ツールです。OKLCHは知覚的に均一な色空間であり、明度（L）・彩度（C）・色相（H）を直感的に制御できます。従来のHSLベースの色調整と異なり、色相を変えずに明度だけを調整してWCAGコントラスト比を満たすことができるため、ブランドカラーの色相を保ちながらアクセシブルな配色を設計できます。
OKLCHはCSS Color Level 4で導入された色空間で、Oklab色空間の円柱座標表現です。L（明度）、C（彩度）、H（色相）の3つのパラメータで色を表現し、知覚的に均一であるためHSLよりも直感的に色を調整できます。
HSLは数学的に単純ですが知覚的に不均一です。例えば、HSLで明度を50%にしても色相によって明るさが大きく異なります。OKLCHは知覚的に均一なため、同じL値を持つ色は実際に同じ明るさに見えます。
従来のHSLベースの調整では、明度を変えると彩度や色の印象も変わりがちです。OKLCHのL（明度）のみを調整することで、ブランドカラーの色相と彩度を可能な限り維持しながら、WCAGコントラスト基準を満たす色を見つけることができます。
OKLCHではsRGB色域外の色も表現できますが、画面表示のためにsRGBにクランプ（最も近い表現可能な色に変換）されます。提案色もsRGB色域内に収まるよう調整されます。
主要なモダンブラウザ（Chrome 111+、Firefox 113+、Safari 15.4+）でCSS oklch() 関数がサポートされています。古いブラウザ向けにはHEXやRGBへのフォールバックを用意することを推奨します。