⌘ K
3/4/6/8 digits · # optional · case-sensitive toggle

Build a custom hex color regex

Toggle 3-, 4-, 6-, 8-digit forms and the # prefix. Verify against samples live. Runs locally.

Hex Color Regex Builder
Matches
3
samples
Failed
4
samples
Length
36
chars
Status
/i
flag
options · build the regex
Allowed lengths
Test (one per line)
output · pattern + verification
Generated regex
/^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/i
Matches (3)
#fff
#ffffff
#ff8
Non-matching (4)
#ff8800cc
ffffff
#GGG
#1234
Quick Start

How to build a hex color regex

Toggle which hex lengths you accept (3, 4, 6, 8 digits) and whether the # prefix is required.

  1. 01

    Pick lengths

    3 = rgb, 4 = rgba, 6 = rrggbb, 8 = rrggbbaa.

    Patterns compile through the JavaScript RegExp constructor, so syntax errors surface immediately and engine quirks like Unicode property escapes (\p{L}) work when the u flag is on.

    patternECMAScriptliterallive
    input · literallengths · regex
    [x] 3 [x] 6
    loaded · ECMAScriptPCRE · ready
  2. 02

    Hash policy

    Require # always or accept bare hex strings too.

    Each flag character mirrors the ECMAScript literal: g enables iteration, i folds case, m anchors per line, s lets . match newlines, u unlocks proper Unicode, y is sticky, and d emits indices.

    flagsoptionsg · i · mlive
    config · optionshash · flags
    [x] require #
    flags applied · liveECMA · live
  3. 03

    Verify samples

    Each line gets a tick. #GGG fails (invalid hex).

    Watch for catastrophic backtracking on nested quantifiers — a common ReDoS source. The tool caps match counts to keep the page responsive on pathological patterns.

    matchgroupshighlightReDoS-safe
    run · outputverify · matches
    ok #ff8800 no #GGG
    matches · livegroups · live
  4. 04

    Copy or export

    Grab the output as JSON, CSV, or plain text — ready for your editor or pipeline.

    Copy writes via navigator.clipboard.writeText; downloads use a Blob and object URL, so nothing transits the network and the output is byte-identical to what you see on screen.

    copyexportclipboardblob
    export · exportedready · saved
    Copied
    ready to shipsuccess
Pro tips

Regex patterns that don't melt down

Use named groups

(?<year>\d{4}) reads better than $1 and survives reordering. Supported in ECMAScript 2018+.

Anchor strictly

Use ^/$ with the m flag when matching whole lines. Without anchors, partial matches sneak through.

Avoid catastrophic backtracking

Nested quantifiers like (a+)+ can explode. Run patterns through ReDoS Detector first.

Escape every literal

Backslash any meta character you want literally: \.\$\^\*\+\?\(\)\[\]\{\}\|\\.

Test edge cases

Empty string, single character, unicode, the maximum length you expect — write fixtures for each.

Patterns aren&rsquo;t parsers

Don’t parse HTML, JSON, or balanced parens with regex. Use a proper parser when the grammar is recursive.

Related toolsHex Color ValidatorRegex TesterRegex BuilderRegex LibraryRegex Character ClassesRegex Cheatsheet
Use Cases

When to build a hex color regex

Match the formats your app or CSS supports.

Theme imports

Validate colors from a design export. Compiles through the JavaScript RegExp constructor — engine quirks (Unicode property escapes, sticky matching, named groups) work when their flags are on. Error messages cite the exact position of any syntax issue.

ReDoS-safe

CMS color field

Accept just the formats your renderer handles. Pairs with the ReDoS detector to catch catastrophic backtracking before you deploy. A pattern that handles 1k-character input fine can become a denial-of-service vector on attacker-controlled 1M-character input.

ECMA-compliant

CSS audit

Find #abc1 typos in a stylesheet. Output exports as JavaScript, Python re, Java util.regex, .NET System.Text.RegularExpressions, PCRE, and POSIX — language quirks are highlighted on conversion so you don't ship a JS-only pattern to a Go service.

spec-grade

Docs

Validate color tokens before publishing. Capture groups (named or numbered) round-trip cleanly into replacement strings, JSON output, or CSV extraction without re-typing. Backreferences ($1, ${name}) preserve semantics across languages.

cross-engine

User input

Form field for picking accent colors. Test against edge cases — empty input, single character, max length, multibyte boundaries — to catch off-by-one and zero-length match bugs before they reach production.

test-ready

Teach

Show why #1234 is 4-digit rgba. All matching runs client-side so secret patterns never leave the browser. Useful when the pattern itself is sensitive (PII regexes, internal data formats, security filters).

production-ready
FAQ

Frequently asked questions

Different formats serve different uses. Shorthand #abc is convenient but lossy; 8-digit allows alpha.
Yes — CSS hex colors must start with #. The toggle is for cases where you parse raw hex.
Hex is case-insensitive by tradition. Toggle on to require lowercase or uppercase consistency.
Not in this builder — it's hex only. Use a CSS parser for color() and oklch().
No. The tool runs entirely in your browser — your pattern and sample text never leave the page.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!