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

Re: [css3-images] July F2F minutes comment regarding SVG and non-opaque colors

From: Alan Gresley <alan@css-class.com>
Date: Mon, 05 Sep 2011 23:22:14 +1000
Message-ID: <4E64CD06.6040501@css-class.com>
To: Brian Manthos <brianman@microsoft.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Cameron McCormack <cam@mcc.id.au>, "www-style@w3.org" <www-style@w3.org>
On 23/08/2011 3:24 AM, Brian Manthos wrote:
> Alan, your definition of pre-multiplied doesn't match our working
> definition -- at least as I understand it.
>
> More specifically...
>
>> non-premultiplied           composite on black
>>
>> 100%     rgba(255,255,255,1.0)    =  rgb(255,255,255) 50%
>> rgba(127,127,127,0.5)    =  rgb(64,64,64) 75%
>> rgba(64,64,64,0.25)      =  rgb(16,16,16) 87.5%
>> rgba(32,32,32,0.125)     =  rgb(4,4,4) 93.75%
>> rgba(16,16,16,0.0625)    =  rgb(1,1,1)
>
> The 2nd column is valid by our working definition of
> non-pre-multiplied, for the last three rows the first column and the
> second column don't align -- at least the way I would label them.
> Also, the pattern from the 1st two rows and the last three rows is
> inconsistent -- the alpha is dropping but the percentage is rising.


Your correct but back to front. It should have been charted like below 
(beginning at O% for first column in the first row).


          non-premultiplied           composite on black

0%       rgba(255,255,255,1.0)    =  rgb(255,255,255)
50%      rgba(127,127,127,0.5)    =  rgb(64,64,64)
75%      rgba(64,64,64,0.25)      =  rgb(16,16,16)
87.5%    rgba(32,32,32,0.125)     =  rgb(4,4,4)
93.75%   rgba(16,16,16,0.0625)    =  rgb(1,1,1)


The first column are the steps (of even temperaments) of a gradient from 
beginning to end or from 0% to 100%. If we swapped 'white' for 
'indianred' (composite on a black background), we have the same scaling 
(slightly out by rounding decimal place).


          non-premultiplied           composite on black

0%       rgba(205,92,92,1.0)      =  rgb(205,92,92)
50%      rgba(102,46,46,0.5)      =  rgb(51,23,23)
75%      rgba(51,23,23,0.25)      =  rgb(13,6,6)
87.5%    rgba(27,12,12,0.125)     =  rgb(3,1,1)
93.75%   rgba(13,6,6,0.0625)      =  rgb(1,0,0)


There is a mathematical symmetry (a negative) with the reversed gradient 
on a white background.


          non-premultiplied           composite on white

0%       rgba(0,0,0,1.0)          =  rgb(0,0,0)
50%      rgba(127,127,127,0.5)    =  rgb(191,191,191)
75%      rgba(191,191,191,0.25)   =  rgb(239,239,239)
87.5%    rgba(223,223,223,0.125)  =  rgb(251,251,251)
93.75%   rgba(239,239,239,0.0625) =  rgb(254,254,254)


For each step, this mathematical symmetry will result in rgb(255,255,255).


          composite on black   composite on white

0%       rgb(255,255,255)     rgb(0,0,0)
50%      rgb(64,64,64)        rgb(191,191,191)
75%      rgb(16,16,16)        rgb(239,239,239)
87.5%    rgb(4,4,4)           rgb(251,251,251)
93.75%   rgb(1,1,1)           rgb(254,254,254)


The below SVG plots this symmetry (the vertical lines of lime are 50% = 
127, 75% = 191, 87.5% = 223 and 93.75% = 239).

http://css-class.com/test/svg/multiplied-alpha.svg


   1. white to transparent-black composite of a
      white background
   2. white to transparent-black composite on a
      black background
   3. black to transparent-white composite of a
      white background
   4. black to transparent-white composite of a
      black background


