HEX Color Codes: Notation, Shorthand and Alpha

A hex color code is a compact way to write a color as three numbers — one for red, one for green, one for blue — using base 16 instead of base 10. The format is always a hash sign followed by six characters: #RRGGBB. The first two characters give the red channel, the middle two give green, and the last two give blue. Each pair runs from 00 (none of that channel) to FF (full intensity of that channel). Put 00 in every pair and you get black; put FF in every pair and you get white.

The generator above produces a fresh hex code on every press. Copy the value straight into CSS, a design tool, or a color picker and it will work without any conversion. The six-character string is the same thing a browser reads when you write color: #3B82F6 in a stylesheet. Understanding what the characters mean makes it easy to read colors at a glance, adjust them by hand, and spot typos before they reach a browser.

What each character pair actually means

Take the code #3B82F6. Split it into three pairs: 3B, 82, F6. Each pair is a two-digit hexadecimal number. In hexadecimal the digits run 0–9 then A–F, so A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. To convert 3B to decimal: the left digit 3 is worth 3 × 16 = 48, and the right digit B is worth 11 × 1 = 11, giving 48 + 11 = 59. So red = 59. Apply the same rule to 82: 8 × 16 + 2 × 1 = 128 + 2 = 130. Green = 130. Then F6: 15 × 16 + 6 = 240 + 6 = 246. Blue = 246. The full color is rgb(59, 130, 246), which is the Tailwind “blue-500” shade.

Going the other direction is equally mechanical. To write the decimal number 59 as two hex digits: divide by 16 to get 3 remainder 11. The quotient 3 is the left digit; the remainder 11 maps to B. Result: 3B. This is the only arithmetic involved, and once you have done it a handful of times the most common pairs become recognizable by sight: FF is always 255, 80 is always 128, CC is 204, and 00 is always 0.

The reason hex rather than decimal became the standard is purely typographic. A single byte holds values from 0 to 255. In decimal that takes up to three characters per channel — rgb(255, 255, 255) is fifteen characters including punctuation. In hex, one byte always fits in exactly two characters, so three bytes always fit in exactly six, giving the clean #FFFFFF. Compact, scannable, and trivially copy-pasteable. The alignment between byte boundaries and hex pairs is the whole reason the notation stuck, not any inherent virtue of base 16 itself.

The 3-digit shorthand: when you can and cannot use it

CSS allows a three-character shorthand when every pair in the full code consists of the same two characters. #FF0000 can be written #F00 because each pair — FF, 00, 00 — is a doubled digit. The browser expands it back to #FF0000 before rendering. The rule is simple: take each single character and double it. #ABC expands to #AABBCC. #369 expands to #336699.

The shorthand is only valid when all three pairs qualify. If even one pair has two different characters, the shorthand cannot be used for that color. #3B82F6 cannot be shortened because 3B, 82, and F6 each have distinct digits. Trying to write it as three characters would produce a different color entirely — for example, #3BF would expand to #33BBFF, which is a light sky-blue, not the blue-500 you wanted. This is one of the most common sources of accidental wrong colors: shortening a code that does not qualify. When in doubt, use the full six characters.

