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

Re: [css3-images] Gradients feedback

From: Alan Gresley <alan@css-class.com>
Date: Wed, 08 Sep 2010 21:38:45 +1000
Message-ID: <4C8775C5.8080002@css-class.com>
To: "L. David Baron" <dbaron@dbaron.org>
CC: Boris Zbarsky <bzbarsky@MIT.EDU>, www-style list <www-style@w3.org>
L. David Baron wrote:
> On Monday 2010-09-06 22:37 +1000, Alan Gresley wrote:
>> I highly object to this. Gradient interpolation must be performed in
>> non-premultiplied space. Some major reason are:
>>
>> 1. Gradients are not another vector in sRGB space (not sure how
>> matrix works).
>>
>> 2. This affects all colors in sRGB space that become have a gradient
>> to transparent. There is precise maths.
> 
> I don't understand either of these reasons.  Could you explain them
> more clearly?


Ok, here we go. In sRGB space, all colors are fully opaque so any 
gradient that goes from one point to another point within the sRGB 
space will be a gradient of fully opaque color. This is seen with a 
gradient from yellow to white, the midway of point of which is #ff7 
(#ffff80 is incorrect).

You would like the midway point between a gradient between yellow and 
transparent to also be #ff7, or to been non-premultiplied but this 
would mean that all colors (points) within sRGB space that are 
gradients to transparent would have to be somewhat non-premultiplied. 
I don't know how this can be done.

To explain the precise mathematics, I will use the example of the 
gradient between yellow and transparent. The current midway point as 
implemented by Gecko and WebKit is #bb7 (fully opaque). This same 
color #bb7 is also the midway point of the gradient from #770 to white.

Using another example, the gradient between blue and transparent. The 
current midway point as implemented by Gecko and WebKit is #77b (fully 
opaque). This same color #77b is also the midway point of the gradient 
from #007 to white.

This all changes when the background behind the element with the 
gradient is not white.


> Computing gradients in premultiplied space makes gradients to
> transparent work much better.  In non-premultiplied space they all
> look black-ish in the middle.


Yes, it does look grayish or blackish but this is because our eyes 
have difficulty see a light hue on a light background. If the 
background is darker, the hue becomes more intense. I believe this 
thing is called hyperpolarization [1]. Remember, the colors that we 
see is solely on ones perception.



>> If premultiplied space gradients are allowed, this must be by an
>> added keyword. This is because a bell shape arc must be trace along
>> a vector.
> 
> I don't know what you're talking about.  Could you explain?
> 
> -David


Please forgive me for resorting to this test (I will make a mess of it 
if I tried to express it in words).

<http://css-class.com/test/css/colors/rgb-space-125-colors-yellow-blue.htm>


Each vector field, yellow and blue have solid colored lines. According 
to how gradient is currently implemented, the lines show paths that 
the gradient take if mapped to sRGB space.


   The yellow lines shows the color (mapped to sRGB space) when the
   background is white.

   The orange lines shows the color (mapped to sRGB space) when the
   background is #777 (the midway point between white and black).

   The yellow lines shows the color (mapped to sRGB space) when the
   background is back.

   The dotted green line shows the gradient from #770 to white and
   the gradient from #007 to white. This is explain above where I
   talk of precise mathematics.

   Note: The curves or arcs would be shaped like a bell (rising sharply
   and then dropping sharply) for premultiplied gradient.


The reason I object to the change to premultiplied gradient is because 
I believe to would be *applied to all* gradients from opaque (or 
semi-opaque) colors *to transparent*.

On a dark background, any color that is light in hue (yellow, aqua) 
would reach a midway point along a gradient which matches (what I 
think is) the premultiplied color and then fall sharply.

On a gray background (#777), the midway point along a gradient would 
on a grayscale show a rise in the centre.


The reason for adding a keyword is that current a gradient seem to 
have this opacity level along the curve (spaced as if it was a 
constant, I don't know if this is the true scale).

0.1    0.2    0.3    0.4    0.5    0.6    0.7    0.8    0.9    1.0


What you are suggesting (by having #bb7 midway) seem to be something 
like below with a shifting of the midway point in respect to opacity.

0.1       0.2      0.3     0.4     0.5    0.6   0.7   0.8  0.9 1.0


I hope this all makes some sense.



1. <http://en.wikipedia.org/wiki/Hyperpolarization_(biology)>



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 8 September 2010 11:39:18 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:31 GMT