Hex Colour Code Regex
Check CSS hex colours in the 3, 4, 6 and 8 digit forms, with or without alpha, in upper or lower case.
One case per line; the m flag makes ^ and the end anchor work line by line.
Link optionspattern only
The address bar holds the pattern, flags and replacement, so Copy link shares them. Your test text stays out of it unless you include it (up to 2,000 characters), because it may be private. Nothing is sent to a server.
Matches
6matches
The first is “#fff”, at position 0.
- Groups
- none
- Characters matched
- 36 of 79
What the pattern meansHover or tap a part to see it in the pattern and what it matched
How this works: Method, 4 sources, Checked against 1 worked example,
How this works
Method
Your pattern runs in your own browser’s JavaScript engine, in a background worker that is stopped after 1.5 seconds, so a pattern that backtracks catastrophically can’t freeze the page. The explanation comes from our own parser of the ECMAScript pattern grammar, checked against the engine; what each part matched is found by wrapping that part in one more group and running the pattern again. Conversions to other flavours only rewrite the syntax and list what their documentation says works differently.
Sources
How it’s tested
One worked example for this page is checked by automated tests before every release: given the inputs, the tool must show the expected answer.
Changes
- First published, with a library of 19 common patterns and their test cases.
Worked example
Take #fff, the first case in the tester. Reading the pattern left to right, each part takes its share of the text:
^The start of the text (matches a position, no characters)#“#” matches #(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})A group (not captured), either of three alternatives: matches fff$The end of the text (matches a position, no characters)
How the hex colour regex works
Every hex colour starts with #, followed by hex digits only: 0 to 9 and a to f, in either case thanks to the i flag. What the pattern really checks is the count, because CSS allows exactly four lengths.
[0-9a-f]{3,4} covers the short forms, #RGB and #RGBA, where each digit is doubled: #123 means #112233. [0-9a-f]{6} is the familiar #RRGGBB, two digits per channel, and [0-9a-f]{8} adds two digits of alpha. Listing the lengths as alternatives is what rules out five and seven digits, which a lazy {3,8} would let through.
The non-capturing group (?:…) keeps the alternatives together without creating a capture, so the anchors apply to all of them.
- CSS Color Module Level 4 defines a hex colour as a # followed by 3, 4, 6 or 8 hexadecimal digits, and says the case of the letters does not matter. Source: CSS Color Module Level 4, section 5.2 (hex notation).
- The 3 and 4 digit forms duplicate each digit, so #123 specifies the same colour as #112233. Source: CSS Color Module Level 4, section 5.2 (hex notation).
Test cases
Every case runs as an automated test of this page’s pattern, so the table can’t drift from what the pattern really does.
| Text | Result | Why |
|---|---|---|
| #fff | Passes | three-digit shorthand for white |
| #FFFFFF | Passes | six digits, upper case |
| #1e90ff | Passes | dodger blue |
| #0008 | Passes | four digits: black at about half opacity |
| #ff000080 | Passes | eight digits: red with alpha 80 |
| #AbC | Passes | mixed case is allowed |
| fff | Fails | no leading # |
| #ff | Fails | two digits |
| #fffff | Fails | five digits |
| #1234567 | Fails | seven digits |
| #ggg | Fails | g is not a hex digit |
| # ff0000 | Fails | a space after the # |
What it doesn’t check
- It checks hex notation only; named colours such as rebeccapurple and functions such as rgb() or hsl() are valid CSS but do not match.
- Alpha in the last two digits is part of CSS Color Level 4; very old browsers ignore 4 and 8 digit colours, so test your targets if that matters.
- To accept a value typed without the #, make it optional with
#?and add it back before using the colour.
The same pattern in other languages
Converted automatically from the JavaScript version; the tester above always runs JavaScript.
| Flavour | Pattern | Notes |
|---|---|---|
| Python | (?i)^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\Z | |
| PCRE | (?i)^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\z | |
| Go | (?i)^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$ | |
| Java | (?i)^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\z | |
| .NET | (?i)^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\z |
Sources
Frequently Asked Questions
How do I match a hex colour without the alpha forms?
Drop the 4 and 8 digit alternatives and keep exactly 3 or 6 digits after the hash. That matches the colours older CSS and most design tools write.
How do I find every hex colour in a stylesheet?
Remove the anchors, add the g flag, and put a word boundary after the digits so a longer run such as a hash in an ID selector is not cut short. Expect a few false positives from IDs that happen to look like hex.
Is #FFF the same colour as #ffffff?
Yes. Hex digits are case-insensitive and the three-digit form doubles each digit, so both mean white.