Color Picker from Image

Every designer knows the moment. A client's existing product photo has a blue in it — the good blue, the one their whole brand quietly hangs on — and your job is to put that exact blue into a website header. 'Sort of a cornflower?' is not a specification. The eyedropper at the top of this page is: drop the image in, click the color, and the exact value lands in your clipboard.

The tool gives you hex, RGB and HSL for any pixel you touch, lets you zoom to pixel level for precision, pins swatches as you go, and builds a shareable palette out of what you picked. It all happens in your browser — the image never uploads anywhere, which is a bigger deal than it sounds when the source is an unreleased product shot or a competitor's dashboard.

I've pulled brand colors out of favicons, album covers, kitchen tiles photographed at a client's house, and one memorable espresso machine. The tool is the same in every case; the craft is in knowing which pixel to click and what to do with the number afterward. Both halves of that are below.

A digital image is a grid of pixels, and every pixel is three numbers: how much red, how much green, how much blue. Each channel runs from 0 to 255, which is why you'll see a color written as rgb(59, 130, 246) — 256 possible values per channel, over 16.7 million combinations across the three.

Hex is the same three numbers in base 16, because programmers hate typing more characters than necessary. #3B82F6 breaks into 3B (59), 82 (130), F6 (246). That particular value is famous in a niche way: it's Tailwind CSS's blue-500, which means it currently colors several million buttons on the internet. If you've seen a modern web app, you've seen it.

One wrinkle matters: your photo's numbers only mean something relative to a color space. The web runs on sRGB, and nearly every tool — this one included — speaks it. But a 12-megapixel iPhone photo is 4032×3024 pixels carrying roughly 12.2 million color samples tagged in the wider Display P3 space, and how that translates to sRGB is where subtle surprises live. More on that in the color-space section.

1. 1

   Load your image

   Drag in a JPG, PNG, or WebP, paste a screenshot from the clipboard, or pick a photo from your camera roll on mobile. The image opens in the picker workspace, zoomable and ready.

2. 2

   Hover and hunt

   Move the cursor and the magnifier shows a blown-up view around it — you're looking at actual pixels, enlarged, so you can see the difference between the color you want and the anti-aliased edge one pixel over.

3. 3

   Click to capture

   The clicked pixel's values appear immediately: hex, RGB, and HSL, all selectable. One click on the hex copies it to your clipboard.

4. 4

   Pin the swatches you care about

   Every capture can be pinned to your working palette with a name — 'logo blue', 'warm neutral', 'that green'. Keep pulling until you have the set.

5. 5

   Export the palette

   Copy the whole palette as hex codes or CSS custom properties, ready to paste into a stylesheet, a design tool, or an email to a client.

Underneath the interface this is one of the oldest tricks in browser graphics. Your image is drawn to a canvas — the same rendering surface games use — and the canvas exposes its pixels through a method called getImageData. Give it a coordinate, and it hands back the red, green, blue, and alpha values of that exact pixel. That's the whole magic: a direct read of the image's stored data, no interpretation, no guessing.

The interesting engineering is everything wrapped around that read. The magnifier re-samples a neighborhood of pixels and scales it up so your click lands where your eye intends. The hover readout does live conversion between notations so you can think in HSL while the file speaks hex. The nearest-named-color display tells you the CSS color name your pick is closest to, because 'slate blue' communicates something a hex code doesn't in a meeting.

There's also a contrast calculation worth knowing about. For every color you pull, the tool shows the contrast ratio against white and against black text. That number matters for accessibility: WCAG requires 4.5:1 for normal-size body text, and a surprising number of beautiful brand colors fail it — often in the pale range, where prettiness and legibility quietly divorce.

HSL earns its column because of how humans actually work. 'The same blue, 20% darker' is an HSL operation — drop the L from 60% to 40% — while doing it in RGB requires knowing which channel to pull down and by how much. Hover states, chart gradients, and accessible-tint ramps all start as HSL moves on a hex anchor.

This is the canonical job: one hero color and the neutrals around it. The blue became the site's primary button and link color; the concrete gray became the page background instead of pure white, which was the change that made the client say 'yes, that feels like us.' Same photo, three clicks, a design system seed.

Pure white is harsh next to most content, and experienced designers know it — so the good sites use near-whites. This pull changed a redesign discussion from 'why does their site feel calmer' to a concrete decision: adopt #F8FAFC for surfaces, reserve #FFFFFF for cards that need to pop. Ten seconds of picking replaced an hour of vague preference.

Paint companies would love you to believe this requires their consultant. It requires a photo you already have and an eyedropper. The pulled palette went straight into a presentation template, and the terracotta became the accent color across every chart for that client — pulled from their own space, so it matched their taste by construction.

Picking colors is fast; choosing them is the craft. A habit that has survived every project I've run: pull more than you need, then cut. Pin eight or nine candidates from a source image, then narrow to five or six — one or two dominants, two accents, one or two neutrals. The cutting is where the palette gets an opinion instead of becoming a pile of pretty swatches.

