Color converter

Convert colors between HEX, RGB and HSL with a live picker — copy any format in one click.

Files never uploadedNo sign-upWorks in your browserFree & unlimited
HEX#7c3aed
RGBrgb(124, 58, 237)
HSLhsl(262, 83%, 58%)

Convert a color in 3 simple steps

1

Enter a color

Type a hex code like #7c3aed, or open the swatch and pick a color visually.

🎨
2

See every format

The HEX, RGB and HSL equivalents update together the instant you change the input.

🔄
3

Copy what you need

Hit Copy next to any format to drop it straight into your CSS, design file or code.

📋

Why use this color converter

🔁

HEX, RGB & HSL in sync

All three notations update together, so you always have the format each tool expects.

🖌️

Live color picker

Pick a color visually with the swatch instead of guessing hex codes by hand.

✨

Shorthand expansion

Three-digit hex like #abc is expanded to #aabbcc automatically — no manual spelling out.

🎚️

Easy tints & shades

Adjust Lightness in HSL to lighten or darken a color while keeping the same hue.

🔒

100% in-browser

Conversion runs locally with no sign-up and nothing uploaded.

🆓

Free & unlimited

No sign-up, no limits — works offline once the page has loaded.

HEX, RGB and HSL in sync

Designers and developers juggle the same color across three notations: HEX for CSS and design tools, RGB for canvas and image work, and HSL for intuitive tweaks to hue, saturation and lightness. Pick a color or type a hex code and all three update together, ready to copy.

It is perfect for matching a brand color, building a palette or translating a value from one tool to another. Everything runs in your browser — no sign-up, nothing uploaded.

How to convert a color

Type a hex code like #7c3aed, or open the swatch and pick a color visually. The RGB and HSL equivalents update the instant you change the input, and a Copy button next to each format drops it straight into your CSS, design file or code. Shorthand hex such as #abc is expanded automatically, so you never have to spell it out yourself.

Building and matching palettes

HSL makes it easy to derive tints and shades for a consistent palette, while HEX and RGB keep you compatible with CSS, canvas and image tools. While you design, the Lorem Ipsum generator fills your mockups with placeholder copy, and the QR code generator is handy for prototypes. Find the rest on the utilities page.

More developer tools

JSON FormatterBeautify, minify & validate JSON.Open tool Lorem Ipsum GeneratorPlaceholder text by para/sentence/word.Open tool UUID GeneratorRandom UUID v4, single or bulk.Open tool Base64 Encode/DecodeText ↔ Base64, Unicode-safe.Open tool

Frequently asked questions

How do I convert HEX to RGB?
Type a hex code like #7c3aed (or pick a color with the swatch) and the RGB and HSL values update instantly. Click Copy next to any format to grab it.
Does it support short hex like #abc?
Yes. Three-digit shorthand hex is expanded automatically, so #abc is treated the same as #aabbcc.
What is HSL and why use it?
HSL describes a color by Hue, Saturation and Lightness, which is intuitive for adjusting tones — for example lightening a color by raising the L value while keeping the same hue.
Is it free and private?
Yes. The converter runs entirely in your browser with no sign-up, and no data is uploaded.
What is the difference between HEX and RGB?
They describe the same color in different notations. HEX writes the red, green and blue channels as a single hexadecimal string like #7c3aed, while RGB lists them as three decimal numbers from 0 to 255. HEX is compact for CSS; RGB is easier to compute with.
How do I make a color lighter or darker?
Work in HSL. Keep the Hue and Saturation the same and raise the Lightness (L) value to lighten, or lower it to darken. Because only one number changes, you get a consistent tint or shade of the original color.
Can I get an RGBA value with transparency?
RGB and HSL here describe the solid color. To add transparency, append an alpha value to form rgba(r, g, b, a) or hsla(...), where a runs from 0 (transparent) to 1 (opaque). The RGB numbers stay the same; you just add the alpha channel.
Are HEX colors case-sensitive?
No. #7C3AED and #7c3aed are the same color, so you can use whichever case your style guide prefers. The converter reads both and you can copy the format you need.

By Narender Chaudhary, Editorial & Product Lead · Updated June 2026