Extract from Image
Drop image here, paste (Ctrl+V), or
Recent Colors
Color Picker Hex & Image Extractor
I spent way too long one weekend trying to match a purple from a client’s logo in Figma, only to realize the hex code I’d been copy-pasting was slightly off because I’d grabbed it from a compressed JPEG screenshot instead of the original file. The difference between #895BF5 and #8B5CF6 is basically invisible on screen unless you put them side by side on a white background, and then it’s incredibly obvious and annoying. That’s the kind of thing that made me want a color picker that just does everything in one place — grab the color, see it in every format, check how it looks against text, done. Use the one above, pick your color or drop in an image, and you’ve got HEX, RGB, HSL, HSV, and CMYK all in one shot.
What’s In Here
The main picker gives you a saturation-brightness pad with a hue slider underneath, which is pretty standard, but the part I actually use the most is the image extraction. You drop in a screenshot or paste from clipboard and click anywhere on it to pull exact colors — way more reliable than eyeballing it in Photoshop’s color sampler, especially when you’re working from a photo reference or a brand asset someone sent you as a PNG. The recent colors strip keeps your last picks visible, which sounds like a small thing but it saves an absurd amount of back-and-forth when you’re trying to build a palette from scratch.
Every color gets output in five formats: HEX, RGB, HSL, HSV, and CMYK. There is a “Copy All Formats” button if you want everything on your clipboard at once, which is genuinely useful when you’re documenting a style guide and need to paste all values into a spreadsheet or a Notion table. I kept a Google Sheet with color specs for about forty different sites last year and copy-pasting each format individually from Chrome’s DevTools color picker was driving me up the wall, it was just so tedious for something that should take a second.
The color harmonies section generates complementary, analogous, triadic, split-complementary, tetradic, and square palettes from whatever color you’ve picked. Each harmony has a “Copy CSS” button that gives you the full set as CSS custom properties. Honestly the triadic and tetradic modes are the ones I reach for when I need a color scheme fast — complementary is too obvious for most projects, and analogous can feel a bit flat unless you’re deliberately going for a monochrome-adjacent look. That said, if you’re building something that needs to feel calming or cohesive, analogous is underrated and works better than people give it credit for.
There’s also a tints and shades strip that generates lighter and darker variations of your selected color in even steps, which is the kind of thing that Tailwind CSS does automatically with its color scales but that you’d otherwise have to calculate manually by adjusting the lightness value in HSL. The contrast preview up top shows your color with dark and light text overlaid so you can eyeball whether it’ll pass accessibility checks — it’s not a full WCAG contrast ratio calculator, so if you need exact ratios for compliance, you’d want a dedicated contrast checker for that. But for a quick gut check while picking brand colors or UI accents, it does the job.
One thing I’ll mention about the CMYK values: they’re calculated from RGB, which means they’re approximations. If you’re actually sending something to a commercial printer — business cards, packaging, whatever — you need to be working in a proper CMYK color profile in InDesign or Illustrator, not converting from screen colors. The CMYK output here is fine for getting a rough idea of what a color looks like in print terms, and it’s close enough for digital mockups, but it won’t match a Pantone swatch. Just worth knowing.
FAQ
What’s the difference between HEX, RGB, and HSL color formats?
They’re three ways of describing the exact same color. HEX is a six-character code used in CSS and design tools — #895BF5, for example. RGB breaks the color into red, green, and blue channel values from 0 to 255, which is how screens actually render color. HSL describes color in terms of hue (the color wheel position, 0–360°), saturation (how vivid it is), and lightness (how bright or dark). Most web developers default to HEX because it’s compact, but HSL is arguably more intuitive if you’re trying to adjust a color by hand — bumping lightness up 10% is a lot easier to reason about than guessing which RGB channel to change.
Can I extract exact colors from an uploaded image?
Yes — drop an image onto the extraction area or paste one from your clipboard with Ctrl+V, then click anywhere on it to grab the color at that pixel. Keep in mind that if the image is a compressed JPEG, the colors you pick might be slightly off from the original due to compression artifacts. This is especially noticeable with gradients and solid brand colors that have been run through social media compression. For the most accurate results, use a PNG or an uncompressed source file.
Are the CMYK values accurate enough for print?
They’re approximations. The CMYK values here are mathematically converted from RGB, which is a screen color model — it doesn’t account for ink behavior, paper stock, or the specific color profile your printer uses. For a rough reference or a digital mockup, they’re perfectly fine. But if you’re sending files to a commercial printer for business cards or packaging, you should be working in a dedicated CMYK profile in InDesign or Illustrator, ideally with Pantone references. The gap between RGB-converted CMYK and actual print output can be surprisingly large, especially with bright violets and saturated greens that simply don’t reproduce well in CMYK.
How do color harmonies work?
Color harmonies are based on geometric relationships on the color wheel. Complementary pairs two colors directly opposite each other (like purple and yellow-green), analogous groups neighbors on the wheel, and triadic spaces three colors evenly at 120° apart. The math is done in HSL — complementary just adds 180° to the hue, triadic adds 120° and 240°, and so on. These aren’t arbitrary groupings, they come from color theory principles that have been used in painting and design for centuries. The “Copy CSS” button exports the full harmony as custom properties so you can drop them straight into a stylesheet.
Does the contrast preview check WCAG accessibility compliance?
Not fully. The preview shows your color with dark and light text overlaid so you can see at a glance whether it’s readable, but it doesn’t calculate a specific contrast ratio number. WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text — if you need to verify those exact numbers for accessibility compliance, a dedicated contrast ratio checker will give you the precise values and a pass/fail result. The preview here is more of a quick sanity check while you’re picking colors, not a substitute for a proper audit.