Back to all patterns
CSS RGB Color Validation
Validation
Validates CSS rgb() color values like rgb(255, 128, 0).
/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/How it works
This pattern validates the CSS rgb() function syntax with three numeric components. It allows optional whitespace around the values. Note that it does not validate that each component is in the 0-255 range.
Test Cases
Should Match
- rgb(255, 128, 0)
- rgb(0,0,0)
- rgb( 255 , 255 , 255 )
Should NOT Match
- rgba(255, 128, 0, 0.5)
- rgb(255 128 0)
- #FF8000
Quick Summary
Validates CSS rgb() color syntax with three numeric components and optional whitespace. Does not validate that values are in the 0-255 range. Does not match rgba() or the modern space-separated rgb() syntax.
Key Takeaways
Key Takeaways
- Matches rgb(R, G, B) with comma separators and optional whitespace
- Does not validate value range, rgb(999, 999, 999) passes
- Does not match rgba(), use a separate pattern for alpha channel
- CSS Color Level 4 allows rgb(R G B) without commas, this pattern requires commas
Use Cases
When to use it
- Validating color inputs in design tool configuration
- Parsing CSS color values from stylesheets
- Converting rgb() values to hex in color utility functions
Watch out
Common Mistakes
- Not validating the 0-255 range after matching, extract capture groups and check each
- Forgetting that modern CSS allows rgb(R G B) without commas
FAQ
CSS RGB Color Validation, Frequently Asked
How do I convert rgb() to hex?
Extract R, G, B values and use: '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')
What is the difference between rgb() and rgba()?
rgba() adds a fourth alpha channel (0-1 for opacity). In CSS Color Level 4, rgb() also accepts an optional alpha.