How to Pick Colors from Any Image — Free Eyedropper Tool

Q: How do I match a brand color from a logo image?

Upload the logo and use the zoom loupe to click on a flat, solid area of the brand color — avoid edges where anti-aliasing blends the color with the background. The HEX value you get is the exact screen color. For print materials, use the CMYK value instead. If the logo is a JPEG, compression artifacts may have shifted the color slightly — try to find a PNG version of the logo for the most accurate sample. Once you have the HEX, use it in your CSS or design tool to match the brand exactly.

Q: What is the difference between RGB and CMYK values?

RGB (Red, Green, Blue) describes colors as light — it is the standard for screens, monitors, and anything digital. CMYK (Cyan, Magenta, Yellow, Key/Black) describes colors as ink — it is the standard for print. The same color looks different in each model because screens emit light while paper absorbs it. A vivid blue on screen (say, rgb(0, 100, 255)) will print duller in CMYK because ink cannot reproduce the full brightness of backlit pixels. The Color Picker shows both values so you can use the right one for your medium.

Q: Can I extract a full color palette automatically?

The Color Picker is designed for manual, precise picks — you click individual pixels to build a palette one color at a time, which gives you control over exactly which colors make the cut. If you want an automatic palette extracted from the dominant colors in an image, use the Color Palette Extractor instead. It uses k-means clustering to find the most representative colors and outputs them as a group. Both tools are useful for different purposes: manual picking for matching specific elements, automatic extraction for understanding the overall color mood.

Why Eyeballing Colors Fails

You're building a website and the client sends a photo of their storefront. "Match the color of our sign," they say. You open the image, squint at the sign, and type something like #2E5090 into your CSS. Close enough? Not really. The actual color is #1D4ED8. The difference is subtle on screen but obvious when printed on a business card next to the real sign.

Try it free: Color Picker — Pick exact colors from any image. Runs in your browser, no signup needed.

Human color perception is terrible at precision. We see colors relative to their neighbors — the same blue looks different on a white background than on a dark one. An eyedropper doesn't care about context. It reads the exact pixel values from the image data: red 29, green 78, blue 216. That's the color. No guessing.

Four Formats, Four Use Cases

The Color Picker gives you every picked color in four formats simultaneously. Which one you use depends on where the color is going.

