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.

Just as the rgba(), hsla(), and hwb() functions allow us to specify an alpha channel, so too, does the eight-digit hexadecimal color notation.

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 (#) symbol.

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.

Syntax

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:

The RR represents the red component.
The GG represents the green component.
The BB represents the blue component.
The AA represents the alpha channel.

So here's an eight-digit hex code for a slightly transparent red:

The 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 66 with say, 99.

<!DOCTYPE html>
<title>Example</title>
<style>
body {
    background: url('/pix/samples/bg2.png') beige;
    font-size: 2em;
 }
article { 
    background-color: #32CD3266;
    border: 5px solid olive;
    margin: 20px;
    text-align: center;
    }
</style>
<article>
<h1>Stars</h1>
</article>

Four-Digit Shorthand

Just as the six-digit hex notation allows for a three-digit shorthand notation, the eight-digit notation allows for a four-digit shorthand notation.

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.

Using Decimal

You can also use the rgba() function to provide the decimal equivalent of a transparent color using the RGBA values.

For example, #FFA500CC (slightly transparent orange) could be written as rgba(255,165,0,0.8).

Possible Values

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
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F

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.