赤と青を sRGB で混合

彩度の高い2色を sRGB で混合する

純粋な赤 (#ff0000) と純粋な青 (#0000ff) は sRGB 色立方体の対角に 位置する2点です。sRGB で補間すると、立方体内部を直線で通る経路になり、 人間の目には低彩度・グレーがかった紫として知覚される領域を通過します。

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

結果は #7f007f という、暗くやや濁った紫です。Sass の mix(red, blue, 50%) も同じ結果を返します。Sass もデフォルトが sRGB だからです。

なぜそうなるのか

sRGB は ディスプレイ参照 の色空間で、その座標は CRT の蛍光体電圧に 対応しており、知覚的な意味は持ちません。(255, 0, 0) と (0, 0, 255) の数値的な中点は (127.5, 0, 127.5) で、数学的には 正確ですが、L* (知覚的明度) がこの中点で落ち込むため視覚的には 「色味が抜けた」印象になります。

sRGB を使い続ける場面

• 古い Sass ミックスインで作られたレガシーデザインに合わせる場合。
• 暗く低彩度の中間色を意図的に出したいスタイル選択の場合。
• 知覚色空間をサポートしないブラウザを対象とする場合（2025 年では非常に稀）。

それ以外のすべての場面については、同じ混合の OKLCH 版 と比較してみてください。