Color Converter
Convert any color between HEX, RGB, and HSL instantly — paste one format and get the other two with a live preview swatch.
Type or paste a color in any format — #ff0000, rgb(255, 0, 0), or hsl(0, 100%, 50%) — and the converter detects it automatically, showing all three formats with a live preview. One-click copy buttons make it fast to grab values for CSS, design tools, or code.
Paste any format — conversions update live as you type.
How to use this calculator
- Paste or type a color in any supported format — HEX, rgb(), or hsl().
- Watch the preview swatch update live as you type.
- Read off the HEX, RGB, and HSL values in the conversion panel.
- Click copy next to any format to grab it for your CSS or design tool.
Worked example
Pasting #ff0000 instantly yields rgb(255, 0, 0) and hsl(0, 100%, 50%) — pure red at full saturation and half lightness — ready to copy into your stylesheet.
Frequently Asked Questions
What color formats does the converter accept?
HEX (#ff0000 or shorthand #f00, with or without the #), rgb() functional notation like rgb(255, 0, 0), and hsl() notation like hsl(0, 100%, 50%). The input is auto-detected, so you never have to tell the tool which format you pasted. Anything else produces a friendly error explaining the accepted formats.
What is the difference between HEX, RGB, and HSL?
HEX and RGB describe the same thing — how much red, green, and blue light a color contains — just written differently (#ff0000 versus rgb(255, 0, 0)). HSL describes color by hue (position on the color wheel, 0–360°), saturation (intensity), and lightness, which humans find more intuitive when adjusting colors. Converting between them is lossless: no color information is gained or lost.
Why does HSL feel easier for picking color variations?
Because HSL separates the perceptual qualities of a color: nudge the hue to shift around the wheel, raise saturation for vividness, or lower lightness for a darker shade, all without touching the other qualities. With RGB you must change three channels at once to get the same effect, which is hard to predict. That is why most design tools offer an HSL picker alongside HEX.
Is the conversion exact?
Yes. HEX, RGB, and 8-bit HSL describe the same 16.7 million sRGB colors, and the conversions use the standard textbook formulas in both directions. Rounding to whole degrees and percentages can shift a re-converted value by at most one unit, which is invisible on screen.
Does my color leave my browser?
No. All conversion happens locally in your browser with JavaScript — nothing is uploaded, stored, or tracked, and no account is needed. You can even disconnect from the internet after the page loads and the converter keeps working.