OKLCH Color Editor

使い方

1. 明度 Lのスライダー（0 が黒、1 が白）、彩度 Cのスライダー（灰色から鮮やかへ）、色相 Hのスライダーを動かします。
2. 半透明にしたいときは不透明度のスライダーを使います。値は oklch() の文字列にスラッシュ付きで書かれます。
3. プレビューの色を見ながら CSS・HEX・RGB の出力を読み取ります。見本の文字色は対比が足りる側に自動で切り替わります。
4. CSS を生成を押し、oklch() の指定と sRGB フォールバックをコピーします。

こんなときに

• 読みやすいパレット —— 明度を固定して色相だけ回せば、各色のコントラストを近い値に保てます。
• グラデーションの均し —— 同じ L の色を選ぶと、HSL よりむらの少ないグラデーションになります。
• デザイントークン —— コンポーネントライブラリ向けに、hex と rgb のフォールバックを添えた oklch() を1本で出力します。
• 広色域の確認 —— 鮮やかな色がどこで sRGB の色域を外れ、丸められるのかを確認できます。

プライバシーについて

エディターは純粋なブラウザー内の JavaScript です。スライダーの値は決まった行列変換と色域判定にかけられ、その場で描画されます。色の値がどこかに送信されることはなく、オフラインでも使えます。

FAQ

Q: OKLCH は HSL と何が違いますか？ A: OKLCH は知覚均一です。同じ L の変化は、色相を問わず同じ明るさの変化に見えます。HSL では同じ明度でも黄色が常に青より明るく見えます。

Q: 色域の警告は何を意味しますか？ A: 選んだ彩度は sRGB では再現できず、プレビューが再現可能な最も近い色に自動で丸めたことを示します。oklch() の文字列は選んだ値のままで、Display P3 の画面では完全な色が表示されます。

Q: oklch() はそのまま使えますか？ A: 現在のブラウザーは CSS Color 4 のこの関数を直接解釈します。古い実行環境向けに hex と rgb のフォールバックも併記しています。

Q: L・C・H は何を表しますか？ A: L は 0 から 1 の明度、C は 0 から上に伸びる彩度、H は度単位の色相の角度です。sRGB への変換は、この色空間とともに定義された OKLab の行列を通して行います。