Regex for Hex Color Codes

Read it left to right. Each piece below matches one part of the input:

• ^# Start of the string and a literal hash.
• [0-9a-fA-F]{3,4} Short form: 3 digits (#RGB) or 4 with alpha (#RGBA). Each digit is doubled: #fa0 is #ffaa00.
• |[0-9a-fA-F]{6} Or the full form #RRGGBB.
• |[0-9a-fA-F]{8} Or the full form with alpha, #RRGGBBAA.
• $ End of the string, which is what rules out 5 and 7 digits.

The whole input must match, from the first character to the last. Every row below is checked against the pattern by our automated test suite before each release.

Make the hash optional with #?, then add it back before using the value, so everything you store has one consistent shape:

const HEX = /^#?(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
const normalize = (s) => (HEX.test(s) ? "#" + s.replace(/^#/, "").toLowerCase() : null);

To find colors inside a stylesheet, drop the anchors, add the g flag and end with \b so #12345g does not match its first six characters: #(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b. Put the longest alternative first in that version, because without the $ the engine takes the first alternative that fits.

Each short digit is doubled: #fa0 becomes #ffaa00 and #fa08 becomes #ffaa0088. With a replacement:

"#fa0".replace(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i, "#$1$1$2$2$3$3"); // "#ffaa00"

For anything beyond shape checks, such as turning a hex value into RGB, HSL or OKLCH, or checking text contrast, use the color converter and the contrast checker rather than more regex. The hex syntax is defined in CSS Color Module Level 4.

The pattern is translated for each engine rather than pasted as is: named groups, anchors, escapes, shorthand classes and flags are adjusted so each snippet behaves as closely to the JavaScript version as its engine allows. Differences that remain (Go's RE2 has no lookarounds or backreferences, for example) are called out under each one. The Code tab in the tester above also exports Dart, and updates as you edit the pattern.

JavaScript and TypeScript

const regex = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;

function isValid(value) {
  return regex.test(value);
}

console.log(isValid("#fff"));

Python

import re

pattern = re.compile(r"^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\Z")

def is_valid(value: str) -> bool:
    return pattern.search(value) is not None

print(is_valid("#fff"))

• JavaScript's $ only matches at the very end of the string. Python's $ also matches before a trailing newline, so the pattern uses \Z instead.

Go

package main

import (
	"fmt"
	"regexp"
)

func main() {
	re := regexp.MustCompile(`^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$`)
	fmt.Println(re.MatchString("#fff"))
}

C#

using System;
using System.Text.RegularExpressions;

// The timeout stops a pathological input from hanging the thread (ReDoS).
var regex = new Regex(@"^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\z", RegexOptions.None, TimeSpan.FromSeconds(1));
Console.WriteLine(regex.IsMatch("#fff"));

• JavaScript's $ only matches at the very end of the string. .NET's $ also matches before a trailing newline, so the pattern uses \z instead.

PHP

<?php

$pattern = '/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/D';

function isValid(string $value, string $pattern): bool
{
    return preg_match($pattern, $value) === 1;
}

var_dump(isValid('#fff', $pattern));

• The D modifier makes $ match only at the very end, like JavaScript (PCRE's $ also matches before a trailing newline).

• Regex for UUIDs (Versions 1–8): 8-4-4-4-12 hex layout with a real version digit (1–8) and the standard variant.
• Regex for MAC Addresses: Six hex pairs with consistent : or - separators, or Cisco's dotted form.
• Regex for Alphanumeric Characters: Letters A–Z and digits only, with a Unicode variant for every script.
• Regex for HTML Tags: Opening, closing and self-closing tags, capturing the tag name.

Browse all 25 patterns in the regex pattern library, or build your own in the regex tester.