Gradient color interpolation
従来のグラデーションは sRGB 色空間で補間されるため、補色間のグラデーションが灰色がかる「色の濁り」が発生していた。in oklch や in lab を指定すると、知覚的に均一な色空間で補間され、中間色が鮮やかでより自然なグラデーションになる。色相の補間方法（shorter / longer / increasing / decreasing hue）も指定可能。
概要
従来のグラデーションは sRGB 色空間で補間されるため、補色間のグラデーションが灰色がかる「色の濁り」が発生していた。in oklch や in lab を指定すると、知覚的に均一な色空間で補間され、中間色が鮮やかでより自然なグラデーションになる。色相の補間方法（shorter / longer / increasing / decreasing hue）も指定可能。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 16.2+
Firefox 127+
モバイル
Chrome Android 111+
Safari iOS 16.2+
Firefox Android 127+
基本構文
CSS
/* OKLCH でのグラデーション補間 */
.vibrant-gradient {
background: linear-gradient(in oklch, #ff0000, #0000ff);
}
/* 色相の補間方向を指定 */
.rainbow {
background: linear-gradient(
in oklch longer hue,
oklch(0.7 0.15 0),
oklch(0.7 0.15 360)
);
}
/* 放射グラデーション */
.radial {
background: radial-gradient(in lab, #ff6600, #0066ff);
}実務での使いどころ
-
鮮やかなグラデーション
oklch 補間で補色間のグラデーションでも中間色が灰色にならず、鮮やかなグラデーションを実現する。
-
虹色・スペクトルのグラデーション
longer hue を指定して色相環を一周する虹色グラデーションを作成する。
注意点
- 色空間によって中間色が大きく変わる。デザインの意図に合った色空間を選択すること。oklch が最も自然な結果になることが多い。
- longer hue は色相環を長い方で補間するため、予想以上に多くの色を経由する場合がある。
フォールバック戦略
CSS
/* フォールバック */
.gradient {
background: linear-gradient(#ff0000, #0000ff);
background: linear-gradient(in oklch, #ff0000, #0000ff);
}アクセシビリティ
- グラデーション上にテキストを配置する場合、すべての位置でコントラスト比が確保されていることを確認する。