CSS 3 Digit Hex Colors

The CSS 3-digit hex color notation is shorthand for the 6-digit hex notation.

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

This results in a three digit hex number instead of six.

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

It becomes this:

The R represents the red component.
The G represents the green component.
The B represents the blue component.

Converting 6-Digits into 3-Digits

To convert a six-digit code into three, 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, and 00 to 0.

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 #FC0456 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, and the blue component uses 56. You can't dedupe those, as they are unique values.

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

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

Web Page Example

Here's a working example of using three-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. For example, replace the F with say, 7.

<!DOCTYPE html>
<title>Example</title>
<style>
body {
    color: #FCB;
    background: #F19;
    }
</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.