グラデーションに in oklch を付けて、色の途中が灰色に濁らないようにする

linear-gradient(in oklch, blue, yellow) のように補間空間を指定すると、既定の sRGB 補間で反対色のあいだが灰色になる問題を避け、鮮やかなまま混ぜられる。

どんな時に使う？

ヒーロー背景・ボタン・チャートの帯など、離れた色どうしをグラデーションでつなぐとき。色止めを hex / rgb / hsl で書くと、ブラウザは既定で sRGB 空間で中間色を計算するため、青と黄のような反対色は途中で灰色に濁る。in oklch または in oklab を付けると知覚的な色空間で混ぜるので、途中の彩度が保たれやすい。

コード

css

/* 未対応ブラウザ向けの保険（sRGB） */
.hero {
  background: linear-gradient(90deg, blue, yellow);
  /* 対応ブラウザではこちらが上書きされる */
  background: linear-gradient(90deg in oklch, blue, yellow);
}

色止めの書き方はそのままでよく、変わるのは「あいだの色の計算方法」だけ。radial-gradient / conic-gradient / 繰り返し系でも同じ。

指定	特徴
（省略＝sRGB）	反対色が途中で灰色に濁りやすい
`in oklab`	2色を直線で結ぶ。彩度は落ちることがあるが、想定外の色相を通らない
`in oklch`	色相環を回りながら混ぜる。彩度は保ちやすいが、あいだの色相（青→黄なら緑など）を通る

色相の回り方を明示したいときは shorter hue / longer hue なども付けられる（例: linear-gradient(in oklch longer hue, red, red) で一周）。

注意点・対応状況

Chrome / Edge 111+、Safari 16.2+、Firefox 127+。主要ブラウザでは広く使える（Newly Available は 2024-06）。
未対応ブラウザは in oklch 付きの宣言を丸ごと捨てるので、先に sRGB 版を書いておけばフォールバックになる。
in oklch は彩度を保ちやすい反面、色域外に出やすい。端点が同じ色域内でも中間がはみ出すことがある。くすみを避けつつ安全にしたいときは in oklab の方が無難な場合がある。
色止め自体を oklch() で書く話（トークン設計）とは別。ここでは「混ぜ方」だけを変えている。

出典

@gkurttech（2026-11-06）