Why?
As is tradition, CSS does colour interpolation totally wrong. This article does a good job of explaining why.
CSS Color Module Level 4 will hopefully save us from this mess, by offering colour interpolation in CIELAB space, among other niceties. In the meantime, this tool can be used as a workaround to get prettier gradients.
In fact, we can do slightly better than CIELAB, with Oklab.
How?
It's quite simple - we add extra colourstops to the gradient, with correctly interpolated color values. The more we add, the closer we get to our intended gradient.
My gradient string parsing code is a bit fragile (PRs welcome).
It only works for inputs that match the pattern
[colour 0] [percentage 0], ..., [colour n] [percentage n]
Input CSS:
Interpolation type:
Extra Colour Stops:
How the CSS spec says it looks (native CSS rendering)
How it should really look (canvas rendering with proper interpolation)
How our improved CSS looks (native CSS rendering)
Output CSS:
Future Ideas:
Adding non-linear interpolation between colour stops.
Intelligent placement of extra colour stops. If we prioritise
placement where the error is greatest, then we won't need so
many additional stops.
Interactive UI for editing gradients.
How the CSS spec says it looks (native CSS rendering)
How it should really look (canvas rendering with proper interpolation)
How our improved CSS looks (native CSS rendering)
Output CSS:
Future Ideas:
Adding non-linear interpolation between colour stops.
Intelligent placement of extra colour stops. If we prioritise placement where the error is greatest, then we won't need so many additional stops.
Interactive UI for editing gradients.