Color Code Converter (HEX, RGB, HSL)

What the color code converter does (HEX, RGB and HSL in any direction)

It converts a color between HEX (#3B82F6), RGB (59, 130, 246) and HSL (217, 91%, 60%) in either direction. There is a single input box, and it works out which notation you pasted, so you never have to identify your own value first.

You get more than three forms. The same HEX is needed with a hash in some places and without one in others; the same RGB is needed wrapped in rgb(...) in some places and as bare numbers in others. Rather than making you work out which, HEX, RGB and HSL each get a CSS row and a numbers-only row, and R, G and B are listed separately for apps that take one value per box.

Plain color names such as red and white are accepted, as are transparent colors written as rgba or eight-character HEX. Whatever it reads is shown as a large swatch, with black or white text on top so you can see which one stays legible.

Convert a color code between HEX, RGB and HSL in three steps

1. EnterPaste your color into the "Paste a color, or pick one" box. #3B82F6, 3b82f6 and 59, 130, 246 all work. If you have not chosen a color yet, use "Pick a color" or "Start from a sample".
2. See the resultEvery form appears under "Results" immediately: HEX, RGB and HSL, each with a numbers-only variant.
3. CopyClick the row that matches where you are pasting. PowerPoint wants "HEX (no #)"; CSS wants "HEX".

HEX, RGB and HSL: what the difference is and where each one goes

HEX writes the red, green and blue amounts as two hexadecimal characters each and joins them into one string: in #3B82F6, 3B is red, 82 is green and F6 is blue. RGB lists the same three amounts in decimal, from 0 to 255. The color is identical; only the writing differs.

HSL works differently. It describes a color as hue (which color), saturation (how vivid) and lightness (how bright). Nudging red, green and blue shifts the hue as a side effect, whereas in HSL you can move lightness alone and keep exactly the same color.

Why PowerPoint and Excel reject a hex color code that starts with #

The custom color field in PowerPoint, Word and Excel is built to accept six characters and nothing else. Paste #3B82F6 straight from the web and the leading hash makes it either show an error or silently snap back to the previous color.

The same dialog also has three separate boxes for red, green and blue, which want 59, 130 and 246 as plain numbers. That is why this converter lists "HEX (no #)" and "RGB (numbers only)" as two distinct rows: they match the two ways Office actually takes a color.

Convert RGB to HSL to change lightness without changing the hue

Building a lighter or darker version of a brand color by nudging HEX or RGB digits shifts the hue as well. Convert to HSL first and move only the lightness number, and you get a tint or shade of the same color.

Paste the result back in to get HEX or RGB again, so you can tune in HSL and then take the value to PowerPoint. Note that colors carry fractions, so converting to HSL and back can land one step away from the original HEX. That comes from the rounding used for display, and the difference is not visible.

When you need to convert a color code (decks, documents, the web)

Match a brand color in a slide deck

Brand guidelines usually publish HEX only, while PowerPoint needs either three RGB numbers or six characters without the hash. Both appear at once.

Keep a website and a printed handout in the same color

Carry a CSS color into a document, or a document color back to the web, without transcribing it by hand.

Reuse the same color in Canva or an image editor

Most design tools take HEX. If all you have is a set of RGB numbers, paste them and you get the hash-prefixed HEX back.

Check whether text will be readable on a background

The color is shown as a large swatch with black or white text chosen automatically, which tells you at a glance whether it works as a slide background.

Color code converter FAQ

What is the difference between HEX and RGB color codes?

They describe the same color in two different ways. HEX packs the red, green and blue amounts into six hexadecimal characters (#3B82F6), while RGB lists the same three amounts as decimal numbers from 0 to 255 (59, 130, 246). The web usually asks for the first, and Office color pickers usually ask for the second, so this tool shows both at once.

Why does PowerPoint reject my hex color code?

Almost always because of the leading hash. The custom color field in PowerPoint, Word and Excel accepts six characters only and rejects anything with a # in front. This tool lists the hash-free form (3B82F6) as its own "HEX (no #)" row, so copy that one.

I do not know whether my value is HEX, RGB or HSL.

You do not need to. There is one input box and it works out the notation from what you paste. It reads #3B82F6, 3b82f6, rgb(59, 130, 246), 59 130 246, hsl(217, 91%, 60%) and plain color names such as red.

When should I convert RGB to HSL?

When you want to change how light or how vivid a color is without changing the hue. HSL describes a color as hue, saturation and lightness, so a single number gives you a lighter or darker version of exactly the same color. That is useful for building shades from one brand color.

Does it handle transparency?

Yes. Paste rgba(59, 130, 246, 0.5) or an eight-character #3B82F680 and the alpha is read and carried through to rgba, hsla and eight-character HEX. Fully opaque colors do not get the eight-character row, because some apps reject it.

Is the color I enter stored anywhere?

No. The conversion happens entirely inside your browser and the value never leaves it. There is no sign-up, no login and no usage limit, so you can use it as often as you like.