Image Color Picker

Upload an image, hover to preview and click any pixel to read its exact color as hex, RGB and HSL. The tool also extracts the image's dominant palette — every value one click from your CSS.

image-color-picker · runs locally
Drop an image here, click to browse, or paste from the clipboard. PNG, JPEG, WebP, GIF or SVG.

Hover to preview a pixel, click to pick it.

Pick exact colors straight from an image

Recreating a design, matching a brand color from a logo, or pulling a palette out of a photo all start the same way: you need the exact value of one pixel. This picker draws your image onto a canvas, reads the pixel under your cursor, and hands you the color in the three formats CSS understands — hex, rgb() and hsl() — each with its own copy button. Every picked color and palette swatch links to a dedicated color page with tints, shades, harmonies and WCAG contrast ratios, so one click takes you from “that blue in the screenshot” to a full working palette.

How to use the color picker

  1. Drop, browse or paste an image — PNG, JPEG, WebP, GIF or SVG.
  2. Move the crosshair over the preview; the live readout follows your cursor.
  3. Click to lock a pixel, then copy the hex, RGB or HSL value.

Below the preview the tool also extracts the image’s eight most dominant colors automatically, which is often faster than hunting for representative pixels by hand. If you want to build out a full scheme from one of them, feed it into the Color Palette Generator, or convert between formats any time with the Hex to RGB Converter.

A note on color accuracy

Canvas pixels are sRGB, so images saved in wider gamuts (Display P3 photos from a modern phone, for instance) are converted before you pick from them. That conversion is exactly what a browser does when it renders the image on a web page — which means the values you copy here are the right ones to put in your stylesheet, even if a native color picker on a P3 display reports something slightly different.

Frequently asked questions

Is my image uploaded anywhere?

No. The image is drawn onto a canvas element inside your browser and pixels are read locally with getImageData — nothing leaves your device, nothing is stored, and the tool works offline once the page has loaded.

Why does the picked color differ slightly from other apps?

Color profiles. Browsers draw images onto canvas in sRGB, so a photo tagged with Display P3 or Adobe RGB is converted first, and a picker that reads the raw profile-aware values (like a native design tool) can report slightly different numbers. For anything destined for CSS, the sRGB value this tool gives you is the one browsers will actually render.

How are the dominant colors computed?

The image is downscaled to about 64 pixels, each channel is quantized to 4 bits, and identical buckets are counted. The eight most frequent buckets — after skipping near-duplicate shades — become the palette, with each swatch averaging the real pixels that fell into its bucket.

How do I use a picked color in CSS?

Copy any of the three formats directly: hex (#e8a33d) is the most common, rgb() is handy when you need to add alpha as rgba(), and hsl() makes it easy to derive lighter or darker variants by adjusting the lightness value. Each swatch also links to a full color page with tints, shades and contrast ratios.

Color Palette Generator

Generate shades, complementary and analogous palettes from any color.

Open tool →

Hex to RGB Converter

Convert hex color codes to RGB and HSL (and back), with a live preview.

Open tool →

CSS Gradient Generator

Design linear and radial gradients visually and copy the CSS code.

Open tool →