OKLCH カラー変換ツール。
色を HEX、rgb()、hsl()、oklch() のいずれかで入力すると、4 つの形式すべてで表示され、そのままコピーできます。OKLCH の色が sRGB の画面で表示できる範囲の外にある場合は、ページが知らせます。ブラウザ内で動くので、入力した内容がアップロードされることはありません。
sRGB の色域内です。
- HEX
- #3A81F6
- RGB
- rgb(58 129 246)
- HSL
- hsl(217 91% 60%)
- OKLCH
- oklch(0.62 0.19 260)
ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。
色を OKLCH に変換する方法
- 色を入力します。 使える形式は、HEX（
#3B82F6、#38f、または#なし）、rgb(59 130 246)またはrgb(59, 130, 246)、hsl(217 91% 60%)、oklch(0.62 0.19 260)です。カンマは省略でき、CSS で使える場所ではパーセントも使えます。入力欄の横のカラーピッカーも使え、選んだ色が oklch() の値として入力欄に入ります。ページを開いた時点ではoklch(0.62 0.19 260)が入っています。 - 4 つの形式を確認します。 HEX、RGB、HSL、OKLCH が、色見本と並んで表示されます。入力欄の内容を読み取れないときは、入力欄が赤くなり、使える形式がページに表示されます。
- 入力欄の下の色域のメッセージを確認します。 色が sRGB の色域内にあるか、外にあるかが表示されます（詳しくは下記）。
- コピーします。 必要な形式のコピーボタンを押します。
形式は、現在の CSS やフレームワークが書く形で表示されます。rgb(59 130 246) はスペース区切り、hsl(217 91% 60%) は整数、oklch(0.623 0.188 259.815) は小数点以下 3 桁で、shadcn/ui や Tailwind v4 と同じ書き方です。グレーには彩度も色相もないので、oklch(0.6 0 0) になります。
対応しているのは HEX、rgb()、hsl()、oklch() だけです。red のような CSS の色名や、color(display-p3 …) のような他の関数には対応しておらず、rgb(59 130 246 / 50%) のような透明度の指定は無視されます。
sRGB の外にある色
OKLCH では、sRGB で表示できない色も表せます。sRGB は、HEX、rgb()、hsl() の背後にある色空間です。非常に鮮やかな緑の oklch(0.7 0.4 150) を試してみてください。sRGB の色域の外にあるという警告が表示され、ほかの形式には、sRGB で表示できる最も近い色（ここでは #00BE58）が表示されます。この色は、明度と色相を保ったまま、収まるまで彩度を下げて求めます。OKLCH の行と色見本には入力した OKLCH の値がそのまま使われるので、広色域の画面では、HEX よりも多くの色が表示されることがあります。
HEX、rgb()、hsl() で入力した色は必ず sRGB の中にあるので、警告が出ることはありません。
Codex で使う
Codex は、目にした色の形式をそのまま真似ます。Tailwind v4 や shadcn/ui のプロジェクトではそれが OKLCH なので、HEX ではなくこのページの oklch() の値を渡し、その形式のままにするよう頼みましょう。OKLCH には、Codex が一度に 1 つだけを変えられるという利点もあります。明度だけを下げれば、同じ色のより暗いシェードになります。
ブランドカラーは [oklch(0.62 0.19 260)] です。globals.css で --primary にこの色を設定してください。hover と active の状態には、彩度と色相は保ったまま、明度だけを 0.05 と 0.1 下げた、より暗いバージョンを作ってください。色はファイルのほかの部分と同じようにすべて oklch() で書き、HEX や hsl() の値は追加しないでください。
よくある質問
無料ですか？
はい。無料で登録も不要、変換できる色の数にも制限はありません。
入力した内容はアップロードされますか？
いいえ。変換はブラウザ内で行われ、入力した内容は送信も保存もされません。サイトが記録するのはツールが使われたことだけで、色は記録しません。
どのように変換していますか？
リニア sRGB を経由して、Björn Ottosson が公開した OKLab の式で変換し、そのあと OKLab を、彩度と色相を持つ OKLCH に変換します。HEX、rgb()、hsl() は整数、OKLCH は小数点以下 3 桁で表示されるため、色を HEX に変換して戻すと、OKLCH の値の末尾の桁が変わることがあります。
shadcn/ui と Tailwind v4 はなぜ OKLCH を使うのですか？
Tailwind v4 の標準パレットは OKLCH で書かれており、shadcn/ui も、Tailwind v4 に対応した際に、テーマ変数を HSL から OKLCH に移しました。理由は 3 つあります。1 つ目は、OKLCH の明度が見た目の明るさに近いことです。明度が同じ 2 色は同じ明るさに見えますが、HSL ではそうなりません。HSL の明度 50% の黄色と青は、見た目がまったく違います。2 つ目は、明度や彩度を変えても色相が安定して見えることです。そのため、明るい色から暗い色までのシェードを並べても、1 つの色として読めます。3 つ目は、OKLCH は sRGB を超える色も、それを表示できる画面向けに表せることです。HEX、rgb()、hsl() にはできません。