CSS Color Function Parser
Parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions.
Description
RGB and HSL functions carry channel and optional alpha tokens.
When to use CSS Color Function Parser
Use this tool to parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions.
Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
How to use CSS Color Function Parser and understand its results
- Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
- Enter value using the field table and calculation rules, then run the tool.
- Read function, channels, alpha. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| value | Functional RGB or HSL CSS color. | string; maximum length: 1000000 | Required |
Paste rgb/rgba/hsl/hsla. Trim and match the function case-insensitively; split balanced top-level legacy comma arguments or modern whitespace channels with optional slash alpha. Return lowercase function, three channel strings and alpha.3
default alpha=1; exactly three channel tokens Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| function | Lowercase function name. | string; maximum length: 1000000 |
| channels | Three channel tokens. | list of string; maximum length: 1000000; minimum entries: 0; maximum entries: 100000 |
| alpha | Alpha token, defaulting to 1. | string; maximum length: 1000000 |
{
"input": {
"value": "rgb(10 20 30 / 50%)"
},
"output": {
"function": "rgb",
"channels": [
"10",
"20",
"30"
],
"alpha": "50%"
}
}Limitations and assumptions
No ranges, units, color validity or CSS expressions are evaluated. Unsupported functions, mixed comma/slash syntax and incorrect argument counts fail.
Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use CSS Box Shadow Parser: Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths. For a complementary task, use CSS Selector Specificity: Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.
Further background: CSS Color Module Level 4: RGB Functions.
References
-
CSS Color Function Parser — tool.io
-
CSS Color Module Level 4: RGB Functions — World Wide Web Consortium
-
CSS Custom Property Parser — tool.io
Similar or alternative tools
- CSS Box Shadow Parser
Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.
- CSS Selector Specificity
Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.