Skip to content
Colour Lab

Pixel Picker

Color picker from image: upload a photo or screenshot and sample the exact hex colour of any pixel with a magnified zoom loupe.

  • #color picker from image
  • #hex color from image
  • #image color picker
  • #eyedropper
  • #colour picker
  • #pixel
  • #sample
  • #hex
100% client-side

Runs in your browser. Your data never leaves this device.

The Workbench
Pixel Picker — workspaceLive

Drop an image here

or click to select a file, or paste

Network requests0
Bytes uploaded0
Trackers fired0
The Guide

About Pixel Picker

/01 Sampling an exact colour from an image

Load an image and pick the precise colour of any pixel, with a magnified loupe so you can land on exactly the pixel you mean rather than the one next to it. The value comes back ready to copy.

Useful for matching a colour from a screenshot, pulling a value out of a logo, or identifying a shade from a photograph.

/02 Why the colour you sample may not be the colour you expect

Photographs and compressed images are noisy: what reads as one flat colour is usually many slightly different pixels, so two samples a few pixels apart can differ. JPEG compression is particularly aggressive around sharp edges, where it invents colours that were never in the original.

Sample from the middle of a flat area rather than near an edge, and take a couple of readings to confirm. For a representative set of colours across a whole image, a palette extractor is the better tool.

/03 Pick a hex colour from any image

Drop in a screenshot, logo, photo or design mockup, move over the area you want and a zoom loupe magnifies the pixels under your cursor, so you land on exactly the right one instead of its neighbour. Click to sample it and the hex code is ready to copy. Every click is kept as a swatch, so you can collect a set of colours from one image and copy each as you need it.

As a color picker from image files, it is the fastest way to match a colour you cannot look up. Pull a brand colour from a client's logo when there is no style guide, grab the exact shade from a screenshot of a website or app, or record the colours in a reference photo before building a palette around them.

/04 Getting an accurate colour code

Where you click matters. Sample from the middle of a flat area, not an edge, because anti-aliasing blends edge pixels with the background. Prefer PNG screenshots over JPGs, since JPEG compression shifts colours slightly and adds speckles around sharp shapes.

Photographs need more care. A photo records the camera's interpretation of a colour, shaped by lighting, white balance and editing, so the hex code from a photo of a painted wall is not the paint's true colour. Sample a few nearby points and use them as a starting point. When you want every main colour in an image at once rather than exact single pixels, the Palette Extractor does that in one step.

FAQ

Questions about Pixel Picker.

Why do two nearby pixels give different colours?
Compression artefacts and image noise. Areas that look flat rarely are, especially in JPEGs and near high-contrast edges. Sample away from edges for a truer reading.
Can I pick a colour from anywhere on my screen?
It works on images you load into the page. Browsers cannot read pixels from outside the page, so take a screenshot first and load that.
Is my image uploaded?
No. The image is read and sampled in your browser and never sent anywhere.
How do I get the hex code of a colour in an image?
Drop the image in, move to the colour you want while watching the zoom loupe, and click the exact pixel. The hex code appears ready to copy, and each sampled colour is saved as a swatch.
Why does the colour I picked from a photo not match the real object?
Cameras interpret colour through lighting, white balance, exposure and compression, so a photo is a record of the picture, not the material. For paint, fabric or product matching, treat the sampled colour as a starting point and confirm against a physical sample.
Can I extract all the colours from an image at once?
Use the Palette Extractor for that. The Pixel Picker is for sampling exact individual colours; the extractor analyses the whole image and returns its dominant colours as a palette.
Related
Colour Converter

Convert hex to RGB, and between HSL, OKLCH, LAB, LCH and OKLAB, with a colour picker and every format shown at once.

hex to rgbrgb to hexcolor code converter
Contrast Checker

WCAG contrast checker: test any text and background colour pair against WCAG 2.1 AA and AAA ratios, with a live preview.

contrast checkerwcag contrastcolor contrast checker
Harmony Generator

Color harmony generator: build complementary, triadic, analogous, split-complementary, tetradic and monochromatic schemes from one colour.

color harmonycomplementary colorscolor wheel generator
Tailwind Shade Generator

Tailwind color palette generator: turn one colour into a full 50 to 950 shade scale, as a Tailwind config or CSS variables in hex or OKLCH.

tailwind color palettetailwind color generatortailwind shades
Gradient Generator

CSS gradient generator for linear, four-corner and mesh gradients with optional grain. Copy the CSS or export a PNG background.

gradient generatorcss gradientbackground gradient generator
Palette Extractor

Color palette from image: extract dominant, vibrant, muted, warm or cool colours from any photo, with hex codes to copy.

color palette from imageextract colors from imageimage to color palette
Palette Generator

Color combination generator: create colour palettes from a seed colour with multiple strategies, lock colours you like, and export them.

color combination generatorcolor palette generatorcolor scheme generator
Palette Collection

Browse 284 curated color palettes across artistic, nature, vintage, modern, soft, bold, seasonal and monochrome styles, and copy any colour.

color palettescolor palette ideashex color palettes
Colour Blindness Simulator

Color blindness simulator: preview an image or colour as people with protanopia, deuteranopia, tritanopia and five other colour vision types see it.

color blindness simulatorcolor blind simulatorred green color blindness