Mix Red and Blue in sRGB
Interpolate red and blue with color-mix(in srgb, red, blue). The classic 'why does my midpoint look muddy?' demonstration of the default sRGB color space.
Detailed Explanation
Mixing Two Saturated Colors in sRGB
Pure red (#ff0000) and pure blue (#0000ff) are at opposite corners of
the sRGB color cube. Interpolating between them in sRGB picks the
straight line through the cube — which passes through a region that the
human eye perceives as low-chroma and grey-violet.
.midpoint {
background: color-mix(in srgb, red, blue);
}
This resolves to #7f007f — a dark, slightly muddy purple. It is the
same result Sass gives you with mix(red, blue, 50%), because Sass also
defaults to sRGB.
Why this happens
sRGB is a display-referred color space. Its coordinates correspond to
voltages on a CRT phosphor, not to anything perceptual. The numerical
midpoint between (255, 0, 0) and (0, 0, 255) is (127.5, 0, 127.5), which is mathematically exact but visually "drained" because
the L* (perceived lightness) drops at that midpoint.
When to keep using sRGB
- You are matching legacy designs created with older Sass mixins.
- You need a predictably "darker" midpoint as a stylistic choice.
- You target browsers that do not support the perceptual spaces (very rare in 2025).
For everything else, see the oklch variant of this same mix to compare.
Use Case
Use this as a teaching example or as a deliberate stylistic choice when you want a dark, low-chroma midpoint. It is also the implicit default of every Sass `mix()` call ever written.