赤と青を OKLCH で混合

彩度の高い色を知覚的に混合する

補間色空間を srgb から oklch に切り替えると、同じ赤↔青の混合 結果が劇的に変わります：

.midpoint {
  background: color-mix(in oklch, red, blue);
}

濁った #7f007f の代わりに、鮮やかなマゼンタ・パープルが得られます。 OKLCH は L (知覚的明度)、C (彩度)、H (色相) を独立した軸に 分けているため、補間器は知覚的に直線的な経路を進めるのです。

OKLCH の実際の動作

OKLCH は 2020 年に発表された知覚的に均一な空間 OKLab の上に構築されて います。50/50 混合を要求すると：

• L (明度) は平均化されます。
• C (彩度) も平均化されます。両入力色が高彩度なので結果も高彩度を維持します。
• H (色相) は色相環の 短い方 の弧を進みます。赤 (≈ 29°) から 青 (≈ 264°) へは、マゼンタ (≈ 327° / -33°) を経由します。

実用的な学び

デザイントークン、ホバー状態、テーマ派生色、ある色から別の色を導出する あらゆるコードパスのデフォルトを in oklch にしてください。 in srgb はレガシー互換性のために残します。

sRGB 版 と 並べて比較すると、違いが一目瞭然です。