# 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 `CC`

with say, `66`

.

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