Hex Color Codes Explained: How #RRGGBB Works

You've typed #FF5733 into CSS a hundred times, but what is that string actually saying? A hex color code is just hexadecimal in a familiar disguise: the same base-16 you'd use to read a hex dump, reused to describe how much red, green, and blue make up a color. Once you see the structure, you can read, write, and convert colors in your head — no picker required.

This guide breaks down the #RRGGBB format byte by byte, shows how to convert between hex and RGB by hand and in code, explains the shorthand and 8-digit alpha variants, and clears up the mistakes that trip people up. If you'd rather just grab a value, the hex color converter turns hex into RGB and back instantly.

What a Hex Color Code Represents

Screens build color by mixing three channels of light: red, green, and blue (RGB). Each channel has an intensity from 0 (off) to 255 (full). A hex color code packs those three numbers into one compact string.

Take #FF5733 apart:

So #FF5733 means red 255, green 87, blue 51 — a warm orange. The leading # just marks the value as a color literal; it carries no numeric meaning.

Why hexadecimal? Because each channel's range, 0–255, is exactly one byte, and one byte is precisely two hex digits (00 to FF). Three channels become six hex digits — tidy, fixed-width, and unambiguous. It's the same one-byte-equals-two-hex-digits idea behind hex to ASCII conversion, applied to color instead of text.

Reading the Pairs

Each two-digit pair runs from 00 (none of that color) to FF (full). A handful of anchor values make hex colors readable at a glance:

• 00 = 0 (channel off)
• 80 = 128 (roughly half)
• FF = 255 (channel maxed)

From there you can reason about any color:

• #FFFFFF — all three channels full → white.
• #000000 — all three off → black.
• #FF0000 — only red full → pure red.
• #00FF00 — only green → pure green.
• #0000FF — only blue → pure blue.
• #808080 — equal mid values → mid gray.

Any time all three pairs are equal (#RRRRRR where R=G=B), you get a shade of gray — no single channel dominates, so there's no hue.

Converting Hex to RGB by Hand

To convert a pair to decimal, multiply the first digit by 16 and add the second (where A–F are 10–15). For #57:

5 × 16 + 7 = 87

Run that on each pair of #FF5733:

• FF → 15 × 16 + 15 = 255
• 57 → 5 × 16 + 7 = 87
• 33 → 3 × 16 + 3 = 51

Result: rgb(255, 87, 51).

Going the other way (RGB → hex), convert each channel to two hex digits, zero-padding values under 16. For rgb(87, 0, 51): 87 = 57, 0 = 00, 51 = 33, giving #570033. The zero-padding is essential — drop the leading zero on 00 and #570033 collapses to a wrong, five-digit string.

Converting in Code

JavaScript

function hexToRgb(hex) {
  hex = hex.replace(/^#/, "");
  // expand 3-digit shorthand to 6 digits
  if (hex.length === 3) {
    hex = hex.split("").map(c => c + c).join("");
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255,
  };
}

function rgbToHex(r, g, b) {
  return "#" + [r, g, b]
    .map(c => c.toString(16).padStart(2, "0"))
    .join("");
}

console.log(hexToRgb("#FF5733"));      // { r: 255, g: 87, b: 51 }
console.log(rgbToHex(255, 87, 51));    // #ff5733

Python

def hex_to_rgb(hex_code):
    hex_code = hex_code.lstrip("#")
    if len(hex_code) == 3:                       # shorthand
        hex_code = "".join(c * 2 for c in hex_code)
    return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4))

def rgb_to_hex(r, g, b):
    return "#{:02X}{:02X}{:02X}".format(r, g, b)

print(hex_to_rgb("#FF5733"))    # (255, 87, 51)
print(rgb_to_hex(255, 87, 51))  # #FF5733

The bit-shifting in JavaScript and the slicing in Python are just two ways to peel off each byte — the same operation you'd do mentally with the pairs.

Shorthand and Alpha Variants

3-digit shorthand

CSS lets you write a 3-digit hex color when each pair has two identical digits. Each digit is duplicated, not padded:

• #F53 expands to #FF5533 (not #0F0503).
• #FFF → #FFFFFF (white).
• #000 → #000000 (black).

