W3C home > Mailing lists > Public > www-style@w3.org > July 2011

Re: [CSS3-color] [css3-images] [css3-transitions] gradient pre-multiplied interpolation

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 27 Jul 2011 07:32:27 -0700
Message-ID: <CAAWBYDBM5XOKimJu-pEfXHw9JYp6dhi1XPxwxN3QTbhyq8TWRA@mail.gmail.com>
To: Alan Gresley <alan@css-class.com>
Cc: CSS 3 W3C Group <www-style@w3.org>
On Wed, Jul 27, 2011 at 3:52 AM, Alan Gresley <alan@css-class.com> wrote:
> To avoid that olive, you can go yellow to rgba(255,255,0,0) or yellow to
> rgba(255,255,255,0).

I know.

>> 23:57:51 [fantasai]
>>    plinss: Why don't we want to do premultiplied?
>> 23:58:03 [fantasai]
>>    TabAtkins: It's not natively available on some platforms
>> 23:58:10 [fantasai]
>>    smfr: We'd have to get libraries to add it
> So Tab wants un-prefix gradients as soon as possible but it could be a year
> before this works correctly on Mac?


>> 23:58:29 [glazou]
>>    glazou has joined #css
>> 23:59:28 [fantasai]
>>    Brian: Alan Gresley was asking about non-premultiplied
>> gradients because there are some cases that you'd want that
>> result
> And I have not had sufficient time to show the full scale of my testing.

I don't believe there's anything to show with more testing.  We fully
understand the effects of both possibilities.

>> 23:59:53 [fantasai]
>>    TabAtkins: You could simulate it by manually arc
>> it through the color space, it's tricky, but doable,
>> and a very uncommon case in comparison
> At one time believed that it was possible to simulate. Now I am of the
> opinion that it is impossible since every color stop you add causes the
> gradient to have a banding appearance. Plus the results are not pleasant if
> the background-color is transitioned from a darkish color to a lightish
> color or visa verso. If you say it is doable, can you demonstrate how this
> is done? I know of a way, but it does not involved adding extra color stops.

I disagree; you should only see banding effects if you use too few color-stops.

>> 00:00:13 [fantasai]
>>    Brian: I had good results with Opera
> The gradient path has to also appear the same when composite on a
> background-color that is also the opposite (ie. red~aqua or white~black).

I'm not sure I understand.  Do you mean that, for example,
partially-transparent yellow composited over partially-transparent
black should give the same result as the middle of a gradient between
the two colors?  Here's an example of the two effects:

<!DOCTYPE html>
div { width: 100px; height: 100px; }
<div style="background: rgba(0,0,0,.1);">
  <div style="background: rgba(255,255,0,.5);">
<div style="background: -webkit-linear-gradient(left, rgba(0,0,0,.1)
-10000px, rgba(255,255,0,.5) 10000px);">

(Stretching out the gradient ensures that the box is filled with the
average color, as computed by the gradient transition.)

If this is what you mean, then I agree, and browsers do too - they
composite in premultiplied rgba space.  (They have to, or else the web
would be much much uglier, since compositing things with 'transparent'
happens constantly.)

>> 00:00:35 [fantasai]
>>    TabAtkins: With Opera and IE we'll have 2 impls,
> Are you sure they are interoperable at all different alpha levels?

Premultiplied colors are extremely simple.  I'm confident that Opera
and IE are competent enough to get this right.

>>  so let's stick with that.
>> 00:00:45 [fantasai]
>>    RESOLVED: Use premultiplied colors for gradients and transitions
> One way around the issue is that when keywords are used, the gradient uses
> pre-multiplied space. If rgba() or hsla() are used, the gradient uses
> un-premultiplied space. The same can happen with transitions for color to
> color.

This would introduce a significant divergence from how colors work
currently, where keywords are just aliases for the other forms of the
color.  I think that would be pretty confusing.  (Plus, if we were
going to do this, I'd have hsl colors transition in hsl space, which
is also often better-looking than using rgb space.)

If a switch is desired, there is already a mechanism for this in SVG
that could be reused: the color-interpolation property.  It currently
only has a switch between sRGB and linearRGB (which is also useful, as
linearRGB *also* sometimes interpolates prettier than normal RGB)
because SVG doesn't officially have alpha colors, but it could
potentially be modified to indicate whether to premultiply or not as

Received on Wednesday, 27 July 2011 14:33:15 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:48 UTC