CSS Color Parser / Validator

Paste a CSS color value to validate, preview, and normalize into HEX / RGB(A) / HSL(A).

How to Use

  1. Paste a color like #ff7426, rgb(255 116 38 / 0.8), hsl(16 100% 57%), rebeccapurple, or transparent.
  2. See whether it’s valid and preview it on the swatch.
  3. Copy normalized outputs (HEX, RGB(A), HSL(A)).
  4. Use “Share Link” to generate a URL (no auto-URL changes while typing).
Preview
Live swatch + computed channels (client-side).
Status: —
Input
—
Enter a CSS color to validate.
HEX
—
RGBA
—
HSLA
—
Alpha
—
Normalization aims to be consistent (rounding rules handled in JS). If alpha is 1, HEX may be 6-digit; otherwise 8-digit.
Input
Supports modern CSS color syntax where possible (browser parsing).
Tip: Try color(display-p3 1 0.2 0.1) on supported browsers.
Client-side normalization only.
JS decides 6 vs 8 digits.

Accepted Formats

  • HEX: #rgb, #rrggbb, #rgba, #rrggbbaa
  • RGB/A: rgb(255, 0, 0), rgb(255 0 0 / 50%), rgba(...)
  • HSL/A: hsl(210 100% 50%), hsla(...)
  • Named: rebeccapurple, red, etc.
  • Keywords: transparent
Exact support depends on your browser’s CSS parser; UB does not load external libs.
Details (parsing rules & notes)
—
This tool uses deterministic client-side parsing. When available, it relies on the browser’s CSS color parsing behavior and then normalizes outputs consistently.

FAQ

Why does a color validate in one browser but not another?

Some newer syntaxes (like space-separated rgb() with / alpha or wide-gamut functions) depend on browser support.

Does this tool convert wide-gamut colors accurately?

The tool normalizes using what the browser exposes. Output is designed for practical web usage, not color-managed print workflows.

Can I share results with a link?

Yes—use the “Share Link” button. UB won’t change the URL while you type.

Tool Info

Last updated:

Updates may include improved normalization, additional syntax support, and export formats.