HEX Color Codes Explained: What They Are and How to Use Them
Last reviewed: June 2026
Quick Answer
A hex color code is a six-digit code starting with a hash, like #FF5733, that tells screens exactly which color to display. Each pair of digits sets the red, green, and blue values from 00 to FF. Designers and developers use hex codes in CSS and design tools to reproduce precise, consistent colors across every screen.
Advertisement
What Is a HEX Color Code?
A HEX color code is a six-character code that represents a color using the hexadecimal number system (MDN Web Docs). 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 (W3C).
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. For other free browser-based utilities that speed up front-end work, IWantFreeTools.com gathers a range of developer tools in one place.
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.
If you would rather work with a recognizable name than a string of digits, our color naming guide explains how to turn any HEX value into a human-readable color name.
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.
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a six-character code using the hexadecimal number system that represents a color in web design. It is structured as #RRGGBB, where RR is the red channel (00 to FF), GG is the green channel, and BB is the blue channel. For example, #FF0000 is pure red, #FFFFFF is white, and #000000 is black.
Can you shorten a HEX color code?
Yes. When both characters in each pair are identical, the six-character HEX can be shortened to three characters. #FFFFFF becomes #FFF, #FF0000 becomes #F00, and #000000 becomes #000. Not all HEX codes can be shortened, only those where each pair repeats the same digit.
How do I use HEX colors in CSS?
Paste the HEX code directly into any CSS property that accepts a color value: color, background-color, border-color, box-shadow, and more. Use the # symbol followed by the six-character code. For example, color: #7C3AED; or background-color: #FFFFFF;.