Colour Converter
Local only — nothing is uploaded unless you save or share it.
A colour converter: HEX to RGB, RGB to HEX, and either to HSL.
- Type or paste a colour in any format
- See it converted to every other format instantly
- Copy the notation you need
- HEX
- HEX with alpha
- RGB
- HSL
Save this tool
Keep Colour Converter handy
Use your browser's Share menu, then “Add to Home Screen”.
About this tool
Converting hex to RGB, RGB to hex, or either of them to HSL is a constant small tax, because design tools, CSS and image editors all prefer different colour notations. 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.
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.
Is there a colour picker as well as the conversion?
Yes — the swatch opens your system's color picker, so a value can be chosen by eye rather than typed, and the HEX, RGB and HSL forms all update together. That is the html color picker job in practice: pick something that looks right, then take away the code that a stylesheet will accept.
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.
Help improve this tool
Found a bug, want a change, or need a tool we don't have?
You have an unsent draft.
Thanks — that's with us. You'll find the reply in your inbox.Go to my messages