Regex guide

Hex Color Regex Examples

Hex color validation is common in CSS tools, design systems, theme editors and form inputs. This guide provides practical regex examples for short, long and alpha hex colors.

6 examples

Short hex color Long hex color Short or long hex color Hex color with alpha Any CSS hex color Hex color without #

5 guides

What is a hex color? Short vs long hex colors Hex colors with alpha transparency Common hex color validation mistakes When to use a hex color regex

Open the regex builder

Short hex color

Matches 3-digit CSS hex colors such as #fff.

Suggested pattern

^#[0-9A-Fa-f]{3}$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

#fff
#09A

Common limitations

Only accepts 3-digit hex colors.
Does not accept 6-digit colors.

Long hex color

Matches 6-digit CSS hex colors such as #ffffff.

Suggested pattern

^#[0-9A-Fa-f]{6}$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

#ffffff
#1A2b3C

Common limitations

Only accepts 6-digit hex colors.
Does not accept shorthand colors like #fff.

Short or long hex color

Matches both 3-digit and 6-digit CSS hex colors.

Suggested pattern

^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

#fff
#ffffff

Common limitations

Does not accept alpha channel values.
Requires the # symbol.

Hex color with alpha

Matches 4-digit and 8-digit CSS hex colors with alpha transparency.

Suggested pattern

^#(?:[0-9A-Fa-f]{4}|[0-9A-Fa-f]{8})$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

#ffff
#ffffff80

Common limitations

Only accepts alpha formats.
Does not accept 3-digit or 6-digit colors.

Any CSS hex color

Matches 3, 4, 6 or 8-digit CSS hex colors.

Suggested pattern

^#(?:[0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

#fff
#ffff
#ffffff
#ffffff80

Common limitations

Requires the # symbol.
Does not validate named CSS colors like red or blue.

Hex color without #

Matches hex color values without the leading # symbol.

Suggested pattern

^(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$

Quick test

Regex Test text Flags

Open in Visual Builder

What it matches

fff
ffffff

Common limitations

Does not accept the # symbol.
Does not accept alpha values.

What is a hex color?

A hex color is a CSS color value written with hexadecimal digits, usually starting with a # symbol.

Common formats include #fff, #ffffff and newer alpha formats such as #ffffff80.

Short vs long hex colors

Short hex colors use three digits, while long hex colors use six digits.

For example, #fff is shorthand for #ffffff and #000 is shorthand for #000000.

Hex colors with alpha transparency

Modern CSS also supports 4-digit and 8-digit hex colors where the last digit pair represents alpha transparency.

This allows colors such as #ffffff80 to represent white with partial opacity.

Common hex color validation mistakes

A common mistake is accepting any string of hexadecimal characters without checking the exact length.

Another mistake is forgetting whether the # symbol should be required or optional.

When to use a hex color regex

Hex color regex patterns are useful in theme editors, CSS generators, design tools, admin panels and form validation.

They provide a quick way to validate color inputs before saving them or applying them to a user interface.

More Regex Guides

Password Regex Validate password strength, length and security policies. 4 examples Email Regex Test and understand practical email patterns you can adapt. 2 examples URL Regex Validate or extract URLs with interactive examples. 2 examples Phone Number Regex Validate international, French, US and E.164 phone numbers. 5 examples Username Regex Validate usernames, handles, slugs and account names. 6 examples Date Regex Validate DD/MM/YYYY, ISO dates and timestamps. 5 examples IP Address Regex Validate IPv4, private IP ranges, CIDR notation and IPv6 basics. 5 examples UUID Regex Validate UUID v4, UUID v1-v5 and UUIDs without hyphens. 4 examples Domain Name Regex Validate domains, subdomains, TLDs and lowercase domain names. 6 examples Slug Regex Validate SEO-friendly slugs and URL-safe identifiers. 5 examples Regex Cheatsheet Quickly find anchors, classes, groups and quantifiers. 5 examples Regex Tutorial Learn regular expressions step by step from the basics. 3 examples JavaScript Lookbehind Understand lookahead, lookbehind and compatibility limits. 2 examples JavaScript Regex vs PCRE Compare regex engines, flags and feature support. 2 examples