Hex colors: Numeric representation for "transparent"?
Solution 1:
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
<hex-color>
is a<hash-token>
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 digits0-9
or lettersa-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 andff
represent a fully opaque color.Example 3
In other words,#0000ffcc
represents the same color asrgba(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 andf
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:
Solution 2:
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 */
}