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

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