Color Converter (HEX, RGB, HSL)

Type a color in any format — HEX, RGB or HSL — and the other two update live, with a preview swatch and complementary color.

How to use

Edit any one of the three fields — HEX, RGB or HSL — and the other two recalculate instantly. The swatch on the left shows your color; the one on the right shows its complementary color (the hue 180° opposite on the color wheel). Click copy next to a field to copy that format to your clipboard.

The three formats

HEX writes each channel as a two-digit hex number, e.g. #ff8800. RGB lists the red, green and blue channels as 0–255 integers, e.g. rgb(255, 136, 0). HSL describes a color by hue (0–360°), saturation and lightness (both 0–100%), which is often more intuitive for designers — e.g. hsl(32, 100%, 50%) is the same orange.

FAQ

What inputs are accepted?

HEX with or without the #, 3 or 6 digits. RGB as rgb(r, g, b) or bare r, g, b. HSL as hsl(h, s%, l%) or bare h, s, l. Invalid input leaves the other fields unchanged until you type something parseable.

What is a complementary color?

The color directly opposite on the hue wheel (hue + 180°, mod 360). Pairing a color with its complement gives maximum contrast — useful for call-to-action buttons and accessible text/background pairs.

Is anything sent to a server?

No. All parsing and conversion run in your browser.

Related: QR Code Generator · JSON Formatter · All tools

How to use the colour converter

1. Pick a colour with the colour picker, or type a value straight into any of the fields — HEX, RGB, HSL or HSV all work as input.
2. The other fields update instantly, so you can copy whichever format you need: #4A90D9, rgb(74, 144, 217), hsl(210, 64%, 57%) or the HSV equivalent.
3. Use the swatch to eyeball the colour against the page background before you copy it into your design or stylesheet.
4. Copy the value with the copy button, or select the text manually if your browser blocks clipboard access.

How the conversion works

The maths is done entirely in JavaScript. HEX is base-16 notation for the same three 0–255 channels used by RGB. HSL describes the same colour as a hue angle (0–360°), a saturation percentage and a lightness percentage, which is usually much easier for humans to reason about: nudging lightness by 10% gives a predictably lighter shade, whereas guessing a new hex code rarely does. HSV uses value instead of lightness, so full saturation at any value stays vivid, while HSL's "100% lightness" always collapses to white. The converter keeps all four representations in sync so you never have to do the arithmetic yourself.

Why designers switch between formats

HEX is compact and is what most design tools copy by default. RGB is what CSS, canvas and most graphics libraries expect. HSL is the format to reach for when you are building a palette — hover states, tints and shadows are just lightness offsets from a base hue. HSV is common in colour pickers and image editors, because dragging the value slider behaves more like turning up a light. If you are writing CSS custom properties, HSL is usually the most maintainable choice.

Does my colour data leave the browser?

No. The converter is a pure calculation on strings and numbers you typed. No network request is made, nothing is uploaded, and nothing is saved after you close the tab. You can use it on an offline page with no connection at all.

Troubleshooting

• "Invalid colour" or nothing updates: check that a hex value has exactly six digits after #. The three-digit shorthand #4A9 needs to be expanded to #44AA99 first.
• Out-of-range values: RGB channels must be 0–255 and percentages must be 0–100. Values outside that range are clamped rather than rejected.
• Colours look different in another app: that is almost always a colour-profile difference, not a conversion error. Check whether the other program works in sRGB.
• Copy button does nothing: some browsers block clipboard writes on insecure origins or in private mode. Select the text and copy manually.

FAQ

Does it support named CSS colours like "rebeccapurple"?

Not by name — paste the hex or RGB value instead. Browsers do know the named colours, but they are a legacy convenience list rather than a format worth converting between.

How do I get a lighter or darker version of my brand colour?

Switch to the HSL field and adjust only the lightness percentage: minus 12% for a hover state, plus 25% for a disabled tint. Keeping the hue fixed is what makes the result look intentional.

Is alpha / transparency supported?

The converter deals with opaque colours. For transparency, take the RGB result and add the alpha channel yourself, e.g. rgba(74, 144, 217, 0.5).

Related tools: All tools · Unit converter · Word counter

People also use this for…

Every tool below is also 100%% local: no upload, no account, no server copy — the same privacy guarantee you get on this page.

• Cut out the object, then recolour
  Swap the background to the colour you just picked.
• Brand your QR code
  Use the exact HEX value for a coloured QR.
• Export a swatch sheet to PDF
  Combine colour samples into one printable page.