Image Color Picker
Upload an image to generate a color palette with precise picking for instant inspiration.
How to use the Image Color Picker?
- 1Upload an image — Click the upload area, drag and drop an image (JPEG, PNG, WebP, GIF, BMP, AVIF, SVG) into the tool, or paste a screenshot you just copied with Ctrl or Cmd + V. On a phone, tap the area to choose a photo from your library.
- 2Browse the image — Use the magnifying glass to hover over any area of the image for pixel-perfect color selection, and set the lens from 1x to 12x with the - / + control, the [ and ] keys, or Ctrl + scroll. Guide lines cross on the exact pixel being read. On touch, each tap opens the lens above your finger so nothing hides under it.
- 3Pick a color — Click on any pixel to extract its value in all seven notations: HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK. On touch, a tap places the crosshair for a live preview - nudge it with the on-screen arrows, then Confirm to save.
- 4Copy the value — Auto-copy puts the format you chose on the clipboard with the click; otherwise copy any row of the notation list by hand. On a phone the sticky bottom bar keeps the value and Copy button within thumb reach.
Why use our Image Color Picker?
The Image Color Picker allows you to upload images and instantly generate a color palette. You can pick precise colors by hovering over the image with the magnifying glass and copy their values in any of the seven notations: HEX, RGB, RGBA, HSL, HSLA, HSV or CMYK.
This tool is perfect for designers, developers, and anyone looking to quickly extract colors from an image for web or graphic design projects. All processing happens locally in your browser, ensuring complete privacy. Your file is handed to the browser's File API, drawn on a canvas, and read back pixel by pixel—no upload request is ever made.
File pixels, not screen pixels
This tool and the screen Color Picker look similar but read from different places. The screen picker samples whatever your display is showing, through the EyeDropper API, which is why it only works in desktop Chromium browsers. This page decodes an image file into a canvas and reads the pixel you click, so it needs no special API and runs in Firefox, Safari and on phones.
Choose by what you have: a file you can hold on to goes here, where the numbers come from the file itself; something that only exists on screen - a video frame, another app, a PDF viewer - goes to the screen picker. Both pages then print the same seven notations for the pixel they found, and the file never leaves your device in either case.
How the palette line is built
The swatches under the image are not five colors someone picked. They are the output of a median-cut quantization over the decoded pixels, which explains most of the arguments about what it got wrong.
| Stage | What happens | What it means for you |
|---|---|---|
| Decode | The browser turns the file into a bitmap on a canvas | Whatever the encoder stored is what gets measured |
| Sample | One pixel in every ten is read | Fast on large photos, but rare colors can be skipped entirely |
| Cluster | Similar pixels are merged into up to 10 buckets | A one-pixel accent line may never appear as its own swatch |
| Report | The biggest buckets become the palette, ordered by weight | It answers what dominates, not what the brand guide says |
Clicking anywhere on the image bypasses all of this: you get that exact pixel in all seven notations at once, which is why clicking beats the palette whenever you need a specific color.
What you get for every pixel
All seven notations come off the same four channels the canvas reports, so they cannot disagree with each other. This is the full output for a click on orange #ff5733.
| Notation | Example | Where you need it |
|---|---|---|
| HEX | #ff5733 | CSS, HTML, design tools, palette naming |
| HEX with alpha | #ff573380 | The same pixel sampled at 50% alpha out of a transparent PNG |
| RGB and RGBA | rgb(255, 87, 51) | CSS, canvas fillStyle, getImageData() |
| HSL and HSLA | hsl(11, 100%, 60%) | CSS custom properties, theme scales |
| HSV | hsv(11, 80%, 100%) | Photoshop, Figma and other color sliders |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Print, as a formula - not a profile-based print conversion |
| CSS or Tailwind block | --color-1: #ff5733 | Palette Generator, which exports the set you assembled |
Choose one format under Output Format and every click copies that; the Contrast Checker is where you verify the pair you intend to ship.
Getting clean values out of a file
- Click flat areas, not outlines. Every edge in a raster image is a blend of the two colors it separates, so a click one pixel off an icon border returns a color that exists nowhere else in the file.
- Prefer PNG for logos and UI marks. JPEG stores sharp color transitions with ringing, which shows up as faint halos of colors the designer never chose. Flat art saved as WebP or PNG keeps its edges honest.
- Flatten transparency first. A mark on a transparent background is measured against whatever the encoder left in the invisible pixels. Composite it onto the page color you intend to use, then extract.
- Screenshots are fine, sources are better. A screenshot has already passed through your compositor and any scaling the operating system applied. If you can get the original asset, the numbers are closer to the design intent.
- Zoom in with the magnifier. On a large photo the difference between two neighboring pixels is invisible at fit-to-width; the magnifier is what makes a deliberate click possible. Push it up to 12x with the - / + control and the guide lines will still cross on the pixel you are about to take.
Formats the upload accepts
These are the types the file dialog offers, so nothing you expect to use is greyed out. Drag-and-drop and paste accept any other type your browser can decode.
| Type | Offered in the dialog | What happens |
|---|---|---|
| PNG | Yes | The usual choice for flat graphics, screenshots and marks with an alpha channel |
| JPEG | Yes | Fine for photography; expect soft colors near hard edges |
| WebP | Yes | Common on the modern web, both for photos and for flat art |
| GIF, BMP, AVIF | Yes | Decoded like the three above; a GIF is limited to its own 256-color palette, so read it as stored |
| SVG | Yes | Rasterized at its intrinsic size, so a 64px mark gives you 64px of pixels - export a larger bitmap when the pixel matters |
HEIC, the iPhone and Mac default, is the one type no mainstream browser decodes. Set Settings → Camera → Formats → Most Compatible or export a PNG; the tool says so instead of failing silently.
Worked example: from logo file to CSS
- 1. Upload the mark. Drag the file onto the drop area, or paste it with Ctrl or Cmd + V; the palette appears as soon as the image decodes.
- 2. Click the fill you care about rather than trusting the first swatch, which is simply the most common color in the file - often the background.
- 3. Copy the notation you need - HEX, RGB, HSL, HSV or CMYK - from the value panel, then paste it into the snippet below and rename the token to something your team will recognize.
- 4. Verify the pair you actually ship - that HEX against your real text or background - in the Contrast Checker before it reaches a stylesheet.
The extracted color as a token
/* paste the swatch straight in */
.logo-mark {
color: #ff5733;
}
/* or keep it as a token and derive the rest */
:root {
--brand: #ff5733;
--brand-weak: rgba(255, 87, 51, 0.12);
--brand-edge: #c93a1e;
}Deriving the weak and edge variants by hand keeps them in the same family; the Palette Generator can propose the variants for you instead.
Doing this with a brand mark specifically has its own page: pick color from a logo. For photos and screenshots, see picking color from an image. To rework a value you already have, paste it into the Color Converter, which reads and writes the same seven notations.
This page and the tool above it are built and maintained by the Online Color Tools team. The walkthrough was last reviewed against the live tool; both ship from the same code base, so if a step here ever disagrees with what you see on screen, that is a bug - tell us and it gets fixed, not buried.