Tool Hub

OKLCH ピッカー

OKLCH ↔ sRGB/HEXスライダー変換

oklch: oklch(70.0% 0.150 240)

hex: #26a9f1

rgb: rgb(38, 169, 241)

CSS
color: oklch(70.0% 0.150 240);

Conversion via OKLab → linear sRGB → sRGB. Out-of-gamut values are clamped.

使い方

  1. L (明度)、C (彩度)、H (色相) スライダーをドラッグして色を作成します。
  2. または、既存の oklch()、hex、または rgb 値を逆入力に貼り付けて色をインポートします。
  3. スライダー下のライブスウォッチと生成された oklch()、hex、rgb 値を読みます。
  4. 出力セクションから「color: oklch(...)」 Ready to-use CSS スニペットをコピーします。
  5. コピーリンク ボタンで現在の色を共有します。

  • L=0.65、C=0.18、H=250 を設定すると、中程度の青が生成されます。ツールは oklch(0.65 0.18 250)、hex #4b78d4、同等の rgb() を表示します。
  • 逆入力に #ff6600 を貼り付けると、スライダーが対応する OKLCH 座標で埋められます。

本番環境で使用する前に出力を検証してください。保証なし — 詳細は 利用規約.