W3C home > Mailing lists > Public > www-style@w3.org > January 2015

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

From: Rik Cabanier <cabanier@gmail.com>
Date: Wed, 21 Jan 2015 10:07:34 -0800
Message-ID: <CAGN7qDAAyEB9v3bePX6CDVbWm8iSExHttOFq2uT83U6m+AfBew@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Jonathan Rimmer <jon.rimmer@gmail.com>, www-style list <www-style@w3.org>
On Wed, Jan 21, 2015 at 9:33 AM, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

> On Wed, Jan 21, 2015 at 7:16 AM, Jonathan Rimmer <jon.rimmer@gmail.com>
> wrote:
> > 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:
>
> This is already allowed.  The color-stop section is way too longer and
> needs better organization, I admit, but if you start from the
> paragraph starting with "By default, this interpolation is linear",
> you'll find the description of how color hints affect interpolation.
> It is absolutely not linear.  The formula used comes from Adobe, so I
> assume it matches what Photoshop does, or something like that.
>

It matches what's done in Illustrator, InDesign and Acrobat.
We implemented support for the exponential interpolation function in
WebKit, Blink and Firefox.
If you use WebKit nightly, Chrome Canary or Firefox Nightly, the feature is
enabled.  Try http://codepen.io/adobe/full/fhnBJ/  and let me know what you
think of the result.
Received on Wednesday, 21 January 2015 18:08:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:50 UTC