The shorthand is most useful in CSS custom properties and utility tokens where you know the values by heart. Common candidates are pure primaries (#F00, #0F0, #00F), pure black and white (#000, #FFF), and the sixteen “web-safe” colors that all use 0, 6, 9, C, or F in both positions of every pair. In practice, most design-system palettes use full six-digit codes because the extra two characters cost nothing and eliminate any ambiguity when someone else reads the file.

8-digit hex codes and alpha transparency

CSS Color Level 4 added an eight-digit form: #RRGGBBAA. The last two characters are the alpha channel. AA = FF means fully opaque; AA = 00 means fully transparent; AA = 80 is roughly 50% opacity (128 out of 255). The same two-character hexadecimal arithmetic applies: 80 in hex is 128 in decimal, and 128 ÷ 255 ≈ 0.502, which is why #3B82F680 and rgba(59, 130, 246, 0.502) describe the same color at the same opacity.

When to use the 8-digit form versus rgba() is mostly a matter of context. In a CSS file where you are already writing hex codes for all solid colors, #3B82F680 keeps the notation consistent. In a JavaScript object or a template literal where you are computing the opacity dynamically, rgba() is easier to parameterize. Both are valid CSS and both mean the same thing to the browser. The 4-digit shorthand also exists — #RGBA — following the same doubling rule as 3-digit codes: #F008 expands to #FF000088.

One practical note: not every tool that reads hex codes handles the 8-digit form. Some older SVG editors, PDF exporters, and design-to-code plugins silently strip the alpha pair or interpret it as part of the color. If you are copying a hex value into a tool and the color looks wrong, check whether the tool supports 8-digit hex or expects a separate opacity field. The safe fallback is always to split the color and the opacity into their own properties — color and opacity in CSS, or fill and fill-opacity in SVG — rather than relying on the 8-digit form for cross-tool compatibility.

Case sensitivity, leading zeroes, and common mistakes

CSS treats hex color codes as case-insensitive. #ff0000, #FF0000, and #Ff0000 all produce the same red. In practice, most codebases pick one convention and stick to it. All-uppercase is slightly easier to scan because the letters A–F are visually distinct from digits at a glance; all-lowercase is what many CSS formatters default to. What matters is consistency within a project, not which case you choose.

Leading zeroes are required when a channel value is below 16 (single-digit in hex). The color with red = 5, green = 0, blue = 12 must be written #05000C, not #5000C — the latter has only five characters and browsers will ignore the entire declaration. Five-character codes are the most silent failure mode in hex color notation: no error appears in the console, the property simply has no effect, and the element inherits whatever color it had before. Always count your characters before copying a value into production code.

A related mistake is using the JavaScript number literal prefix 0x instead of the CSS hash. In JavaScript you might write 0xFF0000 to express the integer 16711680, which is how browsers store red internally. But CSS does not understand 0x notation — only the hash prefix is valid in a stylesheet or a color attribute. If you find a hex color in JavaScript code and paste it into CSS, strip the 0x and add the #. The reverse applies too: stripping the # and adding 0x gives you a valid JavaScript number that some canvas and WebGL APIs expect.

Another frequent source of confusion is mixing up rgb(59, 130, 246) with its hex equivalent. The decimal numbers in rgb() are not hex digits; writing color: 3B82F6 without the hash or wrapping it in rgb() will not work. Each notation has its own syntax. The two are equivalent in what they describe — the same red, green, and blue channel values — but they are not interchangeable as written strings.

Reading hex colors at a glance — patterns worth recognizing

You do not need to do full arithmetic every time you see a hex code. A handful of structural patterns make it possible to estimate a color in seconds. The most useful pattern is channel dominance: whichever pair has the largest value controls the hue. If the first pair is significantly larger than the other two, the color leans warm — towards red or orange. If the last pair dominates, the color is cool — towards blue or violet. If the middle pair leads, you are looking at something greenish.

Equal or near-equal pairs always produce a neutral. When all three pairs share the same value — #888888, #C0C0C0, #333333 — the result is a gray. The higher the repeated value, the lighter the gray: #EEEEEE is near-white, #111111 is near-black. When two pairs are equal and one differs, you get a slightly-tinted neutral: #887788 has a faint violet cast because the third pair (88) matches the first, while the second (77) is slightly lower, keeping the red and blue channels dominant together.

Saturation reveals itself through the spread between the largest and smallest pair. A wide spread — say #F20014, where the first pair is near-maximum and the others are near-minimum — signals high saturation. A narrow spread — #9A8E8B, where all three pairs sit within 20 units of each other — signals a muted or desaturated tone. Knowing this lets you glance at a palette of hex codes and immediately pick out which are vivid accent colors and which are background neutrals, without running any conversions.

A few landmark codes are worth memorizing because they anchor the hue wheel and make adjacent values easier to estimate: #FF0000 pure red, #00FF00 pure green, #0000FF pure blue, #FFFF00 yellow (red + green, no blue), #FF00FF magenta (red + blue, no green), #00FFFF cyan (green + blue, no red). Most real colors are steps toward or away from one of these six poles, blended with varying amounts of white (all channels raised) or black (all channels lowered).

Adjusting a hex color by hand without a color picker

Once you can read a hex pair as a rough quantity — high near FF, low near 00, mid around 80 — you can make deliberate adjustments directly in a stylesheet or token file. Making a color lighter means raising all three channel pairs toward FF. Making it darker means lowering them toward 00. The ratio between the pairs does not have to stay perfectly fixed; an approximate shift of 10 to 20 units per pair will move the lightness noticeably without meaningfully shifting the hue.

For example, to create a hover state slightly lighter than the Tailwind blue-500 #3B82F6, you might try raising each pair by roughly 20 units — adding 14 in hex (20 in decimal). The red pair 3B becomes 4F, the green pair 82 becomes 96, and the blue pair F6 cannot go higher than FF, so you cap it there: #4F96FF. This is not a precise design-system operation, but it produces a usable hover state immediately without opening a separate tool, and the adjustment is fully legible to anyone who reads the file.

The most common mistake when editing hex values by hand is changing only one pair instead of all three. Suppose you want a darker version of #6B7280 (Tailwind gray-500) and you lower only the first pair to get #1B7280. You have not darkened the gray — you have shifted the dominant channel from balanced to heavily teal-weighted, producing a dark teal-green entirely different from the original. To darken a neutral gray you need to lower all three pairs proportionally: subtract roughly the same amount from each. A symmetrical reduction preserves the relationship between channels and therefore preserves the hue while shifting only brightness.

This same principle applies when building tints and shades for a design system programmatically. A tint is produced by interpolating each channel toward 255 (FF); a shade is produced by interpolating toward 0 (00). If you keep the interpolation factor consistent across all three pairs, the resulting tints and shades sit on a straight line through the color space, and a series of ten steps produces an evenly-spaced scale — similar to what Tailwind or Material Design palettes represent, just expressed as hex values rather than HSL percentages.

Where hex codes appear in real work

Hex codes are the primary currency for color in CSS. When a designer hands off a Figma file, every color stop in the spec panel is a hex code. When a developer writes a CSS custom property for a brand color — --color-brand: #1D4ED8 — that is a hex code. Tailwind's entire default palette is defined as hex codes in its config. Most color picker widgets in browser DevTools display hex as the default format. Even tools that display colors in HSL or LCH internally will usually export them as hex for CSS output.

In design systems, hex codes live in token files — JSON or YAML objects like "blue-500": "#3B82F6" — that feed into CSS variables, Sass maps, Swift UIColor values, and Android color resources. The hex string is the format that travels between layers of a design-to-code pipeline without loss. Unlike HSL values, which change meaning when the color space shifts, a hex code always refers to the same sRGB triplet regardless of which tool reads it.

For data visualization — charts, maps, diagrams — hex codes are how series colors are defined. Libraries like D3, Chart.js, and Vega all accept hex strings directly. When you need to step through a categorical palette or a diverging scale, you typically write out the hex codes in an array and let the library assign them to data series. Being able to read a hex code at a glance and know roughly where it falls on the hue wheel — blue-heavy values will have a large F in the last pair, warm reds will have a large value in the first pair — becomes useful when debugging why two adjacent series look too similar on screen.

The random color generator on this site produces hex codes across the full 16,777,216-value space, which is useful for exploring unfamiliar hue territory or generating palette seeds. The random colour picker draws from named web colors, so every result is a hex code with a recognizable English name attached — handy when you want a starting point you can describe verbally. And the color dice roller displays the hex code of each roll in a monospace readout, ready to copy into a stylesheet or design tool without any translation step.

For the vast majority of web and app development work, hex codes in the #RRGGBB form are the right default: widely supported, compact, unambiguous, and readable by any tool in the stack. The 8-digit alpha form and the 3-digit shorthand are useful refinements once you know when each applies. The arithmetic underneath — two hex digits per byte, sixteen values per digit — is something worth understanding once so you can read a code rather than only copy it.