Image & Photo

Color Picker from Image

Drop in a photo or screenshot, hover for a magnified loupe, click to pick a pixel — copy HEX, RGB, or HSL, and assemble a palette of up to 20 colors as paste-ready CSS variables.

Drop your image here

or click to browse — JPG, PNG, WebP, GIF, or BMP up to 25 MB.

Private by design. The image is decoded and sampled entirely in your browser via the Canvas API. Nothing is uploaded to a server.

What is an image color picker?

An image color picker reads the exact RGB value of a single pixel from a photo, screenshot, or design mock-up so you can use that color elsewhere — in a brand palette, a CSS variable, a theme token, or a paint match. Designers use it to extract colors from inspiration boards. Front-end developers use it to match a screenshot to a CSS theme. Marketers use it to pull brand colors out of a logo. Painters and crafters use it to match a real-world photo to a paint chip or thread. Unlike a 'dominant color' detector, this tool gives you per-pixel control: hover to preview, click to capture. The magnified loupe shows you the exact pixel under your cursor at 8× zoom, so picking a single highlight or a 1-pixel border is straightforward. Everything runs in your browser — your image never leaves the page.

How to pick colors from an image

1
Drop in your image
Drag a JPG, PNG, WebP, GIF, or BMP file onto the upload area, or click to pick from your device. The image renders in the workspace at preview scale, but pixel sampling happens against the original-resolution copy.
2
Hover to preview a color
Move your cursor over the image. A magnified loupe appears above the cursor showing the exact pixel under it at 8× zoom, with a 1-pixel marker in the center. The cursor color card below the canvas updates live with HEX, RGB, and HSL.
3
Click to add a color to your palette
Click any pixel to add its color to the palette. Duplicates are skipped automatically, so it's safe to click around without bloating the list. Up to 20 colors fit in one palette.
4
Copy any value with one click
Click any HEX, RGB, or HSL in the palette to copy it to the clipboard. Click the swatch itself to copy its HEX. The whole palette also exports as a block of CSS custom properties (--color-1, --color-2, …).
5
Reset and try a different image
Click New image to clear the workspace and load a different file. Use Clear inside the palette card to keep the image but start the palette over.

How browser pixel sampling works

1. Decode the source file with new Image() — the browser handles JPG/PNG/WebP/GIF/BMP natively.
2. Draw the original-resolution image to an off-screen canvas.
3. Render a downscaled preview to the visible canvas (max 900 px on the longer side).
4. On hover, map cursor (x,y) from preview-space back to source-space coordinates.
5. Read the pixel via getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Convert to HEX (R/G/B as 2-digit hex) and HSL (rgbToHsl).

Sampling against the full-resolution canvas (rather than the preview) matters because downscaling averages neighboring pixels — what looks like a clean red on a 100px-tall preview may be (240, 30, 30) instead of the source's exact (255, 0, 0). Mapping cursor coordinates back to the source resolution and sampling there keeps the picked color faithful to the original file. The loupe takes the same approach: it grabs a small square of the original-resolution canvas around the cursor and renders it at 8× into a 120-pixel circle, with imageSmoothingEnabled = false so individual pixels stay sharp.

Reference: MDN — CanvasRenderingContext2D.getImageData

Common color-picking jobs

Source	Best workflow
Brand logo PNG with a transparent background	Hover the loupe over the solid colored area, click once. Copy the HEX. Done in two clicks. PNG transparency renders against the page background — sample inside the logo, not the edge.
Inspiration screenshot from a design site	Pick the background, the primary action color, the secondary accent, and the body text color. Copy CSS variables. Four-color palettes are usually enough to recreate a design system.
Photo for art reference (sky gradient, paint match)	Use the loupe to pick exact pixels along the gradient. Build a 5-7 color palette to recreate the look. Photo gradients have noise — pick from solid-looking areas, not edges.
Bug-report screenshot with the wrong shade of red	Hover the loupe over the bad red, copy the HEX, paste into the issue with the expected HEX next to it. The loupe makes 1-pixel borders and hairlines pickable without zooming the browser.

When to use an image color picker

Extract brand colors from a logo PNG to build a CSS variable palette.
Match a screenshot from a design site to your stylesheet without opening Figma.
Pull a 5-7 color reference palette out of a photo for painting, knitting, or 3D texture work.
Verify the exact color a renderer produced — useful when a screenshot looks 'off' but you can't tell why.
Sample colors out of a moodboard or an inspiration screenshot for a presentation deck.
Pick a paint or fabric color from a real-world photo (sky blue, terracotta, etc.) for a redesign.
Build a theme palette directly from a hero image so the surrounding UI feels visually unified.

Related tools

Background Remover

Cut out the subject from any photo with on-device AI — no upload required.

Image Compressor

Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.

Photo Editor

Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.

Meme Maker

Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.

