W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [css3-images] Gradients feedback

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Sun, 29 Aug 2010 14:12:28 -0400
Message-ID: <4C7AA30C.5020507@mit.edu>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
On 8/29/10 12:56 PM, Tab Atkins Jr. wrote:
> This is because, currently, transitions to and from 'transparent' look ugly
> - going yellow->transparent produces a visibly grayish area in the
> middle because the color is going from yellow->black while the opacity
> goes from 100%->0%.  This will still be the case in premultiplied
> space because 'transparent' is *defined* to be 'rgba(0,0,0,0)', but if
> you're using premultiplied colors you can do a
> yellow->rgba(255,255,0,0) transition

No, no.  The whole point is that in non-premultiplied space the halfway 
point between rgba(255, 255, 0, 1) and rgba(0, 0, 0, 0) is rgba(127.5, 
127.5, 0, 0.5) while in premultiplied space it's rgba(255, 255, 0, 0.5) 
[1].  You don't have to change any endpoints or startpoints to get 
better behavior here in premultiplied space; it Just Works.  This is key 
for getting interoperable behavior, which is hard to achieve with "well, 
you could do this thing or this other thing".  ;)


[1] More precisely, in non-premultiplied space the point |t| between 
rgba(r1, g1, b1, a1) and rgba(r2, g2, b2, a2), where 0 <= t <= 1 is:

   rgba((1-t)r1 + t*r2, (1-t)g1 + t*g2, (1-t)b2 + t*b2, (1-t)a1 + t*a2)

For the special case of r2 = g2 = b2 = a2 = 0 ("transparent") this 
simplifies to:

   rgba((1-t)r1, (1-t)g1, (1-t)b1, (1-t)a1)

which will look closer and closer to gray as t -> 1, except with an 
alpha approaching 0 going on.  The effect of looking gray will thus be 
most pronounced for some value of t in the middle there.

In premultiplied space, the point |t| is:

   rgba( ((1-t)r1*a1 + t*r2*a2) / a3,
         ((1-t)g1*a1 + t*g2*a2) / a3,
         ((1-t)b1*a1 + t*b2*a2) / a3,
         a3 )

where a3 = (1-t)*a1 + t*a2.  For the special case of r2 = g2 = b2 = a2 = 
0  you get:

   rgba(r1, g1, b1, (1-t)*a1 + t*a2)

which is precisely a fade that preserves the original color while 
changing the opacity until you get to "transparent".   And in 
particular, this is true no matter what color "transparent" is in rgba, 
as long as it has alpha == 0 (a consequence of all such colors being 
equal to each other numerically in premultiplied space).
Received on Sunday, 29 August 2010 18:13:02 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:49 UTC