Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Imagine we have two ARGB colors c1 and c2.
Is there any difference between 50% (alpha) c1 on background c2, vs 50% c2 on background c1?
Using the formula out = alpha * new + (1 - alpha) * old (from another thread), both would have the same result:
50% blue on 100% red = 0.5 * blue + (1 - 0.5) red = 0.5 * blue + 0.5 red
100% red on 50% blue = 0.5 * red + (1 - 0.5) blue = 0.5 * red + 0.5 blue
thus, 50% blue on 100% red = 100% red on 50% blue
However, Photoshop CS5 claims that "50% red on 100% blue" is #80007f and "50% blue on 100% red" is #7f0080.
Thus, I'm wondering is the above algorithm just for simple real-life approximations?
Is there another formula that gives us truer results? (Since Adobe is quite up-there in terms of graphics, I would think it quite unlikely that they have made such a simple rounding off error)
50% c1 on c2 and 50% c2 on c1 should give the exact same color, as you have noticed by the very simply algorithm.
So mixing red (#ff0000) and blue (#0000ff) 50-50 should give you #7f007f. If you get #80007f it's close enough and the error could be due to some other reason, for example if your image is not in RGB mode but in HSL, or if photoshop chose to internally represent it with HSL.
Other errors could arouse from floating point calculations and rounding errors. Nevertheless, #80007f and #7f007f are pretty much the same, so if photoshop developers are aware of this imprecision, they probably chose to ignore it.
Related
This question already has answers here:
CSS overlapping elements & opacity issue
(3 answers)
Color of stacked semi-transparent boxes depends on order?
(4 answers)
Closed last month.
This post was edited and submitted for review last month and failed to reopen the post:
Original close reason(s) were not resolved
I tried to write a HTML that enables the user to create a element with angle and color(rgba). I want the cross part to be opaque that each element has transparency
However, I can not use the simple way to do this because the cross area is still not opaque(0.5*0.5=0.75)
I want to ask for a solution to make the cross part of two element be opaque by using CSS or JavaScript.
It must be completely filled into the area. However, the element will have angle so simple JavaScript to calculate it is not working.
I wonder if someone can give me a solution.
opacity doesn't add like that..
it is like discount of 50% + 50%.. if original price is 100 . you get first discount your price is 50 but with second discount, it is 25 more so final price will be 25
for case of opacity... you have one layer which lets 50% of light through it .. and 2nd layer also 50% so basically 50% of the 50% of the lowermost layer.
easy way to think is that both of them have some transparency so together they can't be fully opaque
Imagine that are two glasses, red glass, and green glass. When you put the red glass on top of green glass, it is an overlay, not an addition. You can try it in real life
This question already has answers here:
CSS - hsl or rgb(a) colors
(4 answers)
Closed 4 years ago.
I am a beginner at HTML and CSS. Why are there are so many color values if each of them can be used for a particular color?
It's very simple, all of them use different properties, so you have the power to choose whatever is convenient to you.
RGB = Red, Green and Blue amount from 0 to 255;
HEX = A shorter version of the RGBs amount, you can see how it works here: How does hexadecimal color work?;
HSL = Hue (0 to 360), Saturation and Lightness (both 0 to 100), example: https://www.w3schools.com/colors/colors_hsl.asp (I don't like to quote w3schools but you'll get the point there as well) - basically the first it's the color, second how strong it is, third how light or dark it is;
RGBA = Same of RGB but it'll include and extra value for Alpha, which is the transparency;
Same = Same of HSL but with the Alpha channel mentioned on RGBA as well.
This question already has answers here:
Convert RGBA to Hex or ARGB to Hex
(1 answer)
ARGB Hex color not working in css html
(3 answers)
Closed 5 years ago.
What the difference between this color code #fff3f3f3 and #ffffff - the first one is 8 characters and second one is 6 ?
And how I can read that kind of colors #fff3f3f3 ?
the last 2 numbers are the Alpha Channel (transparency), something like in rgba(r,g,b,a)
In your case, the last two is F3 what is equivalent to something about 96%.
/* This is green: */
background: rgb(0, 255, 0);
/* That's the same as this: */
background: #00ff00;
/* We could make it 50% transparent like this: */
background: rgba(0, 255, 0, 0.5);
/* OR, with an alpha HEX, like this: */
background: #00ff0080;
Here's a basic List of Alpha Channel for HEX:
% | Hex
___________
100% | FF
90% | E6
80% | CC
70% | B3
60% | 99
50% | 80
40% | 66
30% | 4D
20% | 33
10% | 1A
0% | 00
First is #ARGB, second is #RGB, where A - alpha channel (transparency)
8-character color code includes transparency as the last 2 digits.
Put it in RGBA perspective:
#ffffff is rgba(255,255,255,1.0)
#fff3f3f3 is about rgba(255,243,243,0.95)
Check https://css-tricks.com/8-digit-hex-codes/
In the 1st color code(#FFF3F3F3), the last two character represents alpha channel, which is the opacity of the color...The other one (#ffffff) which is having a length of 6 character is a solid color. It can either be written as #ffffff or #fff - this two represents the white color which can also be written in rgb or rgba format. The 'r'represents red, 'g' represents green and 'b' represents blue in the rgb format. The rgb and rgba format are same but the later has an alpha value 'a' which is used as the opacity for the color. In the rgb and rgba, the color code for white will be rgb(255,255,255) and rgba(255,255,255,1) - 1 being the alpha value which says that the color is fully opaque. The alpha value of the color can be in the range of 0-1. Hope this helped.
8 characters would be HSLA or RGBA. Basically the extra two characters at the end would define transparency, whereas only 6 characters does NOT define transparency.
More info on quackit.com
Think of the 8 character color code as #RRGGBBAA where R is red, G is green, B is blue, and A is the alpha channel (transparency). As Daniel has in his answer, an alpha channel of f3 roughly evaluates to .95- very slightly transparent.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I have a 1000x1000 grid with a fixed point (p1) in the centre and a variable point (p2). How can I calculate, in degrees, the angle indicated in red? The vertical blue line will always be fixed as 0 degrees.
Many thanks in advance.
A few hints to guide you in understanding why the solutions you've seen/will see work...
Let p2 be sitting in the position (x,y) on your grid; What is the projection of p2 onto the x axis, or p2 onto the y axis?
Where is p1 located?
How do you determine the distance between two points on a coordinate axis?
What would pythagoras say the length of the line connecting p1 and p2 is?
What trigonometric facts do you know of that relate the sides of a triangle to an angle?
If we know cos(x) = a, then x = ...?
You can calculate the angle with the following formula:
if(x>0)
angle = cos^-1(y/(sqrt(x^2+y^2))
else
angle = 180 + cos^-1(y/(sqrt(x^2+y^2))
where x is the horizontal distance between p1 and p2 and y is the vertical.
arctan(p2.y/p2.x) + 90 works for the upper-left quadrant. Depending on how you want to calculate the other quadrants you can either use the same formula or use the inverse as abs(result - 180)
I am drawing flat colors and textures into WebGL canvas. My colors and textures have varying alpha values and I want them to be blended correctly. I want to have transparent background (they should be blended with HTML content, which is under canvas).
In WebGL, I use
gl.clearColor(0, 0, 0, 0);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
It works correctly, when HTML background is black. But when I set a JPG pattern as a background of , I draw black triangle (alpha=1) and white triangle (alpha=0.5), I can see the background pattern in place where triangles intersect each other. Is this correct behavior?
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) means that the resulting alpha is
A_final = A_s * A_s + (1 - A_s) * A_d
In your example, after the black triangle (with alpha=1) is drawn, a drawn pixel in the framebuffer will have an alpha of
1 * 1 + (1 - 1) * 0 == 1 + 0 == 1
So it will be fully opaque. Next, after the white triangle (with alpha=.5) is drawn, a pixel in the intersection of the two triangles will have an alpha of
.5 * .5 + (1 - .5) * 1 == .25 + .5 == .75
That means the final color will be treated as partially transparent, and, when it is composited with the page, the page background will show through.
This is a somewhat uncommon problem in regular OpenGL, since content is usually composited against an empty background. It does come up when you draw to an FBO and have to composite the results with other content in your context, though. There are a few ways to deal with this.
One way is to have your alpha blend with gl.ONE, gl.ONE_MINUS_SRC_ALPHA so you get
A_final = A_s + (1 - A_s) * A_d
which is what you usually want with alpha blending. However, you want your colors to still blend with gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA. You can use gl.blendFuncSeparate instead of gl.blendFunc to set your color blending and alpha blending functions separately. In this case, you would call
gl.BlendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
Another option is to take advantage of colors with premultiplied alpha (which WebGL actually already assumes you are using, for instance, when sampling a color from a texture). If you draw the second triangle with the alpha already multiplied through the color (so a half transparent white triangle would have gl_FragColor set to vec4(.5, .5, .5, .5)), then you can use the blend mode
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
and it will act as you want for both color and alpha.
The second option is what you'll commonly see in WebGL examples, since (as mentioned), WebGL already assumes your colors are premultiplied (so vec4(1., 1., 1., .5) is out of gamut, the rendering output is undefined, and the driver/GPU can output any crazy color it wants). It's far more common to see gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) in regular OpenGL examples, which leads to some confusion.