Colors Hex Color Codes
A hex color code packs the same red, green, and blue values used in RGB into a compact six-character string written in base-16, with a shorthand form and an optional alpha channel.
What a Hex Code Actually Encodes
A hex color like #4682DC is simply RGB written in a different number system. Instead of base-10 (the 0-9 digits we normally count with), hex uses base-16, which adds the letters A through F to represent 10 through 15. Two hex digits can represent any value from 0 to 255 — the exact range of an RGB channel — so a 6-digit hex code is just three RGB channels squeezed together: #RRGGBB.
Hex Equals RGB
<!DOCTYPE html>
<html>
<head>
<style>
.panel-a {
background-color: #FF0000; /* same as rgb(255, 0, 0) */
}
.panel-b {
background-color: #4682DC; /* same as rgb(70, 130, 220) */
}
</style>
</head>
<body>
<div class="panel-a">Panel A</div>
<div class="panel-b">Panel B</div>
</body>
</html>The 3-Digit Shorthand
When both hex digits within every channel of a color are identical, CSS lets you shorten the whole code to three digits, one per channel, and the browser doubles each one back up. So #F00 expands to #FF0000, and #369 expands to #336699. This shortcut only works when both digits of a channel match each other; it can't represent arbitrary values like #4682DC, where the digit pairs (46, 82, DC) aren't repeats.
- #F00 expands to #FF0000 (red)
- #0F0 expands to #00FF00 (green)
- #369 expands to #336699 (a muted blue)
- #FFF expands to #FFFFFF (white)
- #000 expands to #000000 (black)
Adding Transparency: 8-Digit Hex
Modern browsers also support an 8-digit form, #RRGGBBAA, which adds an alpha channel the same way hex adds every other channel: as two more hex digits, 00 to FF. Unlike RGBA's alpha (which is a decimal from 0 to 1), hex alpha uses the same 0-255-style scale as the color channels — so FF means fully opaque and 00 means fully transparent, with 80 landing close to 50% opacity.
8-Digit Hex With Alpha
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
background-color: #000000CC; /* black at roughly 80% opacity */
}
</style>
</head>
<body>
<div class="tooltip">Tooltip text</div>
</body>
</html>Exercise: Colors HEX
A 6-digit HEX color code is split into three pairs. What do those pairs represent?
