Color Converter
HEX โ RGB โ HSL with preview.
Color Converter at a glance
Color Converter is a free online developer tool you can use right now to HEX โ RGB โ HSL with preview โ no account, no install and no usage limit. It runs entirely inside your browser, so whatever you enter stays on your own device.
- Price
- Free โ no trial, no paid tier, no watermark
- Sign-up
- Not required
- Where it runs
- In your browser โ nothing is uploaded to a server
- Works on
- Chrome, Safari, Firefox and Edge โ desktop, tablet and phone
- Category
- Developer Tools
About Color Converter
Convert a colour between HEX, RGB and HSL and see it previewed as you go. Enter any of the three formats and the others update to match.
The three notations describe the same colours in different ways, and each is convenient for something different. HEX is compact and the default in design handoffs. RGB is the same information in decimal, and its rgba() form is the usual way to add transparency. HSL is the one worth learning, because it is the only one you can reason about: hue is a position on the colour wheel in degrees, saturation is intensity, lightness is how close to white or black it sits.
That makes HSL far better for building a palette. Producing a darker shade of a brand colour in HEX means guessing at digits and checking the result; in HSL you keep the hue and saturation and lower the lightness, which gives a genuinely related shade rather than an approximation. A full set of tints and shades comes from moving one number.
One conversion detail worth expecting: HEX and RGB map to each other exactly, since both describe 8 bits per channel. HSL involves floating-point arithmetic, so a round trip can shift a channel by one unit. That difference is invisible on screen but will show up if you compare strings.
How to use Color Converter
- Enter a colour in HEX, RGB or HSL.
- The other two formats update instantly, with a live preview swatch.
- Copy whichever notation your stylesheet or design tool needs.
Frequently asked questions
Which format should I use in CSS?
Any of them work. HEX is most common for solid colours, rgba() is convenient for transparency, and HSL is best when you are generating variations โ changing lightness while holding hue and saturation produces a properly related shade.
What does the fourth value in rgba() or a 8-digit HEX mean?
Alpha, meaning opacity โ 0 is fully transparent and 1 fully opaque in rgba(), or 00 to FF in an 8-digit HEX. It affects only that colour, unlike the CSS opacity property which also fades every child element.
Why did my colour change slightly after converting to HSL and back?
HSL conversion uses floating-point maths, so rounding can shift a channel by one unit. The difference is imperceptible on screen but visible if you compare the hex strings. Keep your source values in one format if exact equality matters.
What makes HSL easier to work with?
Its numbers correspond to things you can picture. Hue is an angle on the colour wheel, saturation is intensity and lightness is closeness to white or black. Adjusting a colour is a deliberate change to one of those, rather than guessing at hex digits.