Hex colors: Numeric representation for transparent ?
Transparency is a property outside the color itself, and it's also known as alpha
component. You can't code transparency as pure RGB (which stands for red-green-blue channels), but you can use the RGBA notation, in which you define the color + alpha channel together:
color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */
If you want "transparent", just set the last number to 0, regardless of the color. All of the following result in "transparent" even though the color part is set to 100% red, green and blue respectively:
color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */
There's also the HEXA notation (or RRGGBBAA) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal:
color: #FF000080; /* red at 50% opacity */
Additionally, if you just want a transparent background, the simplest way to do it is:
background: transparent;
You can also play with opacity
, although this might be a tad too much and have unwanted side effects in your case:
.half {
opacity: 0.5;
filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}
Transparent ARGB hex value
Transparency is controlled by the alpha channel (AA
in #AARRGGBB
). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.
To get a fully transparent color set the alpha to zero. RR
, GG
and BB
are irrelevant in this case because no color will be visible. This means #00FFFFFF
("transparent White") is the same color as #00F0F8FF
("transparent AliceBlue").
To keep it simple one chooses black (#00000000
) or white (#00FFFFFF
) if the color does not matter.
In the table you linked to you'll find Transparent
defined as #00FFFFFF
.
Hex transparency in colors
Here's a correct table of percentages to hex values for opacity. E.g. for 50% white you'd use #80FFFFFF. To think in terms of transparency instead, flip the order of the percentages (more opaque = less transparent).
% | Hex |
---|---|
100% | FF |
95% | F2 |
90% | E6 |
85% | D9 |
80% | CC |
75% | BF |
70% | B3 |
65% | A6 |
60% | 99 |
55% | 8C |
50% | 80 |
45% | 73 |
40% | 66 |
35% | 59 |
30% | 4D |
25% | 40 |
20% | 33 |
15% | 26 |
10% | 1A |
5% | 0D |
0% | 00 |
What is the HEX code for Transparent color?
There is no such thing; transparency is done via another channel.
Opacity in Hex colors of CSS
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
What is the color code for transparency in CSS?
how to make transparent elements with css:
CSS for IE:
filter: alpha(opacity = 52);
CSS for other browsers:
opacity:0.52;
Hex representation of a color with alpha channel?
In CSS 3, to quote from the spec, "there is no hexadecimal notation for an RGBA value" (see CSS Level 3 spec). Instead you can the use rgba() functional notation with decimals or percentages, e.g. rgba(255, 0, 0, 0.5) would be 50% transparent red. RGB channels are 0-255 or 0%-100%, alpha is 0-1.
In CSS Color Level 4, you can specify the alpha channel using the 7th and 8th characters of an 8 digit hex colour, or 4th character of a 4 digit hex colour (see CSS Color Module Level 4 spec*)
As of July 2022, >95% of users can be expected to understand the #RGBA format
It has been supported since:
- Firefox 49, released Sept 2016 (Mozilla bug 567283).
- Safari 10, released Sept 2016.
- Chrome 62, released Oct 2017. For earlier versions you could enable experimental web features to use this syntax. See Chromium Issue 618472 and Webkit bug 150853.
- Opera 52, released March 2018 (or Opera 39 when experimental web features are enabled).
- Edge 79, released Jan 2020 (the first version of Edge based on Chromium)
- Samsung Internet 8.2, released Dec 2018
- Android P (your app must target Android P or newer)
It is not supported in:
- IE
- Original Edge (version numbers up to and including 18)
- Opera Mini
- UC Browser
Up to date browser support information is available on CanIUse.com
Add opacity to hex representation of color
8 digit hexadecimal color notation in CSS has the following format:
#RRGGBBAA
RR - red
GG - green
BB - blue
AA - alpha
You should use:
#EB575726 (for your 15% red)
Related Topics
How to Customize the HTML5 Input Range Type Looks Using CSS
Issue When Centering Vertically with Flexbox When Heights Are Unknown
How to Remove Border from Specific Primefaces P:Panelgrid
CSS List Item Width/Height Does Not Work
Css: Background-Color on Multi-Line Text
Media Queries - Mobile VS Desktop Browser
How to Add Different CSS Style to Every Nth Element, Depending on N Using Less
Change the State According to Event in Reactjs
How to Select First and Last Td in a Row
CSS Spec: Block-Level Box, Block Container Box and Block Box
How to Rotate Text Left 90 Degree and Cell Size Is Adjusted According to Text in HTML
How to Remove All Default Webkit Search Field Styling
Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked
How to Make an Inset Drop Shadow in Svg
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Change Text Color to White on Any Non-White Background
Less Loops Used to Generate Column Classes in Twitter - How Do They Work