/^/
EasyWeb3 min read

Hex Color Code Regex

Validates a CSS hex color code in either the six-digit (#RRGGBB) or shorthand three-digit (#RGB) form.

#css#color#hex#web#validation

Regex Pattern

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Pattern Breakdown

Hover over a token to see what it does.

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
TokenMeaning
^Anchors the match to the start of the string.
#A literal hash/pound character that must prefix every hex color.
[A-Fa-f0-9]{6}The full six-digit hex form, two digits each for red, green, and blue.
|Alternation between the full and shorthand forms.
[A-Fa-f0-9]{3}The shorthand three-digit form, one digit each for red, green, and blue.
$Anchors the match to the end of the string.

Detailed Explanation

What it does

This pattern matches CSS hex color values, which start with a hash symbol followed by either three or six hexadecimal digits. Examples include #fff, #FFFFFF, and #a1b2c3.

Why it works

After the mandatory `#`, the alternation `[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}` tries the six-digit form first, and because both alternatives are anchored by the same trailing `$`, only a string of exactly 3 or exactly 6 hex characters after the hash can complete the match. The character class `[A-Fa-f0-9]` accepts both uppercase and lowercase hex digits, matching how hex colors are commonly written in CSS and design tools.

Common use cases

  • Validating color values in a design system's theme configuration
  • Checking user-entered hex codes in a color picker input
  • Linting CSS-in-JS or style objects for well-formed color strings
  • Normalizing shorthand hex colors before expanding them to six digits

Edge cases

  • Shorthand colors like #fff are valid and expand conceptually to #ffffff
  • Mixed-case input like #aAbBcC is accepted since both cases are included in the character class
  • Four- and eight-digit hex colors with an alpha channel, like #ffffffff, are not matched by this pattern
  • A hex code without the leading #, like ffffff, correctly fails to match

Limitations

  • Does not support the four-digit (#RGBA) or eight-digit (#RRGGBBAA) alpha-channel notation
  • Does not validate named CSS colors (e.g. 'rebeccapurple') or other color functions like rgb() or hsl()
  • Does not expand shorthand notation; that requires separate string manipulation after a match

Interactive Tester

Edit the pattern or text below — matching runs live in your browser.

//
Open in Playground →
#FFFFFF #fff #123abc

Test Cases

Editable — add your own inputs to see if they pass.

InputExpectedResult
Pass
Pass
Pass
Pass
Pass
Pass
Pass
Pass

Language Variants

Production-ready examples in 12 languages.

const hexColorPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

function isValidHexColor(value) {
  return hexColorPattern.test(value);
}

console.log(isValidHexColor("#3af")); // true

Common Mistakes

Forgetting to make the leading # optional or mandatory consistently with how values are stored in the app.

Fix: Decide on one convention; if colors are sometimes stored without the hash, strip or add it before validating rather than changing the regex ad hoc.

Not accounting for shorthand three-digit hex colors and rejecting valid values like #fff.

Fix: Keep the alternation between `{6}` and `{3}` forms, or expand shorthand to six digits before validating if you only want to support one form internally.

Trying to also match rgba()/hsla() color functions with this same pattern.

Fix: Use a separate pattern or a small set of alternatives for functional color notations; hex and functional syntax are structurally different.

Performance Notes

  • The two alternatives have different, fixed lengths, so the engine resolves the match in linear time with no backtracking risk.
  • Anchors at both ends make it cheap to reject wrong-length strings immediately.
  • For bulk validation (e.g. linting a whole stylesheet), compiling the regex once and reusing it avoids repeated compilation overhead.

Browser Compatibility

EngineSupportedNotes
ChromeYes—
FirefoxYes—
SafariYes—
EdgeYes—
Node.jsYes—