CSS 6 Digit Hex Colors

The CSS 6-digit hex color notation allows you to specify RGB colors using hexadecimal values.

The hex color notation is one of the many ways of providing a color value in CSS. It's a popular method, due to its (relatively) short notation, and to the number of colors available.

Hex color notation uses the RGB color model, which adds the red, green, and blue components together to reproduce a color.

While color names can be easier to remember, hexadecimal notation gives you a much greater range of colors. As of this writing, there are 147 color names in the CSS specification. Hexadecimal notation (as with any RGB representation) provides you with access to over 16 million colors.

Syntax

Hexadecimal color notation consists of a hash symbol (#), followed by six characters. The characters represent the RGB (red, green, blue) value 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.

So here's the hexadecimal equivalent of red:

The FF part represents red. The four zeros represent green and blue respectively.

"But hang on... what's that FF doing in there? I thought it was supposed to be a number?"

Yes, and according to the hex system, FF is a number.

The "hex" part is short for hexadecimal. Hexadecimal is a number system that uses base 16 (as opposed to the decimal system which uses base 10). Base 16 — or hexadecimal — typically uses characters 0–9 to represent values zero to nine, and A, B, C, D, E, F to represent values ten to fifteen. These are the characters we use when specifying a color in CSS.

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.

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.

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 color. For example, replace the FF with say, 77.

Hex Shorthand

Some colors can be written using hex shorthand. Hex shorthand is where you combine the duplicate characters into one.

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

See 3-Digit Hex Colors for more information.

Using Decimal

You can also use the rgb() function to provide the decimal equivalent of a color using the RGB values.

For example, #FFA500 (orange) would be written as rgb(255,165,0).

Matching Colors between Models

Here's a chart showing how various hex values correspond to the decimal RGB and named color equivalents. Click on a value to open a test page using that color.