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.

Further reading

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

Related tools