ToolsTray

Star a tool to keep it here.

Image Color Picker & Palette

An image color picker with a magnifier: hover to zoom in on the pixels, click the one you want, and copy its HEX, RGB or HSL code.

Picture

Drop a picture, screenshot or mockup here

JPEG, PNG, WebP, GIF or SVG · or paste one from the clipboard

Picked

—

Nothing kept yet

The loupe reads the colour under the pointer; a click lands here, and every copy waits until there is a colour to copy.

Colors

How many groups the median cut is asked for. Groups within ten units of each other fold into one, and the palette says how many are left.

Palette

How to use

  1. Drop a photo, screenshot or mockup into Picture, then move the pointer across it. The loupe follows it and reads each pixel live, before you commit to anything.
  2. Click when the boxed tile sits on the pixel you want. That keeps the color in the Kept colour strip and in Picks; Copy HEX, Copy RGB and Copy HSL take it from there.
  3. Press a palette swatch to copy its hex straight away; press a pick to bring that colour back. Change Colors and the palette is rebuilt from the same picture.

About this tool

Somebody sends you a screenshot and asks for that blue. An image color picker is the shortest way there. Load the picture, run the pointer across it, and the loupe keeps pace with the cursor, naming whatever pixel is under it.

Aiming by eye at a full-size photo is hopeless, so a round loupe rides along with the pointer. It grabs an eleven-pixel-wide square from the canvas and draws it as eleven 12px tiles inside a 132px window, with smoothing switched off, so the boxed centre tile is exactly the pixel being read. On a phone, press and slide: the loupe rides above your finger and lifting keeps the colour. Individual pixels become the size of tiles. Landing on the right one stops being guesswork.

Click and the color is kept in its own strip, written three ways: the hex, an rgb(r, g, b) string, and an hsl() string with the saturation and lightness as percentages. Copy HEX is the main button, with Copy RGB and Copy HSL beside it. The kept colour only changes on the next click, and every pick also lands in Picks, up to twelve chips with their codes, newest first; a repeat moves to the front, and pressing a chip brings that colour back.

Below that, the picture gets pulled apart into its dominant palette. Around twenty thousand pixels are sampled across the frame, anything less than half opaque is thrown out, and the rest are sorted by median cut into buckets. Buckets within ten units of each other fold into one, each swatch is ranked by the share of samples nearest to it, and one that no sampled pixel comes within twelve units of is marked a blend. Colors asks for four, six, eight or ten, the heading says how many came back distinct, and Copy HEX list hands you the set as one comma-separated line.

Chrome and Edge add one more thing. Pick from screen works there, backed by the browser's EyeDropper API, and it samples any pixel on your display: another app's window, a video frame, a PDF. Once you have a code, Color Converter takes it into other notations and Color Palette Generator builds a scheme around it.

The header blue in a client's screenshot, matched to the pixel

The screenshot arrives at 4000 × 3000, so it is drawn at 1600 × 1200, scaled by 0.4 to fit the canvas ceiling. Hover the header and the loupe shows an 11-pixel square of it as eleven 12px tiles, the boxed tile in the centre being the pixel it reads, with its hex underneath. Click on a flat stretch of the header, away from the anti-aliased edge of the logo, and the Kept colour strip reads #1d4ed8, rgb(29, 78, 216) and hsl(224, 76%, 48%), and stays put while the loupe goes on reading. Copy HEX takes it to the clipboard.

The palette underneath was built from 20,000 samples, every 96th pixel of the 1.92 million on the canvas, cut into six boxes, and boxes within ten units of each other folded together. Each swatch is ranked by how many samples sit nearest to it, so the page's off-white leads with the largest share and the header follows, and Copy HEX list hands over all six as one comma-separated line for the tokens file. The client's exact orange accent is a thin stroke in the corner, too small to win a box, so that one comes from the loupe.

Good to know

What this tool leaves out

  • Anything over 1600 pixels on its longest edge is scaled down before it reaches the canvas, and every color is read as sRGB. A wide-gamut shot's most saturated reds come back clamped to the nearest sRGB value, and a one-pixel hairline can be resampled out of a very large image.

What a browser cannot do

  • Pick from screen depends on the EyeDropper API, which Chrome and Edge have and Firefox and Safari do not. Where it is missing the button stays on the page, switched off, with the reason beside it, and picking stays inside the loaded image.

Things people ask

How do I get the hex code of a color in a photo?

Load the photo, hover until the loupe shows the pixel you mean, and click. The hex appears at the top of the Kept colour strip, in the usual six-digit form like #3b82f6, and Copy HEX puts it on the clipboard.

Why did the palette miss the one accent color I wanted?

Because it ranks by how much of the frame each color occupies. A wall of sky beats a small orange logo every time, and raising the count to ten only splits the sky into more shades of sky. Small accents are a job for the loupe: zoom in and click the pixel yourself.

What is the difference between HEX, RGB and HSL?

Three notations for one color. Hex is the six-digit form that CSS and design tools expect. RGB spells out the red, green and blue channels as numbers from 0 to 255. HSL describes the same color as a hue angle plus saturation and lightness percentages, which makes it the easy one to nudge when you want the same color a shade paler. All three show for every pick.

Can I grab a color from something outside the image?

In Chrome or Edge, yes. Pick from screen turns the pointer into a system eyedropper that reaches any pixel on your display, including other windows. Firefox and Safari haven't shipped that API, so there the button is switched off with a line saying why, rather than pretending to work.

Can I copy the whole palette in one go?

Copy HEX list puts every swatch on the clipboard as one comma-separated line, in palette order, ready to drop into a stylesheet or a design file. Individual swatches copy their own hex when you press them.

Missing something in Image Color Picker & Palette? Suggest a feature →

Tell someone who needs this.