Color Converter Online Free Tool
Color Converter any colour between HEX, RGB, HSL, HSV, and CMYK. Accepts alpha and 140 named colours. Free, client-side, instant.
Paste any hex, rgb(), hsl(), hsv(), or CSS named colour and see all five formats plus CMYK instantly — alpha preserved throughout.
On-dark vs on-light preview
Conversions
How to Use Color Converter Online Free Tool
- Paste a colour into the main input. Any of these are accepted:
#3b82f6(hex),#f00(3-digit hex),#ff000080(hex with alpha),rgb(59, 130, 246),rgba(59 130 246 / 0.5),hsl(217, 91%, 60%),hsv(217, 76%, 96%), or a CSS named colour liketomatoorrebeccapurple. - Watch the swatches update - the main chip plus the on-dark and on-light previews show you how the colour sits against typical page backgrounds.
- Read all five formats at once: HEX, RGB, HSL, HSV, CMYK. Alpha is preserved in HEX (as the 8-digit form) and in RGB/HSL (as rgba/hsla).
- Copy one format with its inline Copy button, or hit Copy all to grab every line at once.
- Download .txt saves a timestamped report with the input, every conversion, and the current timestamp - handy for design-system documentation.
- Press
Ctrl+Enter(⌘+Enteron Mac) to force a re-parse after a paste. - Reset returns the input to the sample colour
#3b82f6.
Frequently asked questions
Is my colour data secure?
Yes. All conversions run in your browser – a few arithmetic steps and a named-colour lookup. Nothing touches the network and nothing is stored.
What input formats are accepted?
Hex (3-, 4-, 6-, or 8-digit, with or without #), rgb()/rgba() in comma or CSS4 slash-separated syntax, hsl()/hsla(), hsv(), and 140 CSS named colours like tomato, goldenrod, and rebeccapurple.
What formats does the tool output?
Five at once: HEX, RGB, HSL, HSV, and CMYK. HSV is useful when you want to tweak brightness independently of saturation; CMYK is useful for print.
Does the tool preserve alpha?
Yes. An input like rgba(59, 130, 246, 0.5) keeps its alpha in the RGB output, the HSL output (as hsla), and the HEX output (as an 8-digit hex ending in 80). HSV is rendered without alpha because CSS never standardised it.
What’s the difference between HSL and HSV?
Both use Hue, Saturation, and a third axis – but “Lightness” (HSL) and “Value” (HSV) measure that third axis differently. In HSL, 100% is pure white; in HSV, 100% is the pure hue at full brightness. Designers tend to prefer HSL for theme variables; illustrators often prefer HSV.
Why is the CMYK output a simple formula, not colour-managed?
Print workflows rely on ICC profiles to convert RGB → CMYK accurately for a specific printer and paper. This tool uses the naive formula (which browsers use for their own display), so the CMYK numbers are a sensible starting point – not a press-ready colour separation.
Can I type a named colour like “tomato”?
Yes. The tool knows 140 CSS named colours. If you type something that is not in the list, you’ll get a specific “Unknown named colour” error rather than a silent failure.
Why does my input “rgb(300, 0, 0)” fail?
RGB channels are defined in [0, 255]. Values outside that range are rejected with a specific message. The tool does not silently clamp – that would hide mistakes.
Does it support CSS Color Level 4 syntax?
Partially. The slash-separated alpha syntax (rgb(59 130 246 / 0.5)) works. Percentage channels, the color() function, and oklch() are not yet supported – paste the equivalent hex or rgb() for now.
Is the conversion math accurate?
Yes. RGB ↔ HSL uses the lightness-based saturation branch (a common bug in simpler implementations is to branch on max, which misreports saturation for dark colours like #CC0000 as 67% instead of 100%). RGB ↔ HSV uses the standard max-based formula. CMYK is the naive conversion.