Convert a color between every common format in one place. Type any CSS color — hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), cmyk() or a color name — and get all twelve formats back instantly, computed with the exact CSS Color Module Level 4 conversion pipeline your browser uses.
Settings
Generated locally in your browser — your settings and results never leave this page.
One field, every notation
Most converters make you declare the input format first — a dropdown, a mode switch, a wrong guess, an error. This one parses instead: paste anything CSS considers a color and the format is detected from the syntax itself. Hex in any of its four lengths, both rgb() generations, hsl(), hwb(), the Lab and OK families, color(srgb …), cmyk(), bare number triplets, and all 148 names. The detected format is reported back, which doubles as validation.
The output is the complete translation: twelve formats simultaneously, plus the closest CSS name with its perceptual distance. For most color questions this page is the terminus; for specialized ones it routes onward.
The pipeline underneath
All conversions run through the CSS Color Level 4 reference pipeline — the same linearization, matrices, white-point adaptation and OKLab math browsers implement. That is a testable claim: the spec publishes reference values, and this implementation matches them (red = lab(54.29% 80.8 69.89) = oklch(0.628 0.2577 29.23)) in automated tests that run on every change. Agreement with browsers is the entire value of a converter; approximations that drift from what oklch() actually renders would be worse than useless.
Gamut, alpha, and other edge handling
Lab/LCH/OKLCH inputs can describe colors outside sRGB; these are flagged, previewed clamped, and routed to the Gamut Mapper for a proper chroma-preserving fit. Alpha parses from any syntax and propagates to every format that can carry it. Nonsense inputs fail with specific messages — naming the component and its legal range — because a converter’s error messages are half its interface.
Choosing an output, pragmatically
The JSON export feeds scripts and documentation. The CSS-ready output emits a declaration stack — hex first for compatibility, oklch() last for capable browsers — matching the fallback pattern modern stylesheets use. And when the real task is converting a whole list, the batch CSS Color Format Converter continues where this single-color page stops.
The parsing rules, documented
Power-user notes on the parser: bare triplets like 30 144 255 are treated as RGB; percentages inside rgb() scale by 2.55; hue accepts deg, rad, grad and turn suffixes; the % on lab()/lch() lightness is optional-but-meaningful per the CSS spec (percentage and number are the same scale for L); and alpha parses from either a fourth comma value or slash syntax in any function. Casing never matters, whitespace is forgiving, and errors quote the exact fragment that failed — the parser was built to accept whatever a stylesheet, a design tool or a colleague’s message might contain.
How to use the Complete Color Converter
- Type any CSS color – hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), cmyk() or a name.
- All twelve formats appear instantly with a live swatch.
- Switch the output dropdown for CSS-ready declarations or JSON.
- Copy what you need; the URL preserves your input for sharing.
Frequently asked questions
What input notations does the Complete Color Converter accept?
Everything CSS defines plus the common extras: 3/4/6/8-digit hex, rgb()/rgba() in both syntaxes, hsl()/hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(srgb …), cmyk(), all 148 CSS names, and bare forms like "30 144 255". One box, no format dropdown to get wrong.
How exact are the conversions between these formats?
Within sRGB they are mathematically exact and round-trip to the same 8-bit color – verified against CSS Color Level 4 reference values (red = oklch(0.628 0.2577 29.23), lab(54.29% 80.8 69.89)) in automated tests. CMYK and HSV are labeled for what they are: a print approximation and a picker convention.
Which format should I actually use in my stylesheet?
Hex or rgb() for maximum compatibility, hsl() when humans edit the file, oklch() for design tokens and derived variants (with a hex fallback for old browsers). The converter exists so the storage choice never locks you in.
What does the "closest CSS name" row do?
It runs the Color Name Finder's CIEDE2000 match inline: an exact name when one exists (dodgerblue for #1e90ff), otherwise the nearest name with its distance score – handy for talking about colors in reviews without reciting hex.
Why does my lab() or oklch() input warn about gamut?
Those spaces describe colors sRGB cannot display. The converter shows the clamped preview, flags it, and points to the Color Gamut Mapper for a hue-preserving fit – rather than pretending the clip is your color.
Can I convert several colors at once?
This page is deliberately single-color with full detail. For lists, the CSS Color Format Converter takes up to 200 lines in one pass and keeps your originals as comments.
Does the tool store my colors anywhere?
Only in your URL hash if you share it – that is client-side and never reaches the server. The conversions themselves run entirely in the browser.
Get a brand colour into every format you need
One colour expressed as HEX, RGB, HSL, CMYK and modern CSS, ready for any brief.
- Online Color PickerPin down the exact colour.
- Complete Color Converter you are hereConvert it across the common screen formats at once.
- HEX to CMYK ConverterGet a CMYK value for anything going to print.
- CSS Color Format ConverterExpress it in modern CSS colour syntax.
