Hex Color Code Validation Regex
• CronOS Team
regexcolorvalidationtutorialhexcss
Need to generate a regex pattern?
Use CronOS to generate any regex pattern you wish with natural language. Simply describe what you need, and we'll create the perfect regex pattern for you. It's completely free!
Hex Color Code Validation Regex
Validate hexadecimal color codes in both 6-digit and 3-digit formats with optional hash symbol using regex pattern.
Pattern Breakdown
regex
^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$
Components
| Component | Description | Matches |
|---|---|---|
^ | Start anchor | Ensures match from string start |
#? | Optional hash | Optional # symbol |
([a-fA-F0-9]{6}|[a-fA-F0-9]{3}) | Color code | Either 6 or 3 hex digits |
[a-fA-F0-9]{6} | 6-digit format | Exactly 6 hexadecimal digits |
| | OR operator | Alternation |
[a-fA-F0-9]{3} | 3-digit format | Exactly 3 hexadecimal digits |
$ | End anchor | Ensures match to string end |
Character Classes
#?- Optional hash symbol[a-fA-F0-9]- Hexadecimal digits: 0-9, a-f, A-F{6}- Quantifier: exactly 6 occurrences{3}- Quantifier: exactly 3 occurrences
Examples
Valid:
#FF5733#ff5733(lowercase)#FFF(3-digit shorthand)#fff(3-digit lowercase)FF5733(without hash)FFF(3-digit without hash)#000000(black)#FFFFFF(white)
Invalid:
#FF573(5 digits - invalid length)#FF57333(7 digits - invalid length)#GG5733(invalid hex character)FF5733#(hash at end)##FF5733(double hash)#FF573(incomplete)
Implementation
JavaScript
javascript
const hexColorRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
hexColorRegex.test('#FF5733'); // true
hexColorRegex.test('#fff'); // true
hexColorRegex.test('FF5733'); // true
hexColorRegex.test('#FF573'); // false (invalid length)
hexColorRegex.test('#GG5733'); // false (invalid hex)
Python
python
import re
hex_color_regex = r'^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$'
bool(re.match(hex_color_regex, '#FF5733')) # True
bool(re.match(hex_color_regex, '#fff')) # True
bool(re.match(hex_color_regex, 'FF5733')) # True
bool(re.match(hex_color_regex, '#FF573')) # False (invalid length)
Go
go
hexColorRegex := regexp.MustCompile(`^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$`)
hexColorRegex.MatchString("#FF5733") // true
hexColorRegex.MatchString("#fff") // true
hexColorRegex.MatchString("FF5733") // true
hexColorRegex.MatchString("#FF573") // false (invalid length)
Limitations
- No alpha channel: Doesn't support 8-digit hex with alpha (RGBA)
- No validation of color values: Accepts any hex combination, even invalid colors
- Case sensitivity: Pattern is case-insensitive, but doesn't normalize
- Format only: Validates format, not actual color validity
- No named colors: Doesn't support CSS named colors like "red" or "blue"
When to Use
- CSS color validation
- Color picker input validation
- Design tool color inputs
- When you need to validate hex color format
- Quick color code format checking
For production, consider:
- Supporting 8-digit hex with alpha channel:
^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$ - Normalizing to uppercase or lowercase
- Validating color ranges if needed
- Supporting CSS named colors
- Using color validation libraries for comprehensive checks
Need to generate a regex pattern?
Use CronOS to generate any regex pattern you wish with natural language. Simply describe what you need, and we'll create the perfect regex pattern for you. It's completely free!