HEX (#1D4ED8) is the web standard. CSS, HTML, Figma, Sketch — everything that displays on a screen accepts hex. It's six characters: two for red, two for green, two for blue. Quick to copy, easy to compare visually. If you're building anything for screens, this is the format you'll paste most often.

RGB (rgb(29, 78, 216)) is the same information in decimal notation. CSS supports it natively, and it's the format most JavaScript libraries expect. Some designers prefer it because the numbers are more intuitive — you can see at a glance that this blue has a dominant blue channel (216) with low red (29) and moderate green (78).

HSL (hsl(224°, 76%, 48%)) describes color as hue, saturation, and lightness. Hue is the position on the color wheel (0° is red, 120° is green, 240° is blue). Saturation is how vivid the color is. Lightness is how bright. HSL is the most useful format when you need to create color variations — shift lightness by 10% for a hover state, drop saturation by 20% for a muted version. The relationship between the numbers and the visual result is more predictable than RGB.

CMYK (cmyk(87%, 64%, 0%, 15%)) is for print. If you're sending a color to a print shop — business cards, banners, packaging — CMYK is what their machines use. Screen colors don't translate 1:1 to ink, so using RGB values for print work will give you a different result than what you see on your monitor. The tool converts automatically, but keep in mind that CMYK gamut is narrower than RGB — vivid neon colors on screen will print duller.

Click any pixel to get HEX, RGB, HSL, and CMYK values. Zoom loupe for precision.

Pick a Color →

The Loupe Makes the Difference

Picking a color from a large solid area — a painted wall, a sky — is easy. Click anywhere, get the value. But most color picking happens in detailed areas: a thin stripe in a logo, the exact tone of someone's lipstick in a product photo, a specific thread color in a fabric shot.

At normal zoom, the pixel you think you're clicking isn't the pixel you're actually clicking. Off by 2 pixels on a gradient and you get a completely different shade. The 8× magnification loupe solves this. It follows your cursor, shows individual pixels as visible squares, and places a crosshair on the exact pixel that will be sampled. The loupe border changes color in real time to match the pixel under the cursor, giving you a preview before you commit.

This is the same kind of precision eyedropper that Photoshop and Figma have — except it runs in a browser tab and doesn't cost anything.

Building a Palette from a Reference Image

Designers often work from reference images — a mood board, a photograph, a screenshot of a competitor's site. The job is to extract a set of colors that capture the feeling of that image and use them in a new design.

The Color Picker stores up to 24 colors in a palette history. Each click adds a swatch. Click a swatch to copy its HEX value. Right-click to remove it. This lets you systematically build a palette: pick the dominant background color, the primary accent, the text color, a highlight, a shadow tone.

For a different approach — automated extraction of the most dominant colors — the Color Palette Extractor uses k-means clustering to find representative colors mathematically. It's faster for getting an overall mood. The manual picker is better when you need specific colors from specific parts of the image.

Once you have your palette, you can test how the colors interact. The Contrast Checker verifies that text/background combinations meet WCAG accessibility standards. The Color Blindness Simulator shows how your chosen colors appear to people with different types of color vision — roughly 8% of men have some form of color vision deficiency, and a palette that looks great to you might be indistinguishable to them.

Practical Scenarios

Matching a brand from a logo. Upload the logo image (PNG if possible — JPEG compression shifts colors slightly). Zoom into a flat, solid area of the brand color, avoiding edges where anti-aliasing blends the color with the background. Click. Copy the HEX for your CSS. If the brand has a style guide with official colors, compare your picked value against their spec — JPEG artifacts can shift values by 2–5 points per channel.

Extracting paint colors from a photo. Take a photo of the wall or object in natural daylight. Upload it. Pick the color from the brightest, most evenly lit area — shadows and reflections will give you the wrong value. The HEX value won't match a paint brand's proprietary formula, but you can paste it into Benjamin Moore, Sherwin-Williams, or Pantone's online tools to find the closest match in their catalog.

Recreating a color scheme from a website screenshot. Take a screenshot, upload it. Pick the background, primary button, text, link, and accent colors. Five clicks, five HEX values, and you have a working palette for your own project. The Image Filters tool can help you test color variations — try shifting the hue of the entire screenshot by 30° to see the same layout in a different color family.

Getting CMYK for print from a digital design. If a client sends you a web mockup and wants business cards to match, upload the design, pick the colors, and use the CMYK values for your print file. This won't replace a proper ICC color profile conversion, but it gets you much closer than guessing or converting HEX manually with a formula.

Where Color Picking Fits in a Workflow

Color picking usually happens at the start of a project. You have reference material — a photo, a logo, a mood board — and you need concrete color values before you can build anything. Pick the colors first, then move to design and production.

If you're working with images after color picking, the Image Filters tool applies hue and saturation adjustments to shift an image's overall palette. The Image Watermark tool lets you add text in a specific color — match it to a brand color you just picked. And if you need to verify that a logo's colors are preserved after format conversion, the Similarity Scanner compares two images pixel by pixel.

For metadata and forensic workflows, the EXIF Checker reveals embedded color space information (sRGB, Adobe RGB, Display P3) that explains why the same image looks different across devices. The color you pick depends on the color space the image uses — a Display P3 image rendered in sRGB will have shifted values.

Common Questions

How do I match a brand color from a logo image? Upload a PNG version of the logo if available — JPEG compression shifts colors. Use the zoom loupe to click on a flat, solid area of the brand color, away from edges where anti-aliasing blends with the background. The HEX value is your exact screen color. For print, use the CMYK value instead.

What is the difference between RGB and CMYK values? RGB describes color as light (for screens), CMYK describes color as ink (for print). The same visual color has different numbers in each system because screens emit light while paper absorbs it. Vivid screen colors often print duller because ink can't reproduce the full brightness of backlit pixels. The Color Picker shows both so you can use the right one for your medium.

Can I extract a full color palette automatically? The Color Picker is manual — you click pixels one by one for precise control. For automatic extraction of dominant colors, use the Color Palette Extractor, which applies k-means clustering to find representative colors. Manual picking is better for matching specific elements; automatic extraction is better for understanding overall mood.

One Click, One Code, No Ambiguity

Every color conversation that starts with "something like blue" ends in revision rounds. The Color Picker turns "something like blue" into #3B82F6 — six characters that mean exactly the same thing on every screen, in every browser, in every design tool. Upload an image, point at a pixel, copy the code. The whole interaction takes less time than describing the color in words.