Glossary Index

HEX Color Code

A six-digit hexadecimal string used to represent a color in the RGB color model, widely used in web design and CSS.

What is a HEX Color Code?

A HEX color code is a six-character string that represents a color using the RGB color model expressed in hexadecimal (base-16) notation. It is written with a # prefix followed by six characters, for example #3B82F6. The six characters are divided into three pairs: the first pair represents the red channel, the second represents green, and the third represents blue. Each pair is a hexadecimal number from 00 (0 in decimal) to FF (255 in decimal).

HEX codes are the most widely recognized color format in web design and have been supported in CSS since CSS1.

Why are HEX Color Codes important?

HEX codes are the most common shorthand for color in web and UI design. Nearly every design tool (Figma, Sketch, Adobe XD), CSS framework, and color picker uses HEX as its default format. They're compact, human-readable (once familiar), and universally supported.

When sharing colors with clients, developers, or other designers, HEX is typically the default format because it's easy to copy and paste and doesn't require any conversion. Use the color converter to quickly translate between HEX and other formats like HSL.

How to read and write HEX Color Codes

The format is #RRGGBB, where:

Some examples:

Shorthand notation: When both digits in each pair are the same, CSS allows a 3-character shorthand. #336699 becomes #369, and #FFFFFF becomes #FFF.

8-digit HEX with alpha: CSS also supports 8-digit HEX codes where the last two characters represent the alpha (opacity) channel. #3B82F680 is the same blue at 50% opacity.

Examples

Common UI colors in HEX:

Best practices

FAQs

HEX and RGB represent the same color model (red, green, blue channels) just in different notation. RGB writes the three channel values as decimal numbers: `rgb(59, 130, 246)`. HEX writes the same values in hexadecimal, concatenated: `#3B82F6`. They are interchangeable and represent the same color.

Yes, with the 8-digit HEX extension. The last two characters represent the alpha channel, where `FF` is fully opaque and `00` is fully transparent. For example, `#3B82F680` is the blue at roughly 50% opacity. However, `rgba()` or `oklch(... / 0.5)` syntax is generally easier to read and write.

Yes. HEX codes (like all standard CSS color formats) assume the sRGB color space. They cannot represent colors outside the sRGB gamut. For wide-gamut displays (like modern Macs with Display P3), you need to use `color(display-p3 r g b)` syntax in CSS or OKLCH values that target the wider gamut.