CSS HEX Colors
A HEX color writes red, green, and blue as a single #rrggbb value using base-16 digits, the most common way to specify exact colors.
How HEX works
A HEX value starts with a hash and is followed by six digits. The digits come in three pairs, one each for red, green, and blue. Each pair is a base-16 (hexadecimal) number running from 00 up to ff, which is the same as 0 to 255 in decimal.
A HEX color
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #ff6347;
}
</style>
</head>
<body>
<p>This paragraph is tomato colored.</p>
</body>
</html>Reading the pairs
- #000000 is black, all channels at their lowest
- #ffffff is white, all channels at their highest
- #ff0000 is pure red
- #00643c is a deep green: little red, medium green, some blue
The shorthand form
When each pair has two identical digits, you can collapse the value to three digits. So #ffcc00 can be written as #fc0. The browser expands each digit by doubling it.
Three-digit shorthand
<!DOCTYPE html>
<html>
<head>
<style>
.badge {
background-color: #fc0; /* same as #ffcc00 */
}
</style>
</head>
<body>
<span class="badge">New</span>
</body>
</html>Note: HEX and RGB describe colors the same way, just in different notation. #ff6347 and rgb(255, 99, 71) are identical. See RGB Colors for the decimal view.
