CSS 4 Digit Hex Colors

The CSS 4-digit hex color notation is shorthand for the 8-digit hex notation.

Some eight-digit hex colors can be written using a four-digit shorthand. Four-digit shorthand is where you combine the duplicate digits from each color component into one.

This results in a four digit hex number instead of eight.

So instead of the syntax being like this (i.e. eight-digits):

It becomes this:

The R represents the red component.
The G represents the green component.
The B represents the blue component.
The A represents the alpha channel.

Converting 8-Digits into 4-Digits

To convert a eight-digit code into four, simply "dedupe" the duplicate values from each color component.

Here's an example of the same color using both the full hex notation and the shortcut version.

See how we've just deduped the duplicate characters from each color component. We've converted FF to F, CC to C, 00 to 0, and CC to C.

Both of the values in this example result in the same color.

Suitable Colors

Note that you can only use the shorthand method when both values are the same for each of the RGB components.

So you couldn't turn #FC045606 into shorthand because each of the RGB components uses a different value. In this case, the red component uses FC, the green component uses 04, the blue component uses 56, and the alpha channel uses 06. You can't dedupe those, as they are unique values.

Likewise, you can't turn #FFCC9155 into shorthand either, because the green component uses different values. And you can't have a five character shorthand code. It's either four characters (for the shorthand), or eight characters (for the longhand).

However, you can always round digits up or down in order to create a shorthand code. For example, #FF1493EC could become something like #F19E or #F29C or similar if you're not fussy about the precise color.

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).

Web Page Example

Here's a working example of using four-digit hex notation to define colors for a web page. Try changing some values in the hex codes to see how it updates the color.

<!DOCTYPE html>
<title>Example</title>
<style>
body {
    color: #FCBC;
    background: #F19C;
    }
</style>
<h1>Hex Color Example</h1>

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.