AZ Tools

OKLCH カラーピッカー

カラー

OKLCH は CSS Color 4 が使用する色空間で、明度、彩度、色相を目が実際に期待する通りに動作させる：固定された L+C で色相をずらしても知覚される明るさが安定する。古い HSL は劇的にシフトする。このピッカーは 3 チャンネルとアルファを公開し、正確な CSS oklch() 形式、等価な sRGB hex / rgb / hsl、OKlab a/b 内訳を表示し、色が彩度過多で sRGB モニター色域を外れる場合に警告を表示する（その場合、ブラウザは最も近い sRGB 色にフォールバックする）。

—
プリセット
#0099f0
sRGB 色域sRGB 外（クリップ）
  • oklch()oklch(65.0% 0.180 240.0)
  • Hex（クリップ）#0099f0
  • rgb()rgb(0, 153, 240)
  • hsl()hsl(202, 100%, 47%)
  • oklab()oklab(65.0% -0.090 -0.156)

明度 0~1（0 = 黒、1 = 白）。彩度 0 はニュートラルグレー；0.3 を超える値は sRGB の外に出ることがよくある。

使い方

  1. L、C、H をドラッグして色を調整 — 色域バッジに注意。
  2. 画面上のスウォッチを正確にしたい場合、色域バッジが琥珀色になったら彩度を少し下げる。
  3. スタイルシートが必要とする形式をコピー：モダンなスタックは oklch() 文字列を選ぶべき。

よくある質問

なぜ色が「sRGB 外」と表示される？
標準モニターは人間が見える色の限られた範囲（sRGB）のみ表示できる。OKLCH はより広い、知覚的に均一な空間なので、sRGB 画面に単に収まらない色を指定できる。ブラウザはそれらを最も近い sRGB マッチにクリップする — hex プレビューはクリップされた結果を表示する。
なぜ oklch() を hsl() より好む？
HSL は RGB 上に構築されたため、明度は色相間で不均一（同じ L で黄色は青よりずっと明るく見える）。OKLCH は実際の知覚データに合わせてチューニングされているため、色相を変更してもアニメーション、テーマトークン、アクセシビリティ比率が予測可能なまま。

関連ツール

色覚シミュレーター

8 種類の色覚異常（CVD）で画像がどう見えるかを再現。

カラー00

CSS Box Shadow ジェネレーター

複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。

カラー00

カラーフォーマット変換

任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。

カラー00

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラー00

カラーパレット ジェネレーター

基準色から 6 種類のスキームで調和の取れたパレットを作成。

カラー00

カラーコントラスト チェッカー

文字／背景のコントラストを WCAG AA・AAA 基準でチェック。

カラー00