Color Converter
Convert colors between HEX, RGB and HSL and preview them live. 100% free, no signup. Everything runs in your browser.
This free color converter moves a color between HEX, RGB and HSL and shows you the result the moment you type. Every design and development job uses all three formats sooner or later. Designers hand over hex codes, CSS often wants rgb so that transparency can be added, and HSL is the one format where lightening or darkening a color is genuinely easy. Converting between them by hand is fiddly and easy to get wrong. Paste a value into any of the three boxes and the other two update instantly, with a live swatch so you can see what you are actually working with. There is also a nine step shade scale built from your color, which is the fastest way to build a consistent palette.
How to use
- Type or paste a value into whichever box matches what you have. Hex accepts both the long form like #2952E3 and the short form like #29E.
- Watch the other two boxes update as you type, along with the swatch above them.
- Use the color picker on the left if you would rather choose visually than type a code.
- Press one of the copy buttons to take the format you need.
- Look at the row of shades underneath. Each square is your color at a different lightness, from very dark on the left to very light on the right.
- Click any shade to make it the active color, which is a quick way to find a slightly darker hover state or a light background tint.
Why use our color converter?
Editing all three formats, rather than converting in one direction only, is what makes this quick in practice. You rarely know in advance which format you will be handed. A client sends a hex code, a brand guide lists rgb values, and a stylesheet you inherited uses hsl. Being able to paste any of them and read off the others removes the step where you go looking for a second tool.
The shade scale earns its place too. Picking a hover color or a light background tint by eye usually produces something slightly off, because people tend to change saturation by accident. Generating the scale from HSL keeps the hue and saturation fixed and moves only the lightness, which is exactly how a proper design system does it. Everything runs in your browser with nothing uploaded. It pairs naturally with the JSON formatter when your colors live in a config file, and the case converter when you need those hex codes consistently upper or lower case.
Who is this tool for?
Front end developers convert brand hex codes into rgb so they can add an alpha channel for shadows and overlays, which is one of the most common small tasks in CSS work. They also use HSL to generate hover and active states that stay in the same color family instead of drifting.
Designers moving between tools hit format mismatches constantly, because one app exports hex and another expects rgb. Anyone building a design system uses the lightness scale to produce the 50 to 900 range that component libraries expect. Marketers matching a brand color across a website, a printed flyer and a social template need the same color in different notations. Students learning CSS use a tool like this to finally understand what the three numbers in HSL actually control, which is much clearer when you can watch the swatch change as you type.
Frequently asked questions
They describe exactly the same thing in different notation. Hex writes each of the red, green and blue channels as a two character hexadecimal number, while rgb writes them as three decimal numbers from 0 to 255. #2952E3 and rgb(41, 82, 227) are the same color.
Because HSL separates the color itself from how light or saturated it is. Making a color 10 percent darker means changing one number in HSL, while in hex or rgb you have to recalculate all three channels. For hover states, tints and shade scales it is far easier to work with.
Yes. Three character codes like #29E are expanded automatically, so #FFF and #FFFFFF both work.
The converter works with solid colors. To add transparency, take the rgb values and write them as rgba(41, 82, 227, 0.5), or use the modern CSS form rgb(41 82 227 / 50%).
It is your color at nine lightness levels, keeping the hue and saturation the same. It is the quickest way to get a matching darker shade for a hover state or a light tint for a background without the color drifting into a different hue.
Hex and rgb convert exactly, since they are the same values in different notation. HSL involves rounding to whole numbers, so converting to HSL and back can occasionally shift a channel by one, which is invisible to the eye.