Convert a colour between HEX, RGB and HSL
Need the same colour in a different format? Type it once as HEX, RGB or HSL and get the other two instantly, with a live swatch so you can see exactly what you're working with. Copy any value with a single click and paste it straight into your CSS or design tool. Everything runs on your own device, so nothing is sent anywhere.
How to convert a colour
- Type a colour. Enter a value in the HEX, RGB or HSL box. You can paste a full CSS value or just the numbers.
- See the other formats. The remaining boxes and the preview update as you type.
- Copy what you need. Use the copy button next to any format, or click the preview to fine-tune the colour visually.
What the formats mean
HEX is the six-character code used in CSS and most design tools, like #3A7BD5. RGB lists the red, green and blue amounts from 0 to 255. HSL describes a colour by hue, saturation and lightness, which makes it easy to nudge a colour lighter, darker or more muted while keeping the same hue.
Frequently asked questions
Which formats can I type in?
HEX (three or six digits, with or without the #), RGB, and HSL. You can paste a full CSS value like rgb(58, 123, 213) or just the numbers 58, 123, 213. Both work.
Is my data sent anywhere?
No. The conversion happens entirely in your browser with plain JavaScript. Nothing you type is uploaded or stored on a server.
Why do the numbers round slightly?
HEX and RGB store whole numbers, while HSL is calculated, so converting back and forth can shift a value by one now and then. The colour you see in the preview is always exact.
Can I pick a colour visually instead of typing?
Yes. Click the preview swatch to open your device's colour picker, and the HEX, RGB and HSL boxes will fill in automatically.
Is it really free?
Yes — it's free with no signup, no watermark, and no limits.