Skip to content

Pick colors from an image

Click anywhere on a picture to get its HEX, RGB, HSL and OKLCH values and extract a palette; the image is analyzed on your device.

Drop an image to pick colorsor click to browse · paste a screenshot with Ctrl+V
Choose imageProcessed on your device — never uploaded
Runs in your browser · no uploadHow it works

How to use Color picker from image

  1. 1

    Open an image

    Drop, browse or paste a screenshot, photo or logo of up to 25 MB — JPG, PNG, WebP, AVIF, HEIC, GIF or SVG.

  2. 2

    Aim with the magnifier

    Hover or drag over the picture; an 11 × 11 pixel loupe shows the exact pixel under the crosshair and its HEX code.

  3. 3

    Click to pick

    Get HEX, RGB, HSL and OKLCH values, each with its own copy button. Arrow keys nudge the crosshair and Enter picks.

  4. 4

    Grab the palette

    Choose 5 to 12 dominant colours and copy them as CSS variables, JSON or a Tailwind theme block.

Limits and Pro

One image at a time, up to 25 MB, with unlimited picks, 5–12 palette colours and a 24-colour history.

Pro lets you sample pictures as large as 4 GB. See Pro

About Color picker from image

Color picker from image reads the exact value of any pixel in a picture and turns the whole image into a palette. Each pick gives the colour in four notations: HEX for design tools, rgb() and hsl() for CSS, and oklch() for modern CSS colour work, where lightness and chroma behave the way the eye expects. Picks land in a history of the last 24 colours, kept in this browser so they are still there next time; in Chrome and Edge on desktop, Pick from screen also samples any colour outside the page through the browser's eyedropper.

The palette is computed by k-means clustering in the OKLab colour space on a copy of the image scaled to at most 200 pixels on its longest side. Similar clusters are merged, transparent pixels are ignored, and colours are sorted by how much of the image they cover, with the share shown on each swatch. The same image always produces the same palette.

Designers use it to match a brand colour from a logo, build a theme from a photo, check the exact colour of a button in a screenshot, or collect a mood board. Values are standard sRGB as your browser displays the image, so a JPG artefact or a wide-gamut source can shift a pick by a few units from the original design file. Semi-transparent pixels report their colour without the transparency, and the tool doesn't name colours or check contrast ratios.

Privacy

The image is decoded and sampled in this tab, and palette clustering runs in a small Web Worker created after you open it; nothing is uploaded. Your colour history is saved only in this browser's local storage, and Pick from screen uses your browser's built-in eyedropper, which shares the single chosen colour with this page and nothing else.

Features

Pixel-exact loupe

An 11 × 11 pixel magnifier with keyboard nudging for precise picks on mouse and touch.

Dominant palette

5–12 colours by k-means in OKLab, sorted by share of the image.

Developer exports

HEX, RGB, HSL and OKLCH values plus CSS variables, JSON or a Tailwind @theme block.

Colour history

Your last 24 picks stay in this browser, ready to copy as a list.

Color picker from image: frequently asked questions

How do I get the HEX code of a color in an image?
Open the image, move the pointer over it until the magnifier's crosshair sits on the pixel you want, and click. The HEX code appears large in the Picked color panel along with RGB, HSL and OKLCH; press the copy button next to any value. On a phone, drag your finger across the picture and lift it to pick the pixel shown in the loupe.
What is OKLCH and why would I use it?
OKLCH describes a colour by lightness, chroma (intensity) and hue, based on the OKLab model, which was designed so equal steps look equally different to the eye. Changing only the lightness keeps the hue stable, which makes it easier to build tints, shades and accessible themes than with HSL. All current browsers support oklch() in CSS, and Tailwind CSS 4 uses it for its default palette.
How is the color palette calculated?
The image is scaled down to at most 200 pixels on its longest side, transparent pixels are dropped, and the rest are grouped with k-means clustering in OKLab space so the groups match how colours look rather than raw RGB numbers. Clusters that end up nearly identical are merged. Each swatch shows its share of the image, and you can export the result as CSS, JSON or Tailwind.
Can I pick a color from outside the image?
In Chrome, Edge and Opera on desktop, yes: press Pick from screen and click anywhere on your display, including other windows and apps. The colour is added to the panel and the history like any other pick. Safari, Firefox and mobile browsers don't offer this eyedropper yet, so take a screenshot instead, paste it with Ctrl+V or Cmd+V, and pick from that.
Why is the picked color slightly different from my design file?
JPG and WebP compression shifts pixel values a little, especially near edges and in gradients, and a wide-gamut picture in Display P3 is shown, and therefore sampled, in sRGB. Zoom in with the loupe and pick from a flat area away from edges for the most accurate value. For exact brand colours, sample a PNG export rather than a compressed photo or screenshot.

Related tools

All image tools

Color palette & contrast checker

Palettes, shades, WCAG contrast and color-blind checks

EXIF viewer & remover

See photo metadata and GPS — then strip it

CSS gradient & shadow generator

Design gradients and box shadows visually

HEIC, WebP & AVIF converter

Convert HEIC, WebP and AVIF to JPG or PNG — and back