Image Color Picker

Extract HEX, RGB, HSL, and CMYK color codes from any image instantly. Upload a photo, paste with Ctrl V, drag & drop anywhere on the page, or hover over the sample images to identify exact color values and named color palettes.

Sample images:
Tropical Beach
Big Sur
Green Grass
Add
Loading image…
Hoodh Ahmed / Unsplash
Color source
Color Palette
Selected Color
Hover over the image to preview a color
Dominant Colors (0)
Load an image to extract palette
GUIDE

Everything you need to know

Answers to common questions about how the image color picker works, which color model to use, and how to get accurate results every time.

A color picker is a tool that lets you identify and capture the exact color value of any pixel on screen. Instead of guessing a hex code or eyeballing an RGB value, you point at a color and the tool reads it directly from the image data, returning precise, reproducible codes you can drop straight into design or development work.

This tool reads any pixel from an uploaded image and returns its value in HEX, RGB, HSL, and CMYK simultaneously, with one-click copy for each. It auto-generates a dominant 6-color palette from the whole image using k-means clustering, looks up a human-readable name for every color via a color-naming API, and offers a magnified loupe with a pixel grid for pinpoint accuracy. You can also navigate pixel-by-pixel with the arrow keys for cases where a mouse is too coarse.

Upload an image by clicking "Add", dragging and dropping it anywhere on the page, or pasting it with Ctrl V (or ⌘V on Mac). Then simply hover over the image — a magnified loupe appears showing the pixel grid under your cursor, and the color values update live in the panel on the right. Click anywhere on the image to lock in a color, or use the arrow keys to nudge the selection one pixel at a time (hold Ctrl or Alt to jump ten pixels at once).

It depends on where the color is going. Use HEX for web and UI design, since it is the standard format in CSS and design tools. Use RGB when working with screens, code, or anywhere colors are defined by light. Use HSL when you want to intuitively adjust hue, saturation, or lightness, such as creating tints and shades of the same color. Use CMYK when preparing artwork for print, since it reflects how ink layers combine on paper.

The tool returns every picked or extracted color in four formats at once: HEX, RGB, HSL, and CMYK. Each value is generated from the same underlying pixel data, so they always stay perfectly in sync, and any of them can be copied to your clipboard individually.

Picking colors directly from an image is the fastest way to build an accurate palette from real-world references, like a product photo, a brand asset, or a piece of inspiration you found online. It removes the guesswork of manually matching colors by eye, keeps your design consistent with its source material, and saves time compared to recreating a palette from scratch.

The tool accepts all common raster formats supported by your browser, including PNG, JPG / JPEG, WebP, and GIF. Images can be uploaded as files, dragged and dropped, or pasted directly from the clipboard.