• Anchor — the color the brand is 'about'; buttons, links, primary fills (the #2F6FED role)
• Accent — used sparingly, for emphasis and highlights; often complementary to the anchor
• Neutrals — background surfaces and text grays; pulled from the image's environment, not invented
• Depth — darker variants of the anchor for hover states and shadows (HSL lightness drops)
• Tints — paler versions for badges, chips, and selection states

Interior designers have taught the 60-30-10 rule for decades — 60% dominant, 30% secondary, 10% accent — and it survives translation to interfaces remarkably well. A pulled palette with proportions assigned gives you a page that feels composed before a single layout decision is made.

The last mile of a color pull is making the number useful. The tool exports palettes as CSS custom properties — variables like --brand-blue: #2F6FED — which is the modern way to keep one source of truth in a stylesheet. Paste those into your :root block and every component can reference the variable instead of the literal value, so a brand refresh becomes a five-line change rather than a find-and-replace expedition.

For design tools, the same hex values paste into color pickers in Figma, Illustrator, Canva, and Photoshop alike. And when a collaborator asks 'which blue is this?' the answer becomes a six-character sentence instead of a paragraph of adjectives.

One naming convention earns its keep on every project: name swatches by role, not by appearance. 'Brand primary' outlives 'that nice blue' the moment the brand refreshes to green — the role stays, the value changes, and the code never notices. The palette export here names pins as you type them, so the discipline costs nothing at pick time and pays forever after.

Here's the wrinkle worth understanding, because it explains the two or three percent of pulls that look inexplicably off. Color numbers are relative to a color space — a definition of what 'fully saturated red' means. The web, and every tool on this page, speaks sRGB. Modern iPhone cameras capture in Display P3, a wider space that can express more intense greens and reds; the photo file carries a tag saying so.

When your browser displays that photo, it honors the tag and shows you the wider gamut on a screen that supports it. When the eyedropper reads the pixel, it hands you the value as stored — which, copied into an sRGB-only context, can look slightly more muted than it did in the photo. It's not an error; it's a translation between two dictionaries of color, and it's why colors pulled from iPhone photos sometimes need a small saturation nudge after the fact.

A pulled color that fails accessibility checks is a beautiful liability. WCAG contrast requirements are strict for good reason: 4.5:1 for body text, 3:1 for large text and essential UI elements. Many brand colors — especially mid-tone yellows, teals, and light grays — fail against white, and the failure only surfaces after launch when someone runs an audit.

The tool computes the ratio for every capture against white and black, so you see the problem at the moment of picking rather than at the moment of embarrassment. The usual fixes come cheap: darken the anchor for text use while keeping the brighter original for large surfaces, or flip to the tint as a background and use the anchor as the text.

• Mid-tone yellow and amber brand colors — frequently below 3:1 on white; reserve them for large headings or darken for text
• Light grays as text — the #B7BCBF neutrals you pull from photos almost always fail for body copy; move to a darker step for text
• Teal and mint accents — gorgeous on buttons as fills with white text, rarely adequate as text on white
• Pale tints used as 'subtle' text — the subtitling trend that quietly fails every audit; darken two steps and keep the softness in the background instead

Theory books make harmony sound like geometry — complementary angles, triadic triangles, split-complementary scaffolding. All true, and all unnecessary for the fastest reliable path: pull harmonious colors from an image that already has them. A photograph of a scene that looks right is a resolved color equation. The light, the materials, and the atmosphere already negotiated their truce; you're just reading the treaty's terms off the pixels.

• Analogous sets — colors adjacent on the wheel. Nature photos hand you these constantly: sky into distant hills into foreground sage, all within a quarter-turn of hue
• Complementary pairs — a warm accent pulled from an otherwise cool scene. One terracotta cushion in a blue-grey room is the classic photograph composition
• Monochrome ramps — one hue pulled at several lightness levels, which is precisely what an interface needs: one blue as anchor, hover, tint, and badge background
• Temperature balance — most working palettes lean warm or cool with a small counterweight from the other side; pulled from a photo, the counterweight is already there, in the wood tones against the grey walls

When no source image exists — a ground-up brand, a product with no photography yet — pull nothing and generate instead, then judge candidates the way you'd judge pulled colors: keep what survives contact with real text on real backgrounds. Harmony is a verdict, not a formula, and every check happens at the pixel level anyway.

Nine pulls out of ten are boringly correct. The tenth usually has a name:

• Anti-aliased edges — pixels on a boundary are blends of the two colors meeting there. A click one pixel inside the edge of a logo will return something neither color would claim. Zoom in; click the fat part of the shape.
• JPEG halos — compression smears sharp edges and rings flat areas near high contrast, shifting values slightly. PNG screenshots read exact; JPEG photos read approximately, by design.
• A magnifier lagging on a huge image — a 4032-pixel photo is a lot of re-sampling per mouse move. Give the magnifier a beat to catch up before clicking; the readout is always of the pixel under the crosshair.
• A 'different color' on a different screen — that's calibration, not the tool. The values are identical; displays aren't. Judge brand decisions on the display your audience uses.
• Gradients everywhere — in a gradient there is no 'the color,' only the color at each pixel. Pick a specific point deliberately, or pick two and call it a range.

Think about what people actually eyedrop: competitor dashboards under embargo, client product photos before launch, unreleased packaging, screenshots of internal tools. Uploading any of that to an online picker means handing it to a server of unknown provenance and hoping the retention policy is both honest and short.

This tool can't upload your image because there's no upload step in its architecture — the canvas read happens on your device, full stop. For agencies working under NDA, that's not a convenience. It's the difference between a tool you're allowed to use and one you're not.

Brand and UI designers rebuilding a visual language from existing material. Developers matching an app's colors to a marketing site built by someone else, two years ago, with no documentation. Homeowners and decorators translating a beloved photo into paint-adjacent values. Etsy sellers keeping their shop banners consistent with their product photography. Presenters pulling a chart palette from a keynote photo so the deck feels intentional instead of default.

The shared situation is always the same: the color exists in an image, and it needs to exist in code, CSS, or a palette. The eyedropper is the shortest path between those two states ever invented, and it now fits in a browser tab.

A pulled hex code is a starting point, not a finished color system. These are the natural next stops on that road.

• Color Converter — turn one pulled hex into every notation: RGB, HSL, HSV, CMYK approximations
• Random Color Generator — generate candidate palettes when you're starting from zero instead of a photo
• Aspect Ratio Calculator — pair a palette with correctly proportioned image dimensions for the layout it's headed into