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

Practice this Regex Pattern

Put your regex skills to the test! Try writing this pattern in our interactive challenges workspace.

Start Challenge →

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
3 matches· capture groups: 1

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—

Work with this pattern

Take this expression further — test it against your own data, adapt it in the builder, or read up on the syntax behind it.

Regex Tester

Test a regular expression against sample text and see every match highlighted live.

Regex Generator

Build a pattern by clicking blocks — no syntax memorisation required.

Regular Expressions Guide

What regex is, how the syntax works, and the mistakes that trip people up.

Regex Cheat Sheet

Every token, quantifier, and assertion on one printable page.

Python Regex Guide

The re module end to end — search, match, findall, groups, and substitution.

Regex Pattern Library

100+ ready-to-use patterns for email, URLs, dates, IPs, and more.