Hex Color Validator

Hex color validation: formats, regex and modern CSS

A hex color is the most concise way to write an sRGB color on the web. The notation #RRGGBB packs three 8-bit channels — red, green, blue — into six hexadecimal digits, plus an optional alpha channel for transparency. Hex colors appear in CSS, design tokens, brand guidelines, SVG, email templates and almost every front-end framework. Validating one means confirming it follows one of the four shapes allowed by the CSS Color specification.

A well-formed hex color is not the same as a visible color or a good color. A validator confirms syntax; checking contrast against the background (WCAG), distance from another swatch (deltaE) or accessibility for color-blind users requires extra logic.

The four valid formats

CSS Color Module Level 4 allows four lengths after the #:

• 3 digits: #RGB. Each digit is expanded by duplicating itself — #F0A becomes #FF00AA. Useful for the 4,096 "round" colors.
• 6 digits: #RRGGBB. The classic form, 16,777,216 possible colors.
• 4 digits: #RGBA. Shorthand 3-digit with alpha — #F00C = #FF0000CC.
• 8 digits: #RRGGBBAA. Full color with explicit alpha channel.

A single regex covering all four cases: ^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$. The 4 and 8-digit forms are supported in Chrome 62+, Firefox 49+, Safari 9.1+ and Edge 79+ — safe for any modern audience. Older browsers fall back gracefully when the rule appears alongside an rgba() equivalent.

Hex alongside the modern CSS color toolkit

Hex is one of many color notations CSS supports. The full list:

• Named colors: 147 keywords like red, tomato, rebeccapurple (added in 2014 in honor of Rebecca Meyer, daughter of CSS pioneer Eric Meyer).
• rgb() / rgba(): decimal channels — rgb(255 87 51 / 0.8) in the modern slash syntax.
• hsl() / hsla(): hue (0-360), saturation, lightness — better for theme variations.
• hwb(): hue, whiteness, blackness — intuitive for tinting.
• lab() / lch() / oklab() / oklch(): perceptually uniform spaces (CSS Color 4).
• color(): explicit color space, including display-P3 for wide-gamut screens.

Hex always lives in sRGB, the default web color space. For wide-gamut work prefer color(display-p3 ...) or oklch(...); for theme palettes, hex is still the most copy-paste friendly format.

Where validation shows up in real projects

Common use cases:

• Form input: a color picker that falls back to a text field — validate before saving to the database.
• Design tokens: Style Dictionary, Tokens Studio and Figma plugins emit hex values that must be normalised (uppercase, 6-digit, no whitespace).
• Tailwind arbitrary values: bg-[#1da1f2] only compiles if the value parses as a valid color.
• Branding: classic brand colors that designers paste from style guides — Twitter #1DA1F2, Facebook #1877F2, GitHub #181717.
• WCAG audits: validating hex is the prerequisite before computing contrast ratio against white or black.

Common pitfalls

Anti-patterns to avoid: rejecting valid 3-digit shorthand #FFF; trimming the # sign and then forgetting to re-add it; case-sensitive comparisons (#fff and #FFF are identical); confusing the alpha order — CSS uses RRGGBBAA, while Android, Apple and some image formats use AARRGGBB, an extremely common bug when porting between platforms. Always document which order your tokens use.

FAQ

Are hex colors case-sensitive?

No. CSS is case-insensitive for hex: #fff, #FFF and #FfF are the same. Convention is uppercase for readability in design tokens, lowercase in compressed CSS.

Is #FFF equivalent to #FFFFFF?

Yes. The 3-digit form expands by repeating each digit: #FFF -> #FFFFFF, #F0A -> #FF00AA. It is not a different color, just shorthand for 4,096 specific values.

Is 8-digit hex with alpha supported in browsers?

Yes. #RRGGBBAA and #RGBA are part of CSS Color 4 and shipped in Chrome 62, Firefox 49, Safari 9.1 and Edge 79 — every browser from the 2017+ era. Below that, use rgba().

Should I store colors as hex in the database?

For a UI theming layer, hex is fine: short, lossless within sRGB, easy to validate. For wide-gamut design or color-grading pipelines, store the full oklch() or lab() string and only generate hex for fallback CSS.