โ† Back to Blog

What Is a HEX Color Code?

2026-04-01 ยท 5 min read

Introduction to HEX Color Codes

A HEX color code is a standard way to represent colors using hexadecimal numbers, widely used in web design, UI design, and digital art. A standard HEX color consists of a hash sign (#) followed by 6 hexadecimal characters, for example #FF5733. These 6 characters encode the intensity values of the red, green, and blue channels.

Hexadecimal is a base-16 number system that uses 16 symbols: 0โ€“9 and Aโ€“F. In color representation, each pair of hexadecimal characters represents an integer from 0 to 255, corresponding to the intensity of one color channel.

Structure of a HEX Color Code

A standard 6-character HEX color code is divided into three groups of two characters each, representing the red (R), green (G), and blue (B) color channels:

#RRGGBB

#FF5733
  ^^  = Red   (FF = 255)
    ^^ = Green (57 = 87)
      ^^ = Blue  (33 = 51)

Each channel value ranges from 00 (darkest, no color) to FF (brightest, full intensity). The combination of three channels produces over 16 million possible colors (256 ร— 256 ร— 256 = 16,777,216).

Converting Between Hexadecimal and Decimal

In hexadecimal, A=10, B=11, C=12, D=13, E=14, F=15. A two-character hex number is calculated as: first digit ร— 16 + second digit. For example, FF = 15ร—16 + 15 = 255; 80 = 8ร—16 + 0 = 128; 1A = 1ร—16 + 10 = 26.

Understanding this conversion is very useful for manually adjusting colors. When you lower the red channel from FF to 80, the color becomes darker because the red intensity drops from 255 to 128, exactly half the maximum value.

Shorthand: 3-Character HEX Codes

When each pair of characters in a 6-character HEX code is identical, it can be shortened to a 3-character form. For example, #FFCC00 can be written as #FC0, and #AABBCC as #ABC. The CSS parser duplicates each character to restore the full code.

This shorthand format is fully valid in CSS and reduces code size. However, not every color can be shortened โ€” only colors where both characters in each pair are identical support the shorthand form.

HEX with Transparency (8-Character HEX)

CSS also supports 8-character HEX color codes where the last two characters represent the alpha (transparency) channel. For example, in #FF573380, the 80 represents approximately 50% opacity (128/255). FF means fully opaque and 00 means fully transparent. This format is widely supported in modern browsers.

Using HEX Colors in CSS

In CSS, HEX colors can be used in any property that accepts a color value:

/* Background color */
body { background-color: #F0F4F8; }

/* Text color */
h1 { color: #1A202C; }

/* Border */
.card { border: 1px solid #E2E8F0; }

/* With shorthand */
a { color: #06C; } /* equivalent to #0066CC */

HEX format is concise and intuitive, making it one of the most commonly used color representations in CSS. Design tools like Figma and Photoshop typically display HEX values first, making handoff between designers and developers straightforward.

Common HEX Colors Reference

Knowing the HEX values of common colors speeds up development:

Try the free tool now

Use Free Tool โ†’