CSS 8 Digit Hex Colors
The CSS 8-digit hex color notation allows you to specify RGB colors using hexadecimal values, while at the same time, specifying its transparency.
CSS has always allowed us to apply color to a web page using hexadecimal notation. Hexadecimal notation (or simply, "hex notation") consists of 6 hexadecimal digits that represent the red, green, and blue components of a color.
CSS Color Module Level 4 introduced an eight-digit hex notation. The purpose of an eight-digit hex code is to allow us to add transparency to the color.
How it Works
Eight-digit hex notation works the same as the six-digit notation, in that you provide a six-digit hexadecimal value, prefixed with a hash (
The difference is, eight-digit notation, as the name suggests, adds two more digits. These two digits represent the alpha channel of the color.
The alpha channel is represented by the last two digits.
This last pair of digits are interpreted as a hexadecimal number (just like the other digits). A value of
00 represents a fully transparent color, and a value of
FF represents a fully opaque color.
Eight-digit hex notation consists of a hash symbol (
#), followed by eight characters. The first six characters represent the RGB (red, green, blue) value of the color, the last two represent the alpha chanel of the color.
So, the syntax is like this:
RRrepresents the red component.
GGrepresents the green component.
BBrepresents the blue component.
AArepresents the alpha channel.
So here's an eight-digit hex code for a slightly transparent
CC value is the equivalent of
80% when using a percentage value in other methods.
Web Page Example
Here's a working example of using hex color notation to define colors for a web page. Try changing some values in the hex codes to see how it updates the transparency. For example, replace the
CC with say,
To convert an eight-digit code to four digits, simply dedupe the duplicate values from each color component (including the alpha channel).
See 4-Digit Hex Colors for more information.
You can also use the
rgba() function to provide the decimal equivalent of a transparent color using the RGBA values.
#FFA500CC (slightly transparent orange) could be written as
Each character can be a hexadecimal value from 0 to F. So it can be any of the values in the "Hex..." column of the following table.
|Decimal Value||Hex Equivalent|
Most people in the modern world are used to the decimal system. As shown in this table, the decimal system (which uses base 10), uses digits that go from zero to nine, then repeats by prepending a 1 to the number (resulting in 10, 11, 12, etc), then when it repeats again, it prepends a 2 (resulting in 20, 21, 23, etc), and then a 3, etc.
The hexadecimal system, on the other hand, doesn't need to repeat until it gets to F.
By the way, it's case-insensitive, so you can use uppercase or lower case letters.