Frequently asked questions

Are the colors picked from the original file or the preview?

The original file. The visible canvas downscales for performance, but pixel sampling happens against a full-resolution off-screen copy. Cursor coordinates are mapped back to source-space before reading the pixel, so the color you copy matches what's in the file you uploaded.

Why does my picked HEX differ from the value in my design tool?

Two common causes. First, JPG compression averages neighboring pixels, so a 'flat' color region may have a few HEX values within a 1-2 unit RGB range — pick from the visual center, not the edge. Second, browsers and design tools sometimes apply color management; for absolute fidelity, work with PNG sources, which preserve exact RGB.

Is the image uploaded to a server?

No. Decoding, rendering, and pixel sampling all happen in your browser via the Canvas API. You can verify in the network tab that no image bytes leave the page after it loads.

Why does the loupe zoom so far in?

8× zoom with no smoothing makes individual pixels visible, which is the whole point — picking a 1-pixel border or a single highlight is impossible at 1× because the cursor itself is bigger than the pixel. The white-and-black 1-pixel marker in the loupe's center shows exactly which pixel will be sampled if you click.

Can I pick more than 20 colors?

Twenty is the cap because most palette use-cases (brand systems, paint matching, theme generation) need 5-12 colors and anything bigger gets unwieldy. If you hit the cap, the oldest entries are dropped to make room for new picks.

What about transparent pixels in PNGs?

If you click a fully transparent pixel, the picker reads (0, 0, 0) since the underlying RGB is 0. To pick the visible color, hover the loupe over a fully opaque area of the image. Logos with transparent backgrounds work as long as you click inside the colored shape.

What's the difference between this and the Color Converter?

The Color Converter takes a HEX or RGB you already know and converts between formats. This tool sources the color from a pixel in an image. Use the picker first to pull colors out of a screenshot, then the converter if you need OKLCH or any other format the picker doesn't render.

Last updated 2026-04-29

What is an image color picker?

How to pick colors from an image

Drop in your image

Drag a JPG, PNG, WebP, GIF, or BMP file onto the upload area, or click to pick from your device. The image renders in the workspace at preview scale, but pixel sampling happens against the original-resolution copy.

Hover to preview a color

Move your cursor over the image. A magnified loupe appears above the cursor showing the exact pixel under it at 8× zoom, with a 1-pixel marker in the center. The cursor color card below the canvas updates live with HEX, RGB, and HSL.

Click to add a color to your palette

Click any pixel to add its color to the palette. Duplicates are skipped automatically, so it's safe to click around without bloating the list. Up to 20 colors fit in one palette.

Copy any value with one click

Click any HEX, RGB, or HSL in the palette to copy it to the clipboard. Click the swatch itself to copy its HEX. The whole palette also exports as a block of CSS custom properties (--color-1, --color-2, …).

Reset and try a different image

Click New image to clear the workspace and load a different file. Use Clear inside the palette card to keep the image but start the palette over.

How browser pixel sampling works

1. Decode the source file with new Image() — the browser handles JPG/PNG/WebP/GIF/BMP natively.
2. Draw the original-resolution image to an off-screen canvas.
3. Render a downscaled preview to the visible canvas (max 900 px on the longer side).
4. On hover, map cursor (x,y) from preview-space back to source-space coordinates.
5. Read the pixel via getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Convert to HEX (R/G/B as 2-digit hex) and HSL (rgbToHsl).

Common color-picking jobs

Source	Best workflow
Brand logo PNG with a transparent background	Hover the loupe over the solid colored area, click once. Copy the HEX. Done in two clicks. PNG transparency renders against the page background — sample inside the logo, not the edge.
Inspiration screenshot from a design site	Pick the background, the primary action color, the secondary accent, and the body text color. Copy CSS variables. Four-color palettes are usually enough to recreate a design system.
Photo for art reference (sky gradient, paint match)	Use the loupe to pick exact pixels along the gradient. Build a 5-7 color palette to recreate the look. Photo gradients have noise — pick from solid-looking areas, not edges.
Bug-report screenshot with the wrong shade of red	Hover the loupe over the bad red, copy the HEX, paste into the issue with the expected HEX next to it. The loupe makes 1-pixel borders and hairlines pickable without zooming the browser.

When to use an image color picker

Extract brand colors from a logo PNG to build a CSS variable palette.

Match a screenshot from a design site to your stylesheet without opening Figma.

Pull a 5-7 color reference palette out of a photo for painting, knitting, or 3D texture work.

Verify the exact color a renderer produced — useful when a screenshot looks 'off' but you can't tell why.

Sample colors out of a moodboard or an inspiration screenshot for a presentation deck.

Pick a paint or fabric color from a real-world photo (sky blue, terracotta, etc.) for a redesign.

Build a theme palette directly from a hero image so the surrounding UI feels visually unified.