For those who can do the maths (not Alan's color cube maths). What is 
happening in the SVG? I can see halves of halves repeating to infinity.


> Nonetheless, rounding aside (2nd row), your characterization of
> composition on black (3rd column) aligns with what I would expect.
>
>> premultiplied               composite on black
>>
>> 100%     rgba(255,255,255,1.0)    =  rgb(255,255,255) 50%
>> rgba(255,255,255,0.5)    =  rgb(127,127,127) 75%
>> rgba(255,255,255,0.25)   =  rgb(64,64,64) 87.5%
>> rgba(255,255,255,0.125)  =  rgb(32,32,32) 93.75%
>> rgba(255,255,255,0.0625) =  rgb(16,16,16)
>
> [Same issue with alpha dropping but percentage rising.] [Same issue
> with rounding in second row; and now present in 3rd, 4th, and 5th
> rows.]


Same mistake by me. It should have been charted like this.


          premultiplied               composite on black

0%       rgba(255,255,255,1.0)    =  rgb(255,255,255)
50%      rgba(255,255,255,0.5)    =  rgb(127,127,127)
75%      rgba(255,255,255,0.25)   =  rgb(64,64,64)
87.5%    rgba(255,255,255,0.125)  =  rgb(32,32,32)
93.75%   rgba(255,255,255,0.0625) =  rgb(16,16,16)


> This doesn't match our working definition of premultiplied.  More
> specifically, all but the first row are invalid pre-multiplied
> representations because the R, G, and B channels must be at or below
> (255 *  A).
>
> The bucketing is as follows...
>
> Invalid prgba(255,255,255,0.5); ... prgba(128,128,128,0.5);


Agree, invalid.


> Valid prgba(127.5,127.5,127.5,0.5); ... prgba(0,0,0,0.5);


Correct, the color does not change. Even Tab would agree with me here. 
Please reread this comment from fantasai here.

http://lists.w3.org/Archives/Public/www-style/2011Jun/0650.html

   | Is there a way to avoid things like this? It
   | seems to me that having 'transparent' mean
   | 'transparent black' means you almost never
   | get what you want, which is the *opacity*
   | fading *without the color itself changing*.
   | I think that's a common enough use case
   | that it should be easy to do.


> Now, if you'd like to suggest pushing back on our
> working definition of pre-multiplied you can do so


No (see above concerning no change in color and below about Alpha 
compositing).


> -- but then we need a new term for
> the CSS (and SVG) specification(s), and I suspect the industry as a
> whole.


Not at all. Maybe some understanding of what is multiplied, what is 
perceptual color space and how Alpha compositing has this concept of 
pre-multiplied color. There is no such thing as pre-multiplied space. 
There are just pre-multiplied color points.

I would suggest using pre-transparent' for pre-multiplied gradients and 
'transparent' (which is transparent-black) for (post)multiplied gradients.


> Perhaps "alpha-multiplied" vs. "non-alpha-multiplied".


There is no non-alpha-multiplied. There is premultiplied alpha and 
non-premultiplied RGBA tuples.


> I think David's characterization of the current working
> definition of pre-multiplied is a pretty good one:
> # "pre" in this context really means # "have already
>been" rather than "before",


No. See it as non-traversal of multiplied space with only a 
multiplication in alpha. Instead of traversing RGB multiplied space, the 
gradient color is never changed. The composite color will always be 
relative to the colors in one of the multiplied planes (faces) that 
forms the six sides of a cube of multiplied color space.

Lets look at Alpha compositing.

http://en.wikipedia.org/wiki/Alpha_compositing


   | If an alpha channel is used in an image,
   | it is common to also multiply the color
   | by the alpha value, to save on additional
   | multiplications during compositing. This
   | is usually referred to as premultiplied
   | alpha.


   (Note: to save on additional multiplications is what
    premultiplied implies so 'pre' means 'before')


   | Assuming that the pixel color is expressed
   | using straight (non-premultiplied) RGBA tuples,
   | a pixel value of (0.0, 0.5, 0.0, 0.5) implies
   | a pixel which has 50% of the maximum green
   | intensity and 50% opacity. If the color were
   | fully green, its RGBA would be (0, 1, 0, 0.5).


   | However, if this pixel uses premultiplied
   | alpha, all of the RGB values (0, 1, 0) are
   | multiplied by 0.5 and then the alpha is
   | appended to the end to yield (0, 0.5, 0, 0.5).
   | In this case, the 0.5 value for the G channel
   | actually indicates 100% green intensity
   | (with 50% opacity). For this reason, knowing
   | whether a file uses premultiplied or straight
   | alpha is essential to correctly process or
   | composite it.


I will end this message here since I have been working on and off on 
this message as well as color in general for many weeks. All I have done 
is seen color as it truly should be represented.

http://en.wikipedia.org/wiki/RGB_color_space

http://upload.wikimedia.org/wikipedia/commons/b/b8/RGB.GIF


Within this representation are what I call HSL planes (view in WebKit).

http://css-class.com/test/css/3/3d-animation/color-cube4.htm


When you understand what HSL planes are, then you will know why yellow 
to transparent black has olive with 50% opacity (not green which belongs 
to the hue of lime) when composite on a white background.

You will also understand why I say that the usual representation of HSL 
color is an abstraction (distortion) along with HSV color which are just 
different cylindrical-coordinate representations.

http://en.wikipedia.org/wiki/HSL_and_HSV


This will come together here (lacking content and articulation of the 
abstract view which is visualizing 3D color cubes and planes on a flat 
display device).

http://css-class.com/articles/color/



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Monday, 5 September 2011 13:22:05 GMT

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