Skip to content
Kolorvia
Color Theory

What Is HEX? A Practical Guide to Hexadecimal Color Codes

HEX codes are the six-digit shorthand browsers and design tools use to represent color. Here's how they're built, and when to reach for HEX over RGB or HSL.

· · 5 min read

On this page

What a HEX code actually is

A HEX color code is a six-digit value, prefixed with a #, that represents a color the same way browsers, design tools, and image editors do internally. Each pair of digits encodes one channel of red, green, and blue on a scale from 00 to FF — that's 0 to 255 in decimal. #FF0000 is pure red: full red, no green, no blue. #000000 is black, and #FFFFFF is white.

Why hexadecimal instead of plain numbers

Hexadecimal (base 16) packs the 0–255 range for each channel into exactly two characters, using 0–9 and A–F. That's why HEX codes are always six characters long for RGB — two per channel — rather than a variable-length list like rgb(255, 0, 0). It's compact, easy to copy and paste, and has been the standard way to specify color in HTML and CSS since the early web.

Shorthand and alpha notation

When both digits in each pair match, CSS allows a three-character shorthand: #F00 is identical to #FF0000. There's also an eight-digit variant, #RRGGBBAA, where the final pair adds an alpha (transparency) channel — #FF000080 is red at roughly 50% opacity.

When to reach for HEX vs. RGB or HSL

HEX is ideal when you need to store or share an exact, unambiguous color value — in a design system, a brand guideline, or a CSS variable. RGB and HSL are usually easier to reason about when you're actively adjusting a color: HSL in particular separates hue, saturation, and lightness, which makes it simpler to create a lighter or more muted version of a color without recalculating three separate numbers. All three notations describe the same underlying color space; converting between them is lossless.

Reading a HEX code at sight

With a little practice a HEX code stops being noise and starts being a description. Read it in pairs: #FF6347 is red FF (maxed), green 63 (moderate), blue 47 (low) — a warm orange-leaning red (it's the named color tomato). A few instant patterns:

  • All three pairs equal = gray. #808080 is the exact middle gray; #EEEEEE is a near-white; #111111 a near-black.
  • One dominant pair = that hue family. High red with some green and no blue lands in oranges and yellows; high blue with some green gives teals and cyans.
  • Pairs close together = muted. The closer the three channels sit to each other, the closer the color is to gray — the spread between channels is essentially saturation.
  • 00 or FF anywhere = an edge. Fully saturated colors live on the surface of the RGB cube, with at least one channel maxed or zeroed.

Paste any code into a color page to see this decomposition done for you, with every derived value alongside.

The math, worked once

Hexadecimal digits run 0–9 then A–F, so each digit carries 16 values and a pair carries 16 × 16 = 256. To decode a pair by hand, multiply the first digit by 16 and add the second: 4A → 4 × 16 + 10 = 74. Three channels of 256 values give 256³ = 16,777,216 possible six-digit codes — every one a distinct sRGB color. That's also why the shorthand form only reaches 4,096 of them (16³): #F00, expanded by doubling each digit to #FF0000, can only land on values whose pairs repeat.

Values worth memorizing

A handful of codes come up so often they're worth knowing cold: #000000 and #FFFFFF (the extremes), #FF0000 / #00FF00 / #0000FF (the pure primaries), #808080 (mid gray), and #767676 — the lightest gray that still passes WCAG AA as body text on white, which is why it appears in so many design systems. CSS also defines 148 named colors (tomato, rebeccapurple, cornflowerblue) that are nothing more than fixed HEX values with friendlier handles.

Gotchas that bite in real code

  • Case never matters. #ff6347 and #FF6347 are identical; pick one convention per codebase for clean diffs.
  • The # is required in CSS but often stripped in URLs and config files — most tools accept both, but a bare ff6347 in a stylesheet is invalid.
  • 8-digit alpha is not a percentage. In #RRGGBBAA the final pair runs 00FF, so 50% opacity is 80 and 80% is CC — misreading 80 as "80%" is a classic review catch. Our alpha guide covers all the variants.
  • Not every six-character string is a color. #GGGGGG is invalid — only 0–9 and A–F count.

Where the notation came from

HEX color predates CSS itself: the X Window System listed display colors as hexadecimal RGB in the 1980s, and early HTML borrowed the notation directly. It has survived every redesign of web styling since because it encodes exactly what the hardware needs — three bytes, nothing more — and because millions of documents already used it. Newer CSS syntaxes (rgb(), hsl(), oklch()) haven't replaced it so much as wrapped friendlier interfaces around the same underlying values.

Where HEX fits in a modern workflow

HEX remains the interchange format: design tools copy it, version control diffs it cleanly, and every browser and library parses it. But it's a storage notation, not a thinking notation — when you need "this color, but lighter" or an evenly spaced scale, convert to HSL or, for perceptually even results, OKLCH, do the manipulation there, and store the result back as HEX if your toolchain expects it. The converter round-trips all of these notations losslessly, and every color page shows the full set side by side.

Related guides

Try it yourself

Put the theory into practice

Everything this guide explains is built into a free, live tool — try the math yourself.

We use cookies for site preferences and, where enabled, Google Analytics and Google AdSense — which may use cookies to personalize ads based on your visits here and elsewhere. See our Privacy Policy for details. Your color tool inputs are never sent to us regardless of your choice.