Skip to content
tooljo Color tools in: Converters
100% in your browser. Nothing you paste is uploaded — all processing runs locally. Read more →

What is a hex color?

4 min read by Samuel Yoo

On this page
  1. Why hex
  2. Where it came from
  3. Reading hex by hand
    1. Saturation level
    2. Hue
  4. Variants you’ll see
    1. #RRGGBB — standard 6-digit
    2. #RGB — 3-digit shorthand
    3. #RRGGBBAA — 8-digit (CSS Color Module 4)
    4. #RGBA — 4-digit (CSS Color Module 4)
    5. 0xRRGGBB — programming form
  5. In code
  6. Common questions
    1. Is hex case-sensitive?
    2. What about alpha?
    3. Is #fff the same as #FFFFFF?
    4. What’s the difference from rgb()?
    5. What about HSL?
  7. Hex gotchas
  8. Try the tools

A hex color is a 6-character (or 3-character) string that encodes a color using hexadecimal digits. #2563eb, #fff, #ff8c00 — you’ve seen them everywhere CSS or design tools specify color.

The format packs three 8-bit RGB (red/green/blue) channels into one compact string:

#  RR  GG  BB
   │   │   └── blue   (00 = none, ff = max)
   │   └────── green
   └────────── red

Each pair of hex digits represents one byte (0–255 in decimal):

#2563eb
 25 = 37    → red
 63 = 99    → green
 eb = 235   → blue
       rgb(37, 99, 235)

Try it: paste any of these into the converter and watch the breakdown.

Why hex

Hexadecimal is base-16. Each digit represents 4 bits, so two digits exactly cover the 8-bit (0–255) range of a single color channel. That’s the whole appeal:

Where it came from

CSS 1 (1996) supported #RRGGBB and rgb() from day one. Hex won the short-form battle because it fits inline (#2563eb is shorter than rgb(37,99,235)) and matches the way display hardware addresses colors at the byte level.

The 3-digit shorthand (#27e → #2277ee) was added for cases where all three channels happen to repeat — useful for primary colors and neutral grays.

Reading hex by hand

Two patterns to recognize at a glance:

Saturation level

Hue

Anything else is a mix.

Variants you’ll see

#RRGGBB — standard 6-digit

The most common form. 16,777,216 distinct colors representable.

#RGB — 3-digit shorthand

Each digit is doubled. #27e → #2277ee. Only useful when each channel happens to be a “double-digit” value.

#RRGGBBAA — 8-digit (CSS Color Module 4)

Adds an alpha channel as the last 2 hex digits. #2563ebcc is the brand blue at 80% alpha (cc = 204 / 255).

#RGBA — 4-digit (CSS Color Module 4)

Same idea as 3-digit but with alpha. #27ec = #2277eecc.

0xRRGGBB — programming form

C, Python, and many other languages use 0x prefix instead of #. Same value, different surface.

In code

// JavaScript — every common operation
const hex = "#2563eb";
const r = parseInt(hex.slice(1, 3), 16);   // 37
const g = parseInt(hex.slice(3, 5), 16);   // 99
const b = parseInt(hex.slice(5, 7), 16);   // 235

const back = "#" + [r, g, b]
  .map(n => n.toString(16).padStart(2, "0"))
  .join("");
// → "#2563eb"
# Python
hex_str = "#2563eb"
r, g, b = (int(hex_str[i:i+2], 16) for i in (1, 3, 5))
back = "#{:02x}{:02x}{:02x}".format(r, g, b)
/* CSS — all valid */
.brand { color: #2563eb; }
.brand { color: #2563ebcc; }   /* with alpha */
.brand { color: rgb(37, 99, 235); }
.brand { color: hsl(220, 83%, 53%); }

Common questions

Is hex case-sensitive?

No. #2563EB = #2563eb. Lowercase is conventional in modern CSS (matches Tailwind, Apple HIG, etc.).

What about alpha?

The 6-digit form has no alpha. To add transparency, either use the 8-digit form (#2563ebcc) or switch to rgba(). They’re equivalent.

Is #fff the same as #FFFFFF?

Yes. Both are pure white.

What’s the difference from rgb()?

None. They encode the same data; pick whichever reads better in your context. For programmatic generation, rgb() is easier to compute component values for. For static stylesheets, hex is more compact.

What about HSL?

HSL is a different color space — it parameterizes the same RGB gamut by hue, saturation, lightness rather than by R/G/B channels. Useful for designing palettes; less useful for raw color literals. See the comparison.

Hex gotchas

Try the tools