Why does a value my browser rejects come back as valid?

The parser follows the current specification, so very new syntax can validate here while an older engine refuses it. Test in the target browsers when that gap matters.

Does it tell me which part of the string is wrong?

No — the answer is valid or invalid, which keeps the check instantaneous. Compare a failing value against a known-good one of the same kind to spot the difference.

Is a colour name such as rebeccapurple accepted?

Yes, every name in the CSS named-colour list parses, along with transparent. Names that are not on the list are rejected like any other unknown token.

What does the hex value beside a valid colour show?

The canonical six-digit equivalent of whatever you entered, produced by parsing and reformatting. It is a confirmation of what the parser read, not a copy of your input.

Can it check the relative-colour syntax or a color() space like display-p3?

Wide-gamut color() values parse, so they validate and produce a swatch. Relative colours such as rgb(from red r g b) do not parse yet and are reported as invalid.

Color Format Validator

Color string

Valid

#3B82F6

You Might Also Need

Color Format Converter

Convert a color into every common format

CSS Named Colors Reference

Browse and search the full CSS named-color list

CSS Gradient to Image Exporter

Render a CSS gradient as a downloadable image

CSS Color Formatter

Format any color into a CSS-ready string

The color format validator reports whether a string is a colour a browser will accept, and shows the canonical hex when it is — the quickest way to find out why a declaration silently did nothing.

What is Color Format Validator?

The color format validator takes a string and answers one question: will a browser accept this as a colour? Type or paste a value and the badge flips between Valid and Invalid as you edit; when a value is accepted the page also shows a swatch and its canonical hex, so you can see what the parser understood rather than what you hoped it understood. Use it to validate css color string values that arrived from a template, a spreadsheet, a design export or a user input field, and to check if a color is valid before it is committed to a theme file.

Accepted: three, four, six and eight digit hex; rgb() and rgba() with commas or spaces and an optional slash alpha; hsl() and hsla(); hwb(); lab(); lch(); oklch(); the color() function for wide-gamut spaces such as display-p3; the keyword transparent; and the full set of CSS named colours.
Rejected: five-digit hex, hsv() and cmyk() functions, the keyword currentColor, and the newer relative-colour syntax such as rgb(from red r g b), which a current parser does not yet read.

The check is a parse rather than a pattern match. The same colour library the rest of this domain converts with is asked to read the string; if it returns a colour the value is valid, and if it does not, the value is not. That distinction matters because hand-written regular expressions almost always disagree with the browser: a regex that matches six-digit hex will reject hsl(), hwb(), oklch() and every named colour, which is the usual reason a home-grown validation helper passes a value that the browser then ignores. Parsing also catches the mistakes that look fine at a glance — a hex with the wrong number of digits, a missing percent sign, a stray space inside a function, a colour name that is not in the standard list.

Four limits are worth knowing.

Valid here means the parser understands the value, not that every target browser does. Percentage alpha and the newest syntaxes may pass a current parser and still fail an older engine, so test in the browsers you support when the difference matters.
The hex readout is six digits. An 8-digit input is parsed correctly but its alpha is not shown in the reading, so do not treat that row as a transparency report.
The answer is binary. The page reports valid or invalid rather than pointing at the character that broke the parse.
It checks one value at a time, which is fine for a stylesheet but slow for auditing a column of colours from a data export.

The habit this page supports is checking the last mile. An invalid colour is dropped by the browser without an error message, and the element quietly keeps whatever it inherited, so the symptom is usually a wrong-looking page rather than a broken build. When a value passes and needs rewriting into another notation, the converter is the next step; when the question is whether text on that colour can actually be read, the contrast checker measures rather than parses.

How to use Color Format Validator

Type or paste the value into the colour string field.
Read the badge: Valid or Invalid, updated as you edit.
When it is valid, check the swatch and the canonical hex to confirm the parse went the way you meant.
Move a valid value on to the converter or the contrast checker, and fix an invalid one at the source.

When to use Color Format Validator vs related tools

Use this when a colour is misbehaving and the string itself is the suspect. The format converter is the reverse direction — it turns a colour you already have into every notation — the CSS named colours reference answers which names are legal in the first place, and the contrast checker picks up where parsing stops and measures whether a valid pair can be read.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.