Opacity in Hex colors of CSS

Question

How to apply opacity in Hex colors ?

I am working with CSS Hex colors. I am trying to apply opacity in Hex colors. I need #78909c with opacity 0.2.

Answer 1

The hex representation of colors supports the alpha channel to set opacity.

so, take any color in hex e.g. #ffffff and append 00 to ff (in hexadecimal representation) for opacity, i.e. #ffffff00 - #ffffffff

for your color: #78909c33

20% implies 33 in hex

Here is a demo

Reference: Hexadecimal notation

Answer 2

HEXA - #RRGGBBAA There's a relatively new way of doing transparency, it's called HEXA (HEX + Alpha). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA

I am not sure about its browser support for now but, you can check the DRAFT Docs for more information.

§ 4.2. The RGB hexadecimal notations: #RRGGBB The syntax of a is a token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).

8 digits The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Example 3 In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue).

4 digits This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

For the most part, Chrome and Firefox have started supporting this: enter image description here