I have recently learned about rgba for setting colours in css. I am curious about the technical aspect of the transparency channel actually works.
For example, if I set the values to be rgba(15, 34, 160, 1) and rgba(15 34, 160, 0.5) for two separate headers, then they are referred to as having the same colour, but having a different opacity value. What I am wondering is whether or not these colours are actually the same. By this I mean that in terms of the light coming out the pixels, they must surely be different in order to create two different looks of headers. Does this mean that the alpha value is actually used to change the colour in some sort of specific way?
Cheers!
since you can "half see" the color of the element behind a half-transparent element, it will be mixed with that color (if the background is white, it will appear lighter, if it's black, darker, and if it's another color there will also be a mixture of the colors.
So, technically it's the same color with different transparency, but the perceived result will be a different color (unless by chance the element behind the transparent one has the same color)
An RGB value is a color, an RGBA value is a color plus transparency. When you overlay it on a colored background, it can result in a different apparent color. So yes, they are the same COLOR, but can result in different colors depending on where they are.
Check out this JSFiddle
Play with the the top CSS property that looks like this:
background-color: rgba(225, 225, 225, 0.7);
The last value there is the opacity (opposite of transparency) measured from 0 to 1. 0 is fully transparent and 1 is fully opaque. The first three values are just like a regular rgb() CSS property.
By setting an RGBA color value. You are really just setting the color and a separate opacity value. This could be accomplished by setting the color with RGB and then the opacity separately with opacity, but RGBA combines the two into a single function. Using RGBA is shorter, but setting RGBA and then opacity separately allows you control over the values separately.
So, your two examples are setting the same value for color, but applying two different levels of opacity to that color.
Related
Context:
I have a project whose colors are coming from the backend before app is mounted, I'm setting these colors to some variables and I'm using these variables to set colors for texts and buttons.
But Currently I want to have a hover version from this color (make it lighter or darker), how can I accomplish this using scss?.
For CSS hover you'd want something like:
class:hover
for the colour, you'd want to use RGBA.
try something like:
class{ color: red;}
class:hover { color: rgba(255, 0, 0, 0.5)}
In the example, the 255 value = the colour red, and the 0.5 value is the opacity. It can range from 0 to 1 with 1 being fully solid.
It would mean looking to see what your chosen colour would be in rgba though... e.g violet is (238,130,238)
Colour value is self explanatory really due to the initials of RGB, but just in case: red = first value, Green = second, Blue = third.
You can use darken(colour, percentage) or lighten() as seen below:
.class:hover {background: darken($colour, 10%)}
See https://falkus.co/2017/05/using-lighten-and-darken-in-sass/ for more info
Strange I faced this question just now - are there any differences between css background color overlay and same looking color? For ex: designer designed buttons for hover, focus etc. On hover he wrote - overlay #FFF 15%. Now sice we use mixins and colors are hex, I have two choices - wrap element with other div or convert my rgba color rgba(255,255,255,0.15) to rgba #FFFFFF26 and use a pseudo class to apply it on hover.
It looks ugly, why not just other background color on hover?
I can get a hex color like this rgba(255,255,255,0.15) and it looks the same...
What are the benefits of overlay color (are there any?)?
If you have overlay with transparency then the background color will be seen through the overlay. If you apply directly on the button then what is behind it will show (in most cases white) so you have 2 different results
I'm working with a background-color which should be 70% transparent, but I have many limitations:
I can't use RGBa or HSLA (I'm getting the colors from a PHP Content Management System) as Hex
The background color is dynamic - I can't use an image
when I use opacity, the text is affected as well making it unreadable.
I'm sure the only option I have is changing my PHP code to generate RGBa colors instead, but asking, do you see any other solution?
You can assign a pseudo element to the containing div.
Like so:
.container:before{
opacity:0.5;
}
You could also convert your hex value to RGB and then use that: RGB to Hex and Hex to RGB
If I have a linear gradient defined in CSS and it appears on the screen as a gradient, does the red value change at a constant rate. (i.e. is its derivative constant for the color red for the whole length of the gradient). The same question for color components of green and blue.
The gradient may be from any color to any other color. One color may be #FF4400 and the other is #5599FF, for example (just random colors). Does the red component change linearly?
I am referring to CSS3 linear gradients, one example is here: http://dev.opera.com/articles/view/css3-linear-gradients/
Yes, the rate of change in each color component value between two color-stops in a gradient is linear. From the spec:
At each color-stop, the line is the color of the color-stop. Between two color-stops, the line's color is linearly interpolated between the colors of the two color-stops, with the interpolation taking place in premultiplied RGBA space.
ยง4.4. Gradient Color-Stops of the Image Values module contains details and examples, which I believe address your question in depth.
Some browsers currently have trouble interpolating gradient color-stops correctly, though. See this question.
Is it possible to separate a photo's RGB channels in a way that if you stack the separate images on top of each other (say in an HTML page with the images being a transparent "channel" stacked on top of each other), you can see the original image the way it was?
I tried grabbing a selection from each channel and making making it a separate layer in that channel's color, but it seems like I'm missing something, or the way channels work is more complicated than I think.
The reason I ask is because if I could get this to work, then I could manipulate the opacity of each color separately using CSS and get some neat effects (without using canvas).
I've answered my own uncertainty on this:
This process cannot recreate the original image.
(Which is what JamWaffles said in short in his comment.) Here's the explanation why:
You can take a photo and split out the RGB channels from software like Photoshop.
You can manipulate those gray scale channels in such a way to add have various alpha levels of Red, Green, and Blue and save that into a .png. So far, so good.
You cannot recombine them correctly by layering in css. Assume you have some area of the photo that is white. Note the following:
Alpha Channel Combining (is additive)
Red Layer (255, 0, 0) + Green Layer (0, 255, 0) + Blue Layer (0, 0, 255) = You see RGB(255, 255, 255), i.e. white.
CSS Layer Combining (is not additive; it will cover lower layers)
Red (top) Layer (255, 0, 0) + Green (middle) Layer (0, 255, 0) + Blue (bottom) Layer (0, 0, 255) = You see RGB(255, 0, 0), i.e. only the top layer, which is red, as it covers the green and blue layers at the point where it is 100% opaque.
So until such a time as css may offer an option to have layers "add" to one another rather than "cover" one another, then such an idea is not possible. Now that is not to say you could not achieve some rather interesting effects with layered .pngimages with monochromatic colors, and later manipulating opacity of the layers further through css, you just cannot ever recreate the image through the stacking of the channels in css.
According to this specification: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode
CSS can support color blending, it just isn't implemented on most browsers. However many
browsers support the use of color blending in the '2d' canvas context. This blog post
demonstrates the use of canvas for color blending animations and an very basic explanation of the idea. http://mackenziestarr.co.nf/blog/?p=7