Color Picker
Pick any color from an image and get HEX, RGB, HSL, HSV and CMYK codes instantly.
Upload an image to pick a color
Drag & drop, paste, or browse — PNG, JPG, WEBP or GIF
Tip: you can also paste an image with Ctrl/Cmd + V
Color codes
Nearest color name: Royal Blue
Color harmonies
Contrast checker (WCAG)
Sample text
Saved colors
No saved colors yet — pick one and tap “Save color”.
A color picker is a tool that lets you sample the exact color of any pixel and read it back as a code you can reuse. Instead of guessing at a shade or squinting at a hex value, you click the pixel you want and get its precise values in every common format. Designers use color pickers to match a client’s brand, developers use them to grab the exact blue from a mockup, print teams convert screen colors to CMYK, and accessibility-minded teams check whether text will actually be readable against its background.
Our color picker is completely free and fully private — your image never leaves your device because everything runs right in your browser. Upload or paste a photo, click any pixel with the eyedropper, and instantly read the color as HEX, RGB, HSL, HSV and CMYK. You can extract a full palette from an image, generate matching color harmonies, and run a built-in WCAG contrast check to confirm your color combinations meet accessibility standards — all with no sign-up, no ads and no uploads to a server.
How to pick a color from an image
- 1
Upload or drag in your image
Drag and drop a photo onto the canvas, paste one with Ctrl/Cmd + V, browse from your device, or load one by URL. PNG, JPG, WEBP and GIF are all supported, and the image stays on your device.
- 2
Click the eyedropper on any pixel
Move over the image and click the pixel you want to sample. Zoom in for pixel-perfect precision when colors sit close together, and the picker locks onto the exact shade under your cursor.
- 3
Read and copy the color codes
The readout panel shows the live HEX, RGB, HSL, HSV and CMYK values for the pixel you picked. Tap Copy next to any format to send that code straight to your clipboard for use in your design tool or code.
- 4
Extract a palette from the image
Click Extract palette to pull the dominant colors out of the whole image at once. It’s the fastest way to build a cohesive scheme from a photo, a screenshot or a piece of reference art.
- 5
Generate color harmonies
From any picked color, generate complementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies. Use these ready-made relationships to round out a palette that feels balanced.
- 6
Check contrast, then save or export
Drop your color into the WCAG contrast checker to confirm text will be legible, then save the colors you like and export the palette as CSS, JSON or a PNG swatch sheet.
HEX, RGB, HSL, HSV and CMYK explained
Different color models exist because different jobs describe color in different ways. Screens build color from red, green and blue light, so RGB and its shorthand HEX are the native languages of the web. HSL and HSV rearrange that same information around hue, so humans can tweak a color intuitively — nudging saturation or lightness rather than juggling three channels. Print, on the other hand, mixes physical inks, so it uses CMYK. The picker shows all five at once so you can grab whichever format the task in front of you needs.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS — the most compact way to write a color for HTML, CSS and design handoffs. |
| RGB | rgb(59, 130, 246) | Screens and digital — the raw red/green/blue channels behind every pixel, handy for code and rgba() transparency. |
| HSL | hsl(217, 91%, 60%) | Intuitive tweaking — adjust hue, saturation and lightness independently to build tints and shades by hand. |
| HSV | hsv(217, 76%, 96%) | Design tools and pickers — the hue/saturation/value model built into Photoshop, Figma and most color wheels. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — cyan, magenta, yellow and black ink percentages for anything that ends up on paper. |
Web and UI design
Pull the exact colors from a mockup, a reference site or an inspiration photo and drop them straight into your design system. Build a consistent palette, generate harmonies for accent and highlight colors, and copy clean HEX values into Figma, Sketch or Adobe XD without eyeballing a single shade.
Front-end development
Grab a color once and reuse it everywhere. Copy HEX or RGB values into your CSS, or export the whole palette as ready-made CSS custom properties (variables) so your theme stays consistent across components. The rgb() and hsl() readouts also make it easy to add opacity or programmatic tweaks in code.
Print and branding
Screen colors don’t translate directly to ink, so every picked color comes with its CMYK conversion for print work. Match a brand color across a business card, brochure or packaging mockup and hand your printer the cyan, magenta, yellow and black percentages they actually need.
Accessibility
Readable text isn’t optional. The built-in WCAG contrast checker measures the ratio between your foreground and background colors and tells you at a glance whether the pair passes AA and AAA for normal and large text — so you can catch low-contrast combinations before they ship.
How we compare
Plenty of online color pickers cover the basics. Here’s how ours stacks up against a popular alternative, imagecolorpicker.com, on the features that matter most for real design and development work.
| Color models | HEX, RGB, HSL, HSV and CMYK | HEX, RGB and HSL only |
| CMYK for print | Yes — instant CMYK conversion | No |
| WCAG contrast checker | Yes — AA/AAA pass-fail built in | No |
| Color harmonies | Yes — six harmony types | No |
| Ads | None | Heavy |
Frequently asked questions
How do I pick a color from an image?
Upload, paste or drag your image onto the canvas, then click the eyedropper on any pixel you want to sample. The picker instantly shows that color’s HEX, RGB, HSL, HSV and CMYK values, and you can copy any of them with a single tap. Everything happens in your browser, so the image is never uploaded anywhere.
What is a HEX color code?
A HEX code is a six-digit way of writing a color for the web, like #3B82F6. The six characters are three pairs of hexadecimal digits representing the red, green and blue channels — 3B red, 82 green and F6 blue — each ranging from 00 to FF (0 to 255). It’s just a compact shorthand for the same information as an RGB value.
How do I convert RGB to HEX?
Convert each of the three RGB channels (0–255) to a two-digit hexadecimal number and join them together after a #. For example, rgb(59, 130, 246) becomes #3B82F6. You don’t have to do the math by hand — pick any color in this tool and it shows the HEX and RGB values side by side, ready to copy.
How do I make a color palette from a photo?
Load the photo and click Extract palette. The tool analyzes the whole image and pulls out its dominant colors as a set of swatches you can select, copy and save. From there you can generate harmonies to fill out the scheme and export the finished palette as CSS, JSON or a PNG.
How do I check color contrast for accessibility?
Put your text color in the foreground field and your background color behind it in the WCAG contrast checker. It calculates the contrast ratio and shows whether the combination passes WCAG AA and AAA for both normal and large text. Aim for at least 4.5:1 for normal body text to keep it readable for everyone.
Is this color picker free and private?
Yes on both counts. It’s completely free with no sign-up and no ads, and it’s private by design — your image is processed entirely in your browser and never uploaded to a server. When you close the tab, nothing about your image is left behind.
