HEX Color Code

A base-16 notation for an RGB color. Compact, precise and universally supported in CSS, design tools and documentation.

Short answer
A HEX color is a six-digit hexadecimal number that encodes an RGB color. Each pair of characters represents one channel (red, green, blue) as a value from 00 to FF. For example, #4F46E5 means red = 0x4F, green = 0x46, blue = 0xE5.

Structure of a HEX code

Take the color #4F46E5. It is three pairs of hexadecimal digits, one for each channel:

# 4F 46 E5
  │   │   └── Blue  = 0xE5 = 229
  │   └────── Green = 0x46 = 70
  └────────── Red   = 0x4F = 79

Result: rgb(79, 70, 229)

Each pair ranges from 00 to FF, which in decimal is 0 to 255. That is why HEX and RGB describe exactly the same color.

Format variations

FormatExampleChannelsUse
3-digit #4AE RGB (short form) Quick shorthand when each channel has a repeated digit
4-digit #4AE8 RGBA (short form) HEX shorthand with alpha
6-digit #4F46E5 RGB Standard CSS hex
8-digit #4F46E580 RGBA Hex with alpha (50% in this example)

3-digit and 4-digit shorthand

When each channel value can be expressed with a single repeated hexadecimal digit, the code can be shortened. Each character is doubled to expand back to the full form.

ShortExpandedSame color?
#ABC#AABBCCYes
#F00#FF0000Yes — pure red
#369#336699Yes
#4F46E5—Cannot be shortened (no repeated digits)

8-digit HEX with alpha

An 8-digit HEX adds two more digits for the alpha channel. The format is #RRGGBBAA:

#4F46E5FF  → fully opaque
#4F46E580  → ~50% opacity
#4F46E500  → fully transparent

AA / FF = alpha value (e.g. 0x80 / 0xFF = 128 / 255 ≈ 0.5)

Reading HEX codes at a glance

With practice, some patterns become recognizable:

  • Larger numbers = brighter channel. #FF0000 is red at full; #7F0000 is half.
  • Equal channels produce gray. #808080 is mid gray; #000000 is black; #FFFFFF is white.
  • Dominant channel = dominant hue. A higher red value than green and blue means the color leans red.
  • Nearby values feel similar. #4F46E5 and #5050E6 are almost indistinguishable.

HEX vs RGB vs HSL

FormatExampleBest for
HEX#4F46E5Compact code, CSS, docs
RGBrgb(79, 70, 229)Readable, dynamic computation
HSLhsl(243 75% 59%)Adjusting hue, saturation, lightness by hand

All three describe the same color. HEX is more compact, RGB is more readable, HSL is more intuitive for manual adjustment.

Practical syntaxes in CSS

CSS 
color: #4F46E5;
background: #4F46E580; /* 50% alpha */
border-color: #ABC; /* shorthand for #AABBCC */

/* Case-insensitive: both work */
color: #4F46E5;
color: #4f46e5;

Continue reading

RGB
The model behind HEX.
HSL
The intuitive alternative.
Color Converter
Convert HEX to any format.
HEX Guide
Deeper practical guide.

Frequently asked questions

What is a HEX color?

A HEX color is a hexadecimal representation of an RGB color. A 6-digit hex code is split into three pairs of characters, each pair representing a red, green or blue channel value from 0 to 255.

How do I read a HEX code?

A 6-digit hex code such as #4F46E5 is read as three pairs: 4F (red), 46 (green), E5 (blue). Each pair is a base-16 number from 00 to FF, corresponding to a decimal value from 0 to 255.

What is the difference between 3-digit and 6-digit HEX?

3-digit hex codes are a shorthand where each character is duplicated to produce 6-digit codes. #ABC is the same as #AABBCC. Shorthand only works when each channel has a repeated digit.

What is 8-digit HEX?

8-digit hex codes add an alpha channel: #RRGGBBAA. AA is the alpha value from 00 (fully transparent) to FF (fully opaque). This allows hex colors to carry transparency, matching RGBA and HSLA.

Is HEX case-sensitive?

No. #4F46E5 and #4f46e5 describe exactly the same color. Both conventions are valid in CSS; many design systems prefer uppercase for readability in documentation.