How to Convert Colours Between HEX, RGB and HSL
You rarely choose which colour format you are handed. A design file exports RGB, a brand document quotes HEX, and the stylesheet you are editing is written in HSL. The Colour Converter takes any of the three and gives you the other two.
When this comes up
Copying a colour out of a design tool into CSS is the usual one. Equally common: you have a HEX value from a brand guide and you want to make it 10% lighter for a hover state, which is easy in HSL and awkward in anything else - so you convert, adjust, and convert back.
The third case is older code. A stylesheet written years ago may be entirely HEX while the component you are adding uses HSL custom properties, and mixing the two in one file makes the palette hard to follow.
Converting does not change the colour
Worth stating plainly, because it worries people: these are three notations for the same thing, like writing a number in words or digits. #2563EB and rgb(37, 99, 235) are the same blue, down to the pixel. Nothing is lost going between them.
The one exception is rounding. HSL stores hue as a whole number of degrees in most tools, so a round trip through HSL can land a point or two away from where it started. Invisible in practice, but it is why a converted value sometimes differs by one from what you expected.
How to convert
Open the tool, paste a colour in whichever format you have, and all three appear ready to copy.
If what you actually want is to pick a colour rather than translate one, the Colour Picker lets you choose visually and gives you the same three values.
Converting a whole stylesheet
Doing this by hand for a large file is slow and error-prone, and the usual mistake is converting the values but not the structure. A stylesheet full of HSL values is no easier to maintain than one full of HEX unless the shades are actually related to each other.
The version worth the effort is to define a small number of colours as custom properties at the top of the file and reference them everywhere else. Then a colour exists in exactly one place, in whatever format you prefer, and changing it changes the whole site. Converting formats is a tidying job; centralising the values is the one that pays off.
Common questions
What about transparency?
That is the fourth value in rgba() and hsla(). Standard HEX has no alpha channel, though the eight-character form adds one.
Why does my HSL look different in another tool?
Usually rounding, or a tool using HSV rather than HSL. They are similar but not identical.
Can I convert a colour I only have as an image?
Yes - pull it out of the picture with the Image Colour Palette Extractor first, then convert the hex code it gives you.
Which format should custom properties use?
HSL if you intend to generate variations from them, HEX if they are fixed brand values that will never be adjusted.
Need a colour in a different format?