CSS Gradients: Why Your Color Transitions Look Muddy and How to Fix Them

CSS gradients should be simple. Pick two colors, set a direction, done. But if you have ever created a gradient between two vibrant colors and gotten a murky grey band in the middle, you know it is not that straightforward. The problem is color interpolation, and understanding it makes the difference between gradients that look professional and gradients that look like they were generated by accident. Why gradients go grey When the browser interpolates between two colors in a gradient, it calculates intermediate values for each color channel. In the default sRGB color space, this interpolation follows straight lines through the RGB cube. The problem: the straight line between blue (#0000FF) and yellow (#FFFF00) in RGB space passes through grey. The midpoint is approximately #808080 -- literally grey. This happens because the RGB color model does not map to human color perception. Perceptually different colors can be close in RGB space, and perceptually similar colors can be far apart.