OKLCH カラーピッカー＆変換ツール｜無料Webツール集
人間の視覚に最も近いとされる次世代色空間「OKLCH」を、滑らかで直感的な操作で体験できます。Lightness・Chroma・Hueを調整するだけで、鮮やかで一貫性のある美しい色を生成し、各種フォーマットに即変換します。
- Lightness（明るさ）、Chroma（彩度）、Hue（色相）のスライダーまたは数値を調整
- リアルタイムでプレビューと各フォーマットが更新されます
- 必要な形式の「コピー」ボタンをクリックしてコードをお使いください
OKLCH Controls
Color Formats
コピーしました！
OKLCHとは？
OKLCHは、2022年以降のCSS Color Module Level 4で正式にサポートされた新しい色空間です。従来のsRGB（HEX/RGB）やHSLとは異なり、人間の視覚知覚に非常に近い均一な色空間（Perceptually Uniform）であるのが最大の特徴です。
OKLCHのメリット
・明度（Lightness）を変えても色味（Hue/Chroma）がほとんど変化しない
・鮮やかな色でも自然で美しいグラデーションが作れる
・Tailwind CSS v4で公式に推奨されている色空間
・P3やRec.2020などの広色域ディスプレイでも正確に表現可能
・明度（Lightness）を変えても色味（Hue/Chroma）がほとんど変化しない
・鮮やかな色でも自然で美しいグラデーションが作れる
・Tailwind CSS v4で公式に推奨されている色空間
・P3やRec.2020などの広色域ディスプレイでも正確に表現可能
本ツールはブラウザのネイティブ機能を活用してOKLCHをリアルタイムで変換しています。生成した色は現代的なWebデザインやUIコンポーネントにそのままお使いいただけます。
