Color converter

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

HEX#7c3aed
RGBrgb(124, 58, 237)
HSLhsl(262, 83%, 58%)

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.

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.

More free tools

Fast, private utilities that run entirely in your browser.

JSON FormatterLorem Ipsum GeneratorUUID GeneratorQR Code Generator

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

Join us on Telegram & WhatsApp for the latest updates
Telegram