Color Format Converter
Convert between HEX, RGB and HSL instantly.
How to use
- 1 Type or paste a colour as hex, rgb() or hsl().
- 2 Check the live swatch to confirm the colour.
- 3 Read the HEX, RGB and HSL equivalents.
- 4 Copy whichever format you need with its copy button.
About Color Format Converter
The Color Format Converter takes a single colour written in any common CSS notation and shows you the equivalent value in every other notation at once.
Paste a hex code like #22d3ee, an rgb() string copied from a design tool, or an hsl() value from a stylesheet, and the converter parses it and returns the matching HEX, RGB and HSL strings side by side, along with a live swatch so you can confirm you have the right shade.
Designers and front-end developers constantly move between formats: a brand guide lists hex, a CSS variable uses rgb with alpha, and a colour-picker exposes HSL for easy lightness tweaks.
Doing the maths by hand is error-prone, and round-tripping through a heavyweight design app is slow.
This tool makes the conversion immediate and copy-ready, with a dedicated copy button next to each format.
Three-digit shorthand hex is expanded automatically, and alpha channels in rgba() or hsla() are accepted and safely ignored so the opaque colour still resolves.
Everything is computed locally in your browser — no colour you type is ever uploaded or stored — so it stays private and works offline once loaded.
FAQ
Which input formats are supported?
Hex (#rgb and #rrggbb), rgb()/rgba(), and hsl()/hsla(). Alpha values are accepted but the converter outputs the opaque colour.
Why does my converted value differ slightly when round-tripping?
HSL stores hue, saturation and lightness as rounded integers, so converting back to RGB can shift a channel by one. The swatch confirms the colour is visually identical.