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 any color from an image or the screen and read back its exact value across the formats designers and developers actually use — HEX, RGB, HSL, HSV and CMYK. Instead of guessing at a shade or eyeballing it, you click a pixel and get a precise, copy-ready color code you can drop straight into your CSS, design file or print spec.
Color pickers show up everywhere: matching a brand color in a web design, pulling a value into your code, preparing artwork for print, or checking that text has enough contrast to stay readable. Ours is completely free and private — your image never leaves your device, because everything runs right in your browser. You get instant HEX, RGB, HSL, HSV and CMYK readouts, one-click palette extraction from any photo, generated color harmonies, and a built-in WCAG contrast checker.
How to pick a color from an image
- 1
Upload or drag in your image
Drag and drop a photo, paste it with Ctrl/Cmd + V, or browse for a PNG, JPG, WEBP or GIF. The image loads straight into your browser — nothing is uploaded to a server.
- 2
Click the eyedropper on any pixel
Move your cursor over the image and click the exact pixel you want to sample. Zoom in for fine control so you can land on the precise shade you are after.
- 3
Read and copy the live color codes
The readout panel instantly shows the sampled color as HEX, RGB, HSL, HSV and CMYK. Click Copy next to any format to send that value to your clipboard.
- 4
Extract a palette from the image
Run palette extraction to pull the dominant colors out of the whole photo. It is the fastest way to build a cohesive scheme from a picture you already like.
- 5
Generate color harmonies
From your picked color, generate complementary, analogous, triadic, tetradic, split-complementary and monochromatic sets — ready-made combinations that work well together.
- 6
Check WCAG contrast, then save or export
Test your color against a background with the WCAG contrast checker to confirm it is accessible, then save swatches and export your palette as CSS, JSON or a PNG.
HEX, RGB, HSL, HSV and CMYK explained
The same color can be written in several different formats, and each one suits a different job. HEX and RGB describe colors for screens, HSL and HSV make colors easier to adjust by hand, and CMYK is built for print. Here is how they compare and when to reach for each.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | The web and CSS — the compact six-digit code you paste into stylesheets and design tools. |
| RGB | rgb(59, 130, 246) | Digital screens — describes color as red, green and blue light, ideal when you need per-channel values. |
| HSL | hsl(217, 91%, 60%) | Intuitive editing — tweak hue, saturation and lightness to lighten, darken or shift a color naturally. |
| HSV | hsv(217, 76%, 96%) | Design tools — hue, saturation and value map neatly onto the color wheels in most graphics apps. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — cyan, magenta, yellow and key (black) inks, so your artwork reproduces correctly on paper. |
Web and UI design
Match a brand color exactly, sample a shade from a reference screenshot, or build a consistent palette for buttons, backgrounds and text. Copy the HEX or HSL value straight into your design tool and keep every screen on-brand.
Front-end development
Grab clean HEX and RGB codes for your stylesheets and turn an extracted palette into a set of CSS custom properties. Export the palette as CSS variables or JSON and wire it into your design tokens without retyping a single value.
Print and branding
Preparing artwork for print means thinking in CMYK. Sample a color on screen and read its CMYK breakdown so your business cards, packaging and brochures come off the press looking the way you intended, not shifted toward the wrong tone.
Accessibility
Readable color combinations are a requirement, not a nice-to-have. Use the built-in WCAG contrast checker to test text against its background and confirm it meets AA or AAA thresholds before you ship, so everyone can read your content comfortably.
How we compare
Plenty of online tools let you pick a color from an image, but most stop at HEX and RGB. Here is how our color picker stacks up against imagecolorpicker.com on the features that matter once you move past a single value.
| Color models | HEX, RGB, HSL, HSV and CMYK, all shown at once | Mainly HEX and RGB |
| CMYK for print | Yes — full CMYK breakdown for every color | Not provided |
| WCAG contrast checker | Built in, with AA/AAA pass or fail | No accessibility checker |
| Color harmonies | Six harmony types generated from your color | Limited or none |
| Ads and privacy | No ads; images stay in your browser | Ad-supported, server-side processing |
Frequently asked questions
How do I pick a color from an image?
Upload or drag your image into the picker, then click the eyedropper on the exact pixel you want. The tool instantly shows that color as HEX, RGB, HSL, HSV and CMYK, and you can copy any format with a single click. 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, made up of three pairs of hexadecimal digits for red, green and blue — for example #3B82F6. It is the format you most often paste into CSS and design tools, and it maps directly to the same color as its RGB equivalent.
How do I convert RGB to HEX?
You do not have to do the math yourself. When you pick a color, the readout panel shows the RGB and HEX values side by side, so the conversion is automatic. For example, rgb(59, 130, 246) is the same color as #3B82F6 — just copy whichever format you need.
How do I build a palette from a photo?
Load the photo and run the palette extraction feature. The tool analyzes the whole image and pulls out its dominant colors as a ready-made set of swatches. From there you can copy the codes, save the palette, or export it as CSS variables or JSON for your project.
How do I check color contrast for accessibility?
Use the built-in WCAG contrast checker. Set your text color and background color, and the tool calculates the contrast ratio and tells you whether it passes the AA and AAA thresholds for normal and large text. That makes it easy to confirm your color choices are readable before you publish.
Is the color picker free and private?
Yes to both. The color picker is completely free with no ads, and it is private by design — your image is processed entirely in your browser and never sent to a server. You can pick colors, extract palettes and check contrast without creating an account or uploading anything.
