Color
Color Converter
Paste any CSS color and get it in every common format: hex, RGB, HSL, HWB, CMYK, plus the X11 name when one exists.
Enter a Color
About the color converter
This tool takes a color in any supported format — a CSS name like tomato, a hex code, or an rgb(), hsl(), hwb(), or cmyk() function — and converts it to the other five at once, with a live swatch preview. There's one text input and no format picker; the tool detects the format from the string itself. Five of the six output rows (RGB, hex, HSL, HWB, CMYK) link to their own dedicated tool with the color pre-filled, and a link below opens the same color in the Color Picker. Everything runs client-side in the browser — no color value is sent to a server.
Parsing happens in one parseColor() function that tries each format in turn: hex (#rgb or #rrggbb), a lookup against 148 CSS named colors, then regex matches for rgb()/rgba(), hsl()/hsla(), hwb(), and cmyk(). Whatever matches is normalized to a single canonical RGB object, and every other displayed value — hex, HSL, HWB, CMYK, and the name — is derived from that RGB using textbook conversion formulas, not a dependency like chroma-js or tinycolor2. rgba()/hsla() alpha channels are accepted syntactically but discarded; the tool only models opaque colors, so transparency never appears in the output.
Reach for this when you have a color in one format and need another — a hex value from a design file that you need as HSL to lighten or darken it in code, or a brand color you need in CMYK for a print vendor's workflow. It also works as a quick lookup: paste a hex or rgb() value you found in a codebase to see whether it has a human-readable CSS name — #663399, for instance, resolves to rebeccapurple. The parser is intentionally narrower than the full CSS color syntax a browser accepts, so a rejected value here doesn't always mean it's invalid CSS.
Examples
Input: rgb(140, 192, 67)
Name No Name
RGB rgb(140, 192, 67)
HEX #8cc043
HSL hsl(85, 50%, 51%)
HWB hwb(85, 26%, 25%)
CMYK cmyk(27%, 0%, 65%, 25%)The widget's own default value on load. Every row is derived from the same RGB triplet using the conversion formulas described above — no named match exists for #8cc043, hence "No Name".
Input: dodgerblue
Name dodgerblue
RGB rgb(30, 144, 255)
HEX #1e90ff
HSL hsl(210, 100%, 56%)
HWB hwb(210, 12%, 0%)
CMYK cmyk(88%, 44%, 0%, 0%)Typing a CSS keyword resolves to its hex value, and the reverse hex-to-name lookup finds dodgerblue again because #1e90ff is an exact match in the tool's named-color table.
rgb(30, 144, 255) -> parses (comma syntax)
rgb(30 144 255) -> "Not a legal color value"
hwb(210 12% 0%) -> parses fine (hwb() accepts spaces)
#1c87c980 -> "Not a legal color value" (8-digit alpha hex)rgb() and hsl() only accept the legacy comma syntax here; hwb() accepts both comma- and space-separated values. None of the three accept a 4- or 8-digit alpha hex code.
Frequently asked questions
Why does the converter say "Not a legal color value"?
The input didn't match any of the six supported formats: a CSS color name, #rgb/#rrggbb hex, or a rgb(), hsl(), hwb(), or cmyk() function using its expected syntax (commas between values, % on percentage channels). The most common causes are a misspelled color name, a hex code that isn't 3 or 6 digits, or a modern space-separated rgb()/hsl() value copied from browser dev tools — this tool only accepts the comma form for those two.
Does it support 8-digit hex codes with alpha (#RRGGBBAA)?
No. Only 3-digit (#rgb) and 6-digit (#rrggbb) hex are accepted; the 4-digit (#rgba) and 8-digit (#rrggbbaa) shorthand with an alpha channel are both rejected as invalid input. rgba() and hsla() are accepted, but the alpha value is read and then discarded, so every output is a fully opaque color.
What's the difference between HSL and HWB?
Both describe a color with a hue plus two other values on the same 0-360° hue wheel. HSL uses saturation and lightness; HWB (CSS Color Module 4) instead uses whiteness and blackness — how much white or black is mixed into the pure hue — which many people find more intuitive for picking tints and shades by eye.
Can I use the cmyk() value this tool outputs directly in CSS?
No. cmyk() is not a CSS color function supported by browsers — this conversion exists for handing a color to a print workflow, where CMYK is the native model, not for use in a stylesheet. For CSS, use the HEX, RGB, HSL, or HWB output instead.
Is a CSS color name like rebeccapurple case-sensitive?
No. The tool checks your input against the same named-color keywords CSS recognizes (tomato, rebeccapurple, and roughly 148 others), and the match is case-insensitive, so DodgerBlue and dodgerblue resolve identically.