Colour Converter
Convert colours between HEX, RGB and HSL.
Runs entirely in your browser. Nothing is sent to a server.
Save this tool
Keep Colour Converter handy
Use your browser's Share menu, then “Add to Home Screen”.
- HEX
- HEX with alpha
- RGB
- HSL
About this tool
Design tools, CSS and image editors all prefer different colour notations, so converting between them is a constant small tax. HEX is compact and dominates CSS and design handoffs. RGB maps directly to how a screen actually emits light. HSL describes a colour the way people think about it, as a hue with an amount of colourfulness and lightness, which makes it far easier to build a palette by hand: keep the hue, change the lightness, and you have a consistent set of shades. This converter accepts any of those formats plus common colour names, and it is deliberately forgiving about syntax. You can paste a bare hex with or without the hash, use three or six digits, include an alpha channel, and write either the comma style or the newer space-separated CSS syntax. Everything converts as you type, with a live swatch so you can see the result rather than imagine it.
How to use it
- Type or paste a colour in any format
- See it converted to every other format instantly
- Copy the notation you need
Frequently asked questions
Which format should I use in CSS?
Any of them work. HEX is the most common and the most compact. HSL is worth using when you are building variations of a colour by hand, because adjusting lightness while keeping hue and saturation gives you a coherent set of shades far more easily than editing hex digits.
What do the extra digits in an eight-character hex mean?
The last two are the alpha channel, from 00 for fully transparent to ff for fully opaque. It is supported in every current browser, and it is often simpler than switching to rgba just to add transparency.
Why does converting to HSL and back sometimes change the value slightly?
Because HSL components are rounded to whole numbers for readability, and that rounding is not perfectly reversible. The difference is at most a step or two per channel and is not visible, but it does mean the round trip is not always byte-identical.
Can I paste a colour without the hash?
Yes. Bare hex values are accepted, as are three-digit shorthand, the space-separated CSS syntax such as rgb(59 130 246), and common colour names like teal or crimson.
How do I know whether text will be readable on a colour?
The preview shows both black and white text on your colour so you can judge immediately. For an actual pass or fail against accessibility guidelines, use the contrast checker, which calculates the WCAG ratio properly.