[css4-images] Non-linear interpolation between gradient color stops

I was reading the Gradient Color-Stops section of the ED for images 
level 4[1]. It seems to me that, even with the proposed color 
interpolation hint, gradients are still underpowered for creating smooth 
and aesthetically satisfying gradients, of the kind produced by tools 
like Photoshop, or in natural phenomenon such as sunsets.

When an interpolation hint is provided, it only lets the author move the 
position of the mid-point between two color stops. All the interpolation 
between color stops and to and from the mid-point is still done 
linearly. Therefore, this does not address the problem that linearly 
interpolating through RGB color space will not produce perceptually 
uniform transitions, and can produce ugly transitions at the 
intermediate stops.

A solution to this to allow non-linear interpolation between color 
stops. Photoshop's "smoothness" option provides the ability to smooth 
out transitions, apparently by using cardinal splines to interpolate 
between the points[2]. Here is a comparison between the unsmoothed 
red->white->blue gradient used as an example in the ED -- charitably 
described by the spec as "nice" -- and one produced in Photoshop using 
100% smoothness:

http://brillskills.com/www-style/gradients.png

You can also see a comparison with your browser's rendering of the same 
gradient here:

http://brillskills.com/www-style/gradients.html

As you can see, the gradient produced without smoothing has a pronounced 
white line running through the centre, like light breaking through the 
gap between two curtains. This is a result of the sharp turn that the 
interpolation does when it reaches the white color stop in the color space.

If you imagine the color space as a 2D or 3D area, where the color stops 
are points, and the interpolation between the points are straight lines 
connecting them, it is not difficult to understand why these artifacts 
occur. It is also easy to see how smoother transitions can be achieved 
using splines, just as they can be used in 2D graphics to produce smooth 
lines.[3]

I'd like to see CSS provide a similar smoothing ability for gradients. 
In order to produce Photoshop-like gradients, the color interpolation 
hint could accept a cardinal-spline(<number>) function, where <number> 
represents a tension for a the spline between the two affected color stops.

However, Photoshop's cardinal splines, while simple to use, also limit 
control to some degree. A more powerful approach is demonstrated by the 
tool Gentle Gradient[4]. This tool uses a quadratic bezier curve to 
interpolate between two color stops, with a middle color acting as the 
control point. This can be used to simulate real-world lighting effects 
that can otherwise only be approximated through complex, multi-stop, 
linearly-interpolated gradients.

CSS could provide a similar capability by accepting a 
quad-bezier(<color>), or cubic-bezier(<color>, <color>), function as the 
color interpolation hint. The <color> parameters would act as the 
control points for the interpolation curve in the color space between 
the two affected color stops.

Thoughts?

[1] http://dev.w3.org/csswg/css-images/#color-stop-syntax
[2] 
http://feedback.photoshop.com/photoshop_family/topics/photoshops_gradient_editor_needs_an_overhaul
[3] http://brillskills.com/www-style/color-space-interpolation.png
[4] http://www.foddy.net/2010/10/gentle-gradient/

Jon

Received on Wednesday, 21 January 2015 15:16:52 UTC