convention
- Here we only discuss the color of the display, which is the additive blending algorithm
- When two colors are added together, at least one of them should be transparent, or else the colors below will be invisible if they are not transparent at all
- Color model is RGB model,
- In order to simplify the calculation, the value range of the four arGB channels is 0~1
Define variables
- Front scene C1, ARGB channels: A1, R1, G1, B1
- Background colors C2, ARGB Channels: A2, R2, G2, B2
- Overlay colors C3, ARGB channels: A3, R3, G3, B3
Color entity
Think of color as a colored glass that regulates the reflectivity,
For example, if the glass reflects 0.5, then the remaining 0.5 is refraction, and the reflectivity + refractive index = 1
Two color overlay models
Calculates the value of the overlay color
The glass plate near the eye gives it a blue color, code-named Glass no. 1, with a reflectivity of 0.5 and refractive index of 0.5
The glass plate away from the eye gives it a red color, code-named Glass no. 2, with a reflectivity of 0.5 and refractive index of 0.5
Glass color value
Glass no. 1: A1:0.5, R1:1, G1:0, B1:0
Glass No.2: A2:1, R2:0, G2:0, B2:1
R channel
The r-channel value of glass one is zero
The r-channel value of glass 2 is 1
First, the reflectivity of Glass 2 is 1, reflecting all red, and then through glass 2, refracting 0.5 red into the eye.
And then, the R channel of glass one is 0
The value of R channel into the eye is 0.5 + 0 = 0.5
G channel
The g-channel value of glass one is zero
The g-channel value of glass two is zero
The value of the g-channel in the eye is 0 + 0 = 0
B channel
The b-channel value of glass one is one
The b-channel value of glass 2 is 0
First of all, the value of channel B of glass no.2 is 0;
Glass 1 then reflects 0.5 blue into the eye
The value of channel B into the eye is 0 + 0.5 = 0.5
The color in the eyes
R: 0.5
G: 0
B: 0.5
Multiply each by 255, 127, 0, 127,
The calculated color contrasts with the color of Photoshop
perfect
They’re not exactly the same, they’re exactly the same
Random color overlay
Let’s do two random colors
Glass color value
Glass no. 1: R1:0.3, G1:0.4, B1:0.5, reflectivity 0.2, refractive index 0.8
Glass no.2: R2:0.6, G2:0.7, B2:0.8, reflectivity 1.0, refractive index 0.0
R channel
The r-channel value of glass 1 is 0.3
The r-channel value of glass 2 is 0.6
First, glass 2 has an reflectivity of 1, reflecting 0.6 red, and then shines into the eye through Glass 1, which has an refractive index of 0.8.
Then, the reflectivity of Glass no. 1 is 0.2 and the refractive index is 0.8, and the red 0.3 is shot into the eye through glass No. 1, which has an reflectivity of 0.2
The value of the R channel into the eye is
Glass 2:0.6 * 0.8
Glass no.1:0.3 * 0.2
Shot in the eye of R channel: gross (0.6 * 0.8) + (0.3 * 0.2) = 0.48 + 0.06 = 0.54
G channel
The g-channel value of glass 1 is 0.4
The g-channel value of glass 2 is 0.7
First, glass 2 has an reflectivity of 1, reflecting 0.7 green, and then through Glass 1, refracting 0.8 green into the eye.
Then, glass no. 1 has a reflectivity of 0.2 and a refractive index of 0.8, and the 0.4 green is shot into the eye through glass No. 1, which has an reflectivity of 0.2
The value of the g-channel in the eye is
Glass 2:0.7 * 0.8
Glass No.1:0.4 * 0.2
Shot in the eye of G channel: gross (0.7 * 0.8) + (0.4 * 0.2) = 0.56 + 0.08 = 0.64
B channel
The b-channel value of glass 1 is 0.5
The b-channel value of glass 2 is 0.8
First, glass 2 has an reflectivity of 1, reflecting 0.8 blue. Then, through Glass 1, 0.8 blue is reflected into the eye.
Then, glass no. 1 has a reflectivity of 0.2 and a refractive index of 0.8, and the 0.8 blue is shot into the eye through glass No. 1, which has an reflectivity of 0.2
The value of channel B into the eye is
Glass 2:0.8 * 0.8
Glass no.1:0.5 * 0.2
Shot in the eye of the B channel: gross (0.8 * 0.8) + (0.5 * 0.2) = 0.64 + 0.1 = 0.74
The color in the eyes
R: 0.54
G: 0.64
B: 0.74
Multiply each by 255 to get 137.7, 163.2, 188.7
No decimals, round them
138, 163, 189
The calculated color contrasts with the color of Photoshop
Glass no. 1: R1:0.3, G1:0.4, B1:0.5, reflectivity 0.2, refractive index 0.8
Glass no.2: R2:0.6, G2:0.7, B2:0.8, reflectivity 1.0, refractive index 0.0
Glass 1 Color: 76.5, 102, 127.5
Glass 2 Color: 153, 178.5, 204
Round it up
Glass 1 Color: 77, 102, 128
Glass 2 Color: 153, 179, 204
The colors of photoshop are 138, 164, 189
perfect
They’re not exactly the same, they’re exactly the same
Convert the color value with 255 first, then overlay the color
G channel
The g-channel value of glass 1 is 0.4, times 255 is 102
The g-channel value of glass 2 is 0.7, multiplied by 255 equals 178.5, rounded to 179
First, glass no. 2, with an reflectivity of 1, reflects green of 179, and then shines into the eye through Glass No. 1, with an refractive index of 0.8.
Then, through glass 1, which has an reflectivity of 0.2 and a refractive index of 0.8, 102 green is shot into the eye
The value of the R channel into the eye is
Glass No.2:179 * 0.8
Glass No.1:102 * 0.2
Total value of R channels into the eye: (179 * 0.8) + (102 * 0.2) = 143.2 + 20.4 = 163.6 = 164
perfect
They are exactly the same
conclusion
Although you can only see this article, I have read a lot of posts, and I have thought of several color overlay models and overturned them for many times.
Finally, I realized the same color overlay effect as PS. I am very satisfied. Can you understand what I wrote? I think I wrote it in great detail
reference
Color overlay algorithm
Calculation method of superposition of two translucent colors
Quotes.
Thinking is the most important, other Baidu, Bing, StackOverflow, Android documents, AutoJS documents, is the last group to ask
— Tooth uncle tutorial
The statement
Some of the content comes from the web
This tutorial is for learning purposes only and is not allowed for other purposes