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.
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:
RRrepresents the red component.
GGrepresents the green component.
BBrepresents the blue component.
So here's the hexadecimal equivalent of
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.
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|
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,
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.
You can also use the
rgb() function to provide the decimal equivalent of a color using the RGB values.
#FFA500 (orange) would be written as
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.
|Color Name||Hex Code
|Color Name||Hex Code