HEX Color Codes Explained: What They Are and How to Use Them
What Is a HEX Color Code?
A HEX color code is a six-character code that represents a color using the hexadecimal number system. You have almost certainly seen them in CSS files, design tools, and browser DevTools: #FF0000 for red, #FFFFFF for white, #000000 for black. They are the standard way to specify colors in web design and are supported by every browser without exception.
The "hex" in HEX stands for hexadecimal, a base-16 number system. While our standard decimal system uses digits 0 to 9, hexadecimal adds A through F to represent values 10 through 15. This means a single hexadecimal character can represent 16 different values (0-9 and A-F), compared to 10 in decimal.
How to Read a HEX Code
A HEX color code is always structured as #RRGGBB, where the six characters split into three pairs:
- First two characters (RR): red channel, from 00 (no red) to FF (full red)
- Middle two characters (GG): green channel, from 00 to FF
- Last two characters (BB): blue channel, from 00 to FF
Each pair is a number in hexadecimal. 00 in hex is 0 in decimal. FF in hex is 255 in decimal. So the full range of each channel is 0 to 255, exactly matching the RGB color model.
Some common examples:
#FF0000 Pure red: max red (FF), no green (00), no blue (00)
#00FF00 Pure green: no red, max green, no blue
#0000FF Pure blue: no red, no green, max blue
#FFFFFF White: max all three channels
#000000 Black: zero on all three channels
Shorthand HEX Codes
When both characters in each pair are identical, you can abbreviate to a 3-character shorthand. #AABBCC becomes #ABC. #FF0000 becomes #F00. #FFFFFF becomes #FFF. #000000 becomes #000. Browsers expand shorthand automatically by doubling each character: #F00 becomes #FF0000.
Not every HEX code has a valid shorthand. #7C3AED cannot be shortened because the characters in each pair are different (7 and C, 3 and A, E and D). Only codes where each pair is a repeated character -- like #FF, #88, #00 -- can use shorthand notation.
Using HEX Colors in CSS
HEX colors are used directly in CSS property values wherever a color is expected:
background-color: #7C3AED;
color: #FFFFFF;
border: 1px solid #E4E4E7;
}
.heading {
color: #18181B;
}
.muted-text {
color: #71717A;
}
They work in all CSS properties that accept color values: color, background-color, border-color, outline-color, box-shadow, text-decoration-color, and more. HEX is the most common format you will see in production CSS codebases, particularly in older code written before HSL became widely adopted.
HEX with Opacity: 8-Digit HEX
Standard HEX codes are 6 digits and fully opaque. CSS also supports an 8-digit HEX format that adds an alpha (transparency) channel as the final two characters: #RRGGBBAA.
#7C3AEDCC /* 80% opacity (CC in hex = 204, about 80% of 255) */
#7C3AEDFF /* fully opaque (same as #7C3AED) */
#7C3AED00 /* fully transparent */
This is supported in all modern browsers. For compatibility with older code, rgba() is the traditional alternative: rgba(124, 58, 237, 0.5) for 50% opacity. Both approaches produce identical results in modern browsers.
Where to Find HEX Color Codes
Browser DevTools (F12 in Chrome): click any element, look at the color values in the Styles panel. You can click the color swatch to switch between HEX, RGB, and HSL formats.
Figma and design tools: select any element and look at the color panel on the right. Figma shows HEX by default and allows switching to other formats.
This tool: use the Color Picker to pick any color and get its HEX code instantly. Use the HEX to RGB converter to convert between formats.
Why Designers Prefer HEX
HEX is compact, unambiguous, and copyable as a single string. It is easy to paste between tools without parsing. Design tokens, CSS variables, JSON color definitions, and most design system files all use HEX as the standard format. When handing off colors between design and development, HEX is the lingua franca.