Newly available 条件付きOK。主要ブラウザで対応済み。非対応ブラウザでは通常の sRGB グラデーションにフォールバックするため安全に導入可能。

Gradient color interpolation

従来のグラデーションは sRGB 色空間で補間されるため、補色間のグラデーションが灰色がかる「色の濁り」が発生していた。in oklch や in lab を指定すると、知覚的に均一な色空間で補間され、中間色が鮮やかでより自然なグラデーションになる。色相の補間方法（shorter / longer / increasing / decreasing hue）も指定可能。

カラーグラデーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
conic-gradient hue interpolation method
111
111
127
16.2
111
16.2
conic-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
linear-gradient hue interpolation method

色相補間方式
111
111
127
16.2
111
16.2
linear-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
radial-gradient hue interpolation method

色相補間方式
111
111
127
16.2
111
16.2
radial-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
repeating-conic-gradient hue interpolation method

色相補間方式
111
111
127
16.2
111
16.2
repeating-conic-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
repeating-linear-gradient hue interpolation method

色相補間方式
111
111
127
16.2
111
16.2
repeating-linear-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
repeating-radial-gradient hue interpolation method

色相補間方式
111
111
127
16.2
111
16.2
repeating-radial-gradient interpolation color space

補間色空間
111
111
127
16.2
111
16.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Gradient interpolation using OKLCH */
.vibrant-gradient {
  background: linear-gradient(in oklch, #ff0000, #0000ff);
}

/* Specify the hue interpolation direction */
.rainbow {
  background: linear-gradient(
    in oklch longer hue,
    oklch(0.7 0.15 0),
    oklch(0.7 0.15 360)
  );
}

/* Radial gradient */
.radial {
  background: radial-gradient(in lab, #ff6600, #0066ff);
}

ライブデモ

OKLCH補間

Gradient color interpolation の OKLCH補間 パターンです。

プレビュー全画面表示

longer hue レインボー

Gradient color interpolation の longer hue レインボー パターンです。

プレビュー全画面表示

Lab放射グラデーション

Gradient color interpolation の Lab放射グラデーション パターンです。

プレビュー全画面表示

実務での使いどころ

  • 鮮やかなグラデーション

    oklch 補間で補色間のグラデーションでも中間色が灰色にならず、鮮やかなグラデーションを実現する。

  • 虹色・スペクトルのグラデーション

    longer hue を指定して色相環を一周する虹色グラデーションを作成する。

注意点

  • 色空間によって中間色が大きく変わる。デザインの意図に合った色空間を選択すること。oklch が最も自然な結果になることが多い。
  • longer hue は色相環を長い方で補間するため、予想以上に多くの色を経由する場合がある。

フォールバック戦略

CSS 
/* フォールバック */
.gradient {
  background: linear-gradient(#ff0000, #0000ff);
  background: linear-gradient(in oklch, #ff0000, #0000ff);
}

アクセシビリティ

  • グラデーション上にテキストを配置する場合、すべての位置でコントラスト比が確保されていることを確認する。

参考リンク