```Boris Zbarsky wrote:
> On 9/8/10 7:38 AM, Alan Gresley wrote:
>> 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.
>
> Yes.  As long as all colors are fully opaque, premultiplied and
> un-premultiplied alpha behave exactly the same way, note.

Ok, need to get my head around that.

>> You would like the midway point between a gradient between yellow and
>> transparent to also be #ff7
>
> No, I would like a gradient halfway from #ff0 to transparent to be
> rgba(255, 255, 0, 0.5).
>
> In un-premultiplied space, what you get instead is rgba(127, 127, 0, 0.5).

Correct.

>> 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.
>
> I have no idea what you're trying to say there.

What I mean is that all colors (points) within sRGB space that are
gradients to transparent and are over a white background would be
appear the same as if the same colors (points) within sRGB space were

>> 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).
>
> No.  The current midway point as implemented by Gecko is rgba(127, 127,
> 0, 0.5).  I can't speak to what webkit does authoritatively, but the
> rendering in Webkit looks identical to Gecko's (see below).

WebKit seems to do the same.

> Note that _if_ you happen to composite rgba(127, 127, 0, 0.5) on top of
> white you will get something like #bebe7f.

Correct.

> mathematics" is coming from applying a color picker to the results of
> compositing a gradient from yellow to transparent onto a white
> background I can see you getting the numbers you get.

No, I came to that opaque color (out by one hexadecimal) based on a
mental assumption which when plotted on my sRGB space / hexagon diagram.

> Testcase that shows that the gradient's intermediate points are not in
> fact opaque in either engine:
>
> <!DOCTYPE html>
> <style>
>   div { width: 100px; height: 100px; }
>   div.g {
>         background: -webkit-gradient(linear, center top, center bottom,
>                                      from(yellow), to(transparent));
>   }
> </style>
> <div style="background: white"><div class="g"></div></div>
> <div style="background: red"><div class="g"></div></div>

Ok, you make a very valid point here concerning a intermediate point
which is semi-opaque. I was just understanding what was happening with
a gradient from color to transparent before I move on to a gradient
from color to color.

>> This same color #bb7 is also the midway point of the gradient from
>> #770 to white.
>
> Yes, but that's an accident of happening to composite onto a white
> background.  See above.

It is not an accident, it is how color space works.

>> Using another example, the gradient between blue and transparent. The
>> current midway point as implemented by Gecko and WebKit is #77b (fully
>> opaque).
>
> Again, no.  The current midway point is rgba(0, 0, 127, 0.5).
> Compositing that onto a white background gives #7f7fbe, which is what
> you seem to have measured with your color picker.

No, I didn't use a color picker for any of the midway points. I only
used the color picker for 25% and 75%.

>> This all changes when the background behind the element with the
>
> Nothing about the _gradient_ changes.  All that changes is what it's
> composited against.  Given that you made this observation, I'm not sure
> how you can claim with a straight face that the intermediate gradient
> colors are "fully opaque".

What you think is a semi-opaque color can only be conceptualized when
such semi-opaque colors have a background (not uniformed) that reveals
transparency.

What is seen with rgba(255, 255, 0, 0.5) when the light is emitted by
a monitor screen is many device pixels composed of vertical lines of
RGB where both the R and G channels are 255 each and the blue channel
is 0. The only true transparent colors are those that sit out the
visible color spectrum, ei. radio waves or x-rays. I make such claims
with a straight face /-:

>>> 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.
>
> No, it's because you're desaturating the color in addition to changing
> its opacity value if you transition to rgba(0,0,0,0) in unpremultiplied
> space.

So I guess the special issue of Scientific American Mind - Volume 20,
Number 1, Summer 2010 is wrong in it's discussion about the
neuroscience of illusion.

<http://www.scientificamerican.com/slideshow.cfm?id=169-best-illusions>

>> The yellow lines shows the color (mapped to sRGB space) when the
>> background is white.
>
> Gradients need to be defined independently of what they're being
> composited onto.
>
>> I hope this all makes some sense.
>
> The part starting with the link to graphic doesn't sorry...
>
> -Boris

The only reason that I am doing this is because I would like to be
able to as an author to use premultiplied un-premultiplied gradients.

Is this what Gecko does (second of each test) with un-premultiplied

<http://css-class.com/test/css/colors/yellow-blue-premultiplied-un-premultiplied.htm>

.a6 {background: rgba(255, 255, 0, 1);}
.a7 {background: rgba(191, 191, 0, 0.75);}
.a8 {background: rgba(127, 127, 0, 0.5);}
.a9 {background: rgba(63, 63, 0, 0.25);}
.a10 {background: rgba(0, 0, 0, 0);}

.a16 {background: rgba(0, 0, 255, 1);}
.a17 {background: rgba(0, 0, 191, 0.75);}
.a18 {background: rgba(0, 0, 127, 0.5);}
.a19 {background: rgba(0, 0, 63, 0.25);}
.a20 {background: rgba(0, 0, 0, 0);}

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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
```

Received on Friday, 10 September 2010 07:36:26 UTC