Color Picker
Pick a color, or paste any CSS value, and copy it straight back as HEX, RGB, HSL, HSV, or CMYK. Paste an rgba and the alpha comes back with it.
- Free, no account
- No watermark
- No usage limit
About the Color Picker
Most color pickers are a swatch and a hex box, and that's the whole toolbox, which is fine until you already have a color. A designer hands you rebeccapurple, or you copied rgb(59, 130, 246) out of a screenshot tool, or you're squinting at an hsl(217, 91%, 60%) you want to nudge. A plain picker chokes on every one of those, and you end up hunting for a separate converter, whereas this one accepts whatever you already have. Paste a hex, an rgb, an hsl, an rgba, or a plain CSS color name, and it reads it and hands the same color back as HEX, RGB, HSL, HSV, and CMYK all at once, each with its own copy button. Pick with the swatch when you're starting cold, paste when you already have something. Everything runs in your browser, and nothing you type gets sent anywhere.
How to use
- Click the color swatch to open your browser's picker and drag to a color, or start from the input instead.
- Type or paste any CSS color into the box: hex (
#3b82f6),rgb(59, 130, 246),hsl(217, 91%, 60%), anrgba()/hsla()with transparency, or a name liketomato. Shorthand hex (#abc) works too. - Read every format under the preview: HEX, RGB, HSL, HSV, and CMYK. If the color carries transparency, an RGBA row shows up as well.
- Copy the one you need with the copy button on its row.
- Press Share to copy a URL that reopens this exact color, which is handy for sending a shade to someone. The same row carries Embed, for an iframe you can drop into your own page, and Bookmark.
Type something that isn't a color yet, a half-finished code, a name that doesn't exist, and you get a red outline plus a short hint with examples. The format rows clear until the input is valid again. No crash, no black flash.
Paste anything, not just pick
The input doesn't care what notation you feed it. Named colors resolve, all of the standard CSS ones, so rebeccapurple, tomato, slategray, and cornflowerblue all turn into real values. Hex parses in both its full and shorthand forms, as do rgb() and hsl(), their alpha versions rgba() and hsla(), and even 8-digit hex with an alpha byte on the end.
Why bother? Because it kills the extra hop. Normally, if you have a color in one notation and need it in another, that's two tools, a picker to see it and a converter to translate, where here the same box does both. Paste the rgb() a teammate sent, read the hex off the list, done. And since all five formats update together, you never re-run a conversion just to check what that color is in HSL again.
The named-color trick is underrated for one specific job: sanity-checking a name you half-remember. Is darkslateblue actually the blue you're picturing, or is it closer to purple? Paste it and look at the swatch. Faster than guessing, and faster than digging up a reference chart.
Which code do you actually copy
They're all the same color in different notations, so the only real question is which one your next step needs.
HEX (#3B82F6) is the web default. Paste it into CSS and move on. It's what most design handoffs speak.
RGB gives you the same three channels in plain 0-255 numbers instead of base-16, which is easier when you want to eyeball a tweak ("drop the blue a bit") or match a pixel readout in an image editor.
Copy HSL when you're about to change a color by hand rather than just record it. The hue stays fixed and you push lightness up for a lighter tint or down for a darker shade. A hover state, a base, and a pressed state can be three lightness values off one hue, which is how coherent palettes get built.
HSV is HSL's close cousin and the difference bites people, so the short version: in HSL the top of the scale is white, in HSV the top is the most vivid version of the color and never white. To get pale in HSV you drop the saturation instead of raising the last number. The reason it's on the list at all is that the color square inside most design apps, Figma or Photoshop, is HSV. If you're matching a value you see in one of those, HSV is the row that lines up.
CMYK is the print one. The CMYK here is a straight math conversion off the screen color, with no color profile applied. It doesn't know your printer, ink, or paper. So treat it as a rough starting estimate, not a proof you can send to a press. For web work you'll never touch it. It's on the list because most web pickers skip CMYK entirely, and someone doing print shouldn't have to go find a second tool for one number.
Frequently asked questions
Does it take a plain color name like "rebeccapurple"?
Yes. Any of the standard CSS color names works and case doesn't matter, so Tomato and tomato both resolve to the same value. Obscure-but-real ones like papayawhip and mediumaquamarine still parse, because the names are a fixed list baked into every browser (roughly 140 of them). Type a name that isn't a real CSS color, a brand name, a typo, something you invented, and it reads as invalid and shows the hint until you fix it.
I set an rgba color but the transparency only shows in one row.
That's expected. The alpha only rides along in the RGBA row. The HSL, HSV, and CMYK rows display the solid color without the transparency, because those notations aren't where you'd normally carry an alpha value in CSS. So for a semi-transparent color, grab the RGBA string, that's the one that keeps the see-through part.
Can I copy 8-digit hex with alpha?
The HEX row always shows the 6-digit code, color only, even when you've pasted a color with transparency. The alpha travels in the RGBA row instead. If you specifically need 8-digit hex, take the 6-digit value and tack the alpha byte on the end yourself (roughly 80 for 50% opacity, CC for about 80%). For most stylesheets rgba() reads more clearly anyway.
The swatch opens a different picker in each browser.
That dialog is your browser's own, not part of this page, so it looks different in Chrome, Firefox, and Safari. One nice upside: in Chrome and Edge that native dialog includes a screen eyedropper (the little dropper icon), so you can sample a pixel from anywhere on your display and it drops straight into the picker. Other browsers give you their own dialog instead. Whatever color you land on flows back into the formats here.
Is the CMYK value safe to send to a printer?
Treat it as an estimate. It's a direct arithmetic conversion from the on-screen color with no color management, so it doesn't account for your specific printer, ink, or stock. For anything where accuracy matters, a logo going to a press, packaging, get the CMYK from a color-managed app or ask your printer for their profile. For a rough "about how much cyan is in this" read, it's fine.
What does the Share button actually do?
It copies a URL with your current color baked into the end of it. Open that link on any device and the picker loads already set to that exact color. It beats screenshotting a swatch or pasting a hex into a chat and hoping the other person reads it right. Good for handing a shade to a teammate, or bookmarking one you know you'll want again.
Is anything I pick sent to a server?
No. The picking, the parsing of whatever you paste, and every conversion happen locally in your browser. Nothing you type or sample is uploaded, logged, or saved anywhere, and once the page has loaded the tool keeps working with your connection switched off. The shareable link is the only thing that ever leaves your machine, and only if you choose to copy and send it.