Color Converter
Convert any color between HEX, RGB, HSL, and HSV with a live picker and copy buttons.
- Free, no account
- No watermark
- No usage limit
About the Color Converter
Most color converters make you commit before you even start. HEX to RGB. RGB to HSL. You pick a direction out of a dropdown, feed it one value, and get one answer back. That has always felt backwards to me. Plenty of the time you're holding a color and you're not even sure what format it's in, you just copied it out of a stylesheet or a design file and you want to know everything about it. Here you never have to answer that question at all. Paste whatever you've got, a hex code, an rgb() string, an hsl() value, or a plain color name like rebeccapurple, and it hands back HEX, RGB, HSL, HSV, and CMYK together, live, each with its own copy button and a preview swatch.
How to use
- Pick a color with the swatch picker, or type any value into the box. Hex works with
#abcshorthand or full#aabbcc. - Read the rows. HEX, RGB, HSL, HSV, and CMYK for that exact color all sit there at once, and the large swatch previews it live.
- Copy the format you need. Each row has its own button, and a checkmark blinks to confirm the value hit your clipboard.
- Change your mind freely. Edit the box or drag the picker and every row, plus the swatch, recalculates as you type.
- Want to hand the color to someone. Hit Share and you get a URL that reopens the tool on that exact color, handy for a Slack message or a bug ticket. Embed and Bookmark sit in the same row.
If you type something the browser can't read as a color, the box flags it and shows a quick example of a valid value, so you know the problem is your input and not the tool.
Paste anything, even a color name
The input doesn't parse colors with a hand-rolled ruleset. It hands the string straight to the same color engine your browser already uses to paint every page, so anything a stylesheet would accept, this box accepts too. That covers #3b82f6, rgb(59, 130, 246) and hsl(217, 91%, 60%), along with the 140-odd named CSS colors like tomato, slategray and rebeccapurple, right down to a scrappy three-digit hex like #f0c. If the browser can render it, you get all five formats for it. No dropdown, no guessing which single-purpose converter to open.
That saves more time than it sounds like it should. The named-color trick is genuinely useful when you're picking apart someone else's CSS, you hit cornflowerblue and you need the real hex to match it somewhere your build doesn't understand names. Or you're mid-thought, you type teal to sketch an idea, and you want the RGB to paste straight into your code. Either way, it's one box that takes whatever's in your head.
Paste a color that carries transparency and it won't drop the alpha. An 8-digit hex like #e85d3a80 or an rgba() value gets an extra RGBA row stacked in with the rest, so the half-opacity you pasted survives instead of getting flattened to a solid color. Most of the free converters botch this one, silently throwing the alpha away and handing you back a solid color you never asked for. This one keeps it, the way it should have all along.
The CMYK numbers are a starting point, not a print spec
The CMYK values here are real math, but they come from the plain textbook formula, and that formula knows nothing about your actual printer. It ignores the specific inks, the paper stock, ICC color profiles, and how much ink the press will physically let you lay down. Screens create color by adding light together. Print does the reverse, layering ink that absorbs the light bouncing off the white paper. The two don't line up cleanly, and a bright glowing blue on your monitor often comes out muddier once it's on a page.
So treat the CMYK here as a ballpark. It's fine for an early "roughly what inks are we talking about" conversation, and useless as a final handoff. Don't send it to a print shop expecting a match. For anything where the color actually carries weight, a logo on packaging or a business card, use color-managed print software and pull a physical proof before you sign off. A screen number alone was never going to nail a printed color, which is the entire reason Pantone matching and proofing exist.
HSL is the format you reach for when you're changing a color
One practical thing the other formats bury. HEX and RGB are great for storing and pasting a color, and a pain to edit. Try making #e85d3a fifteen percent darker by nudging the digits and you're basically guessing. HSL splits the color into hue, saturation, and lightness, so a darker shade is just a lower L, and a more muted one is a lower S with the hue left alone. That's why hover states, disabled grays, a full ramp of tints and shades, a complementary accent, all of it usually gets worked out in HSL and then converted back to hex to save. If you find yourself flipping between the picker and the HSL row here, that's the reason.
Frequently asked questions
Can I convert the other direction, like RGB back to HEX?
There isn't a direction to pick. Every format is shown at once, so RGB to HEX, HSL to RGB, or reading the hex off a CMYK-ish idea are all the same single action. Type or paste the one value you have, then read whichever of the other rows you needed. That's the whole point of showing five at a time instead of one pair.
Why does the same color show different numbers in Photoshop's HSV picker?
Because Photoshop, Figma, and most image editors label their picker HSV (sometimes HSB), and HSV measures brightness differently from HSL's lightness. In HSV, 100 percent value is the fullest, most saturated version of the hue and never reaches white on its own. In HSL, 100 percent lightness is always pure white. It's the same color seen through two mental models, so the middle numbers won't line up. Match the HSV row here when you're syncing with a design app.
What happens to transparency in the HEX and HSL rows?
Only the RGBA row carries the alpha. The HEX, HSL, HSV, and CMYK values all describe the solid color underneath, because those formats traditionally don't include opacity at all. If you need the see-through version, grab the RGBA line, or keep an 8-digit hex from wherever you pasted it. The preview swatch does reflect the real opacity, so you can still eyeball how transparent it is.
Is `rebeccapurple` actually a valid color?
Yes, along with about 140 others. CSS ships a whole list of named colors, from the everyday (red, teal, navy) to the obscure (gainsboro, papayawhip, rebeccapurple, which was added to honor a developer's late daughter). Type any of them and you'll get the hex and everything else. It's the quickest way to find out what darkslategray really looks like without hunting down a reference chart.
Does anything I paste get uploaded?
No. The whole thing runs in your browser with small conversion functions. No account, no server request, nothing logged. Once the page has loaded you can pull your network cable and it keeps converting, which also means a client's color or an unreleased brand palette never leaves your machine.
Why are some values off by one compared to another converter?
Rounding. HEX and RGB are the same numbers so those never disagree, but HSL, HSV, and CMYK come out of division and get rounded to whole numbers, because no stylesheet or design tool needs three decimals of hue. A different tool might round at a slightly different step, so now and then you'll see a 57 where another shows 58. Neither is wrong, and a one-digit gap is invisible on screen.