Shorthand only works when all three channels happen to be doubled digits, so #FF5733 has no 3-digit form.

8-digit hex (with alpha)

Modern CSS supports an alpha channel for transparency, appended as a fourth pair: #RRGGBBAA.

• AA = FF → fully opaque.
• AA = 00 → fully transparent.
• AA = 80 → about 50% opacity.

So #FF573380 is the same orange at roughly half opacity. There's also a 4-digit shorthand (#RGBA) that expands the same way as the 3-digit form.

Common Mistakes

• Dropping zero-padding. Channel value 10 is 0A, not A. Forgetting the leading zero shifts every following digit and corrupts the color.
• Confusing shorthand with truncation. #F53 does not mean "the first three digits of a 6-digit code." It means each digit is doubled. Truncating a 6-digit code gives a different color.
• Mixing up channel order. Hex colors are red-green-blue. Some image and embedded formats store color as BGR or ARGB; if your reds and blues look swapped, the byte order differs.
• Assuming hex colors and text hex are different things. They aren't — both are base-16. FF is 255 whether it's a red channel or a byte of ASCII. Only the interpretation changes.
• Case anxiety. Hex is case-insensitive: #ff5733 and #FF5733 are identical. Lowercase is the CSS convention, but neither is wrong.

Why Hex Won the Web

You could write every color as rgb(255, 87, 51), and CSS supports that. But hex codes are shorter, fixed-width, and trivial to copy between design tools, code, and documentation. They map cleanly onto how the data is actually stored — three bytes — so there's no rounding or ambiguity. The same compactness that makes hexadecimal the default for reading raw bytes makes it the default for color on the web.

FAQ

What does a hex color code like #FF5733 mean?

It specifies a color by its red, green, and blue intensities in hexadecimal. The six digits split into three pairs — FF (red = 255), 57 (green = 87), 33 (blue = 51) — each ranging from 00 (off) to FF (full). #FF5733 is therefore a warm orange. The leading # simply marks it as a color literal.

How do I convert a hex color to RGB?

Split the six digits into three pairs and convert each from base-16 to decimal: multiply the first digit by 16 and add the second. #FF5733 becomes red 255, green 87, blue 51, i.e. rgb(255, 87, 51). In code, parseInt("FF", 16) in JavaScript or int("FF", 16) in Python does each pair, or use the hex color converter for an instant result.

What's the difference between #F53 and #FF5533?

They're the same color. The 3-digit shorthand duplicates each digit, so #F53 expands to #FF5533. Shorthand is only possible when every channel is a doubled digit; a value like #FF5733 can't be shortened. Importantly, shorthand is duplication, not truncation — don't confuse it with chopping a 6-digit code.

What is the 8-digit hex color format?

It's #RRGGBBAA, where the fourth pair is the alpha (opacity) channel. FF is fully opaque, 00 fully transparent, and values in between are partial transparency — #FF573380 is an orange at about 50% opacity. Modern browsers support it in CSS, along with a 4-digit #RGBA shorthand.

Are hex color codes case-sensitive?

No. #FF5733, #ff5733, and #Ff5733 all describe the identical color, because hexadecimal digits A–F mean the same value regardless of case. Lowercase is the common CSS style, but tools and browsers accept either.

Why use hexadecimal for colors instead of plain numbers?

Each color channel ranges 0–255, which is exactly one byte and exactly two hex digits, so a full RGB color fits in a fixed six-character string with no padding ambiguity. Hex codes are more compact than rgb() notation, easy to copy between design and code, and map directly to how color is stored in memory — the same reasons hexadecimal is used to represent bytes everywhere else in computing.

Conclusion

A hex color code is hexadecimal doing exactly what it always does — representing bytes — applied to the red, green, and blue channels of a color. Read it as three pairs from 00 to FF, convert each pair to a 0–255 value, and you can translate any color between hex and RGB by hand. Shorthand duplicates digits, the optional fourth pair adds opacity, and case never matters.

Once the #RRGGBB structure clicks, picking and editing colors becomes a quick mental calculation instead of guesswork. When you want it done for you, the hex color converter handles hex-to-RGB and back in one click — and the underlying base-16 is the very same system behind every other hex tool on this site.