[csswg-drafts] [css-color-3][css-color-4] where to find the formulas used for color calculations in CSS? (#7718)

letochagone has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-3][css-color-4] where to find the formulas used for color calculations in CSS? ==
My question is about CSS properties source code

for example the opacity property. I wanted to understand how the color is calculated.
The method I'm going to describe gives the same RGB values that I get after taking a screenshot and reading the colors.

Here is the html & css document, the goal is to understand the color it will display.

```
#div1 {
  opacity: 0.6;
  background-color: rgba( 155 , 66 , 200 , 0.5 );
  width:200px;
  height: 200px;
}

#div2 {
  background-color: rgba( 0, 77 , 100 , 0.8 );
  width: 200px;
  height: 200px;
}

<div id="div1" >
    <div id= "div2"></div>
 </div>
```

first i calculate the composite color : co

 co = Cs * as + Cb * ab * ( 1 - as)  
 ao = as + ab * ( 1 - as )

Cs and as is the RGB and alpha of div2
Cb and ab is the RGB and alpha of div1

co = ( 0 , 77/255 , 100/255 ) * 0.8 + ( 155/255 , 66/255 , 200/255 ) * 0.5 * ( 1 - 0.8 )  
co = ( 0.06 , 0.267 , 0.392 )  
ao = 0.8 + 0.5 * ( 1 - 0.8 )  
ao = 0.9  

here is the result, it is a premultiplied color : RGBA = ( 0.06 , 0.267 , 0.392 , 0.9)

Now I apply the opacity :
(*) I multiply the result - the premultiplied color - by the value of the opacity
= ( R , G , B , A ) * opacity = ( 0.06 , 0.267 , 0.392 , 0.9) * 0.6 = ( 0.036 , 0.1602 , 0.2352 , 0.54 )

Now, we extract the color component of this pre-multiplied value ,
we divide ( 0.036 , 0.1602 , 0.2352 ) by 0.54 : ( 0.07 , 0.27 , 0.43 )

and we compose the result with the background color (the white color) :

color_screen = ( 0.07 , 0.27 , 0.43 ) * 0.54  + ( 1 , 1 , 1 ) * 1 * ( 1 - 0.54 )  

This result corresponds to the one measured after a screenshot

Finally, here is my question: it concerns step (*),
I applied the opacity on the premultiplied color.
And that's what gives me the final result equal to the screenshot.

In short : If my result matches the theory :
**why is the opacity applied to the premultiplied color ?**

here are the two possible schemes, and I wonder why
it's the first one that seems to be chosen :

**first possibility**
1 : blending, compositing
2 : (r,g,b,a) = premultiplied value after compositing
3 : apply opacity on this premultiplied value : ( r * opacity , g * opacity, g * opacity, a * opacity)

**second possibility**
1 : blending, compositing
2 : (r,g,b,a) = premultiplied value after compositing
4 : EXTRACT the color component (r/a, g/a, b/a , a )
3 : apply opacity on this color : ( r/a * opacity , g/a * opacity, b/a * opacity, a * opacity )

why the first method seems to have been chosen ? 

**do we have access to the source code of the CSS functions? (in order to understand precisely their role)**

(Finally, the question I am asking is not a "bug" that I have noticed, is there another place to ask this type of question?)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7718 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 8 September 2022 21:19:11 UTC