Skip to content
ImgKiloImgKiloOpen tools

Color Picker from Image

Color picker from image

Drop an image and hover or drag to preview any color, then click or tap to grab it as HEX, RGB, HSL, HWB, OKLCH or OKLAB. A magnifier helps you land on the exact pixel on desktop and phone alike, and every value copies with one tap. It runs in your browser, so the image is never uploaded.

  • Files never leave your device
  • Runs in your browser
  • Free, no signup

How it works

  1. 1

    Drop an image

    Add a JPG, PNG, WebP, GIF or AVIF. It is drawn to a canvas in your browser at full resolution, with no upload.

  2. 2

    Hover, drag or tap

    Move over the image, or drag a finger on a phone, to preview the color live. The magnifier shows the exact pixel under the point.

  3. 3

    Copy any format

    Lock a color, then copy it as HEX, RGB, HSL, HWB, OKLCH or OKLAB with one tap. Each pick is saved to a recent row.

What this picker gives you

Exact-pixel reading

The color is read from a native-resolution canvas, not a scaled preview, so the value is the true pixel under your cursor.

Classic and modern formats

Every pick shows HEX, RGB and HSL plus the modern HWB, OKLCH and OKLAB, so you copy the exact notation your stylesheet or design tool expects.

Private by design

The image stays in your browser tab. Nothing is uploaded, which you can verify in the Network panel, so screenshots and client work are safe.

Where this helps

Brand

Matching a brand color

Read the exact color from a logo or reference image instead of eyeballing it, so your design uses the real brand value.

Design

Lifting a shade from a photo

Sample a color from a photograph for a background or accent so the palette feels drawn from the image itself.

Inspect

Reading a color from a screenshot

Confirm the exact gray or accent a screenshot uses when you need to reproduce it precisely in your own work.

Anywhere

Sampling across your screen

On supported browsers, the screen eyedropper grabs a color from any window, not just the image you dropped in.

Tips that help

  • 1

    Use the magnifier for tight spots

    When two colors sit a pixel apart, the loupe makes it clear which pixel you are about to pick, so you do not grab the neighbor by accident.

  • 2

    Copy HEX for the web

    Stylesheets and most design tools expect HEX. Copy RGB for image editors, and HSL when you want to adjust the color rather than just record it.

  • 3

    Build a set from recent picks

    Each click is saved to the recent row. Pick several points across an image to gather a working set before you move on.

  • 4

    Need the whole palette at once?

    To pull the dominant colors automatically rather than one at a time, use the palette extractor instead of clicking each shade.

Picking color from an image: HEX, RGB, HSL, and getting the exact pixel

Pulling a precise color out of an image is one of those small jobs that comes up constantly: matching a brand color from a logo, grabbing a shade from a photo for a design, or reading the exact value a screenshot uses. This guide covers how an on-image eyedropper works, what the HEX, RGB and HSL values mean and when to use each, and why doing it in the browser keeps the pixel reading both accurate and private.

How an on-image eyedropper reads a color

When you drop an image here, it is drawn onto a canvas at its full pixel resolution. As you move the pointer, the tool maps your cursor position back to a single source pixel and reads its red, green and blue values directly from that pixel.

Color picker from image

Because the reading comes from the native-resolution canvas rather than a scaled-down preview, the value is exact. The magnifier loupe that follows the cursor exists for the hard cases, where two colors sit a pixel apart and you need to be sure you are landing on the right one.

Clicking locks the color so it stops following the cursor, and each click is remembered in a recent-picks row. That turns one image into a small working palette you can copy from as you go.

HEX, RGB and HSL: which to copy

All three are the same color in different clothes. RGB states the three channels as numbers from 0 to 255, which is intuitive and what many editors expect. HEX is the compact six-digit version of those channels, the form CSS and most design tools use, so it is usually the one to copy for the web.

HSL describes the color as hue, saturation and lightness instead of channels. It is the most human of the three for adjusting a color: nudge the lightness to get a tint or shade, or shift the hue to find a neighbor, without juggling three separate channel values.

Read more

This picker shows all three at once and copies any of them with a tap, so you are never converting by hand. Grab HEX for code, RGB for an image editor, HSL when you want to tweak the color rather than just record it.

Common reasons to sample a color

Brand matching is the big one. A logo or a reference image holds the exact brand color, and reading it straight off the pixel is faster and more reliable than eyeballing a match in a color wheel.

Design work is the next: lifting a shade from a photograph for a background, a border, or accent text so the palette feels drawn from the image rather than bolted on. Building a full set at once is the job of the color palette extractor, which pulls the dominant colors automatically.

And there is plain inspection: a screenshot uses a specific gray you need to reproduce, or you want to confirm two elements really are the same color. Reading the pixel removes the guesswork. If you also need an image's size or format facts, the resolution checker covers those.

Frequently asked questions

Honest answers to what people ask before using this tool.

Drop an image, then move your pointer over it. The color under the cursor previews live, and clicking locks it. The HEX, RGB and HSL values appear next to a large swatch, each with a one-tap copy button. Everything runs in your browser, so the image is never uploaded.

They describe the same color in two notations. RGB lists the red, green and blue channels as three numbers from 0 to 255. HEX packs those same three values into a six-digit code like #1A8F5C, which is what CSS and design tools usually expect. This picker shows both, plus HSL, HWB, OKLCH and OKLAB, so you can copy whichever your tool wants.

Yes. Alongside HEX, RGB and HSL, every pick is shown as HWB, OKLCH and OKLAB. OKLCH and OKLAB are the modern, perceptually uniform color spaces now in CSS and design systems like Tailwind, which keep lightness consistent as you shift hue. Copy whichever notation your project uses.

Yes. Drag a finger across the image to preview colors live, with the magnifier showing the exact pixel above your fingertip, and lift to lock the color. Every format still copies with a single tap, so the full picker works on touch, not just desktop.

On Chrome and Edge, yes. If your browser supports the EyeDropper API, a 'Pick from screen' button appears that lets you sample any pixel on your display, including other windows. Where it is not available, you can still pick from any image you drop in.

Yes. The image is drawn to a canvas at its native resolution and the value is read from the precise pixel under your cursor, not an averaged or approximated one. The magnifier helps you land on the exact pixel you want when colors sit close together.

Yes. Each color you click is added to a row of recent picks you can copy or reselect later, which makes it easy to build up a small set from one image without losing earlier choices.

No. The image is decoded and read entirely in your browser. Nothing is sent to a server, which you can confirm in the Network panel, so private screenshots and client work stay on your device.

Further reading

Independent references if you want to go deeper on the formats and tradeoffs.

Related tools