Color Picker from Image
Drop or paste an image, pick an exact source pixel with mouse, touch, or keyboard, and get a ready-to-copy palette immediately.
- Fewer clicks, keyboard friendly
- Features others lock behind paywalls
Drop an image, or choose a file
PNG, JPG, WebP, GIF, AVIF, BMP, or a pasted screenshot
Ctrl/⌘ + V Paste a screenshot
Recent picks
Saved only in this browser
Picked HEX codes appear here.
How to use
- Drop an image, choose a file, or paste a screenshot with Ctrl or ⌘ plus V.
- Click or tap the image to sample its exact source pixel.
- Use the arrow keys on the image for one-pixel adjustments, or Shift plus an arrow key for 10 pixels.
- Copy HEX, RGB, or HSL, then copy the automatically extracted palette as CSS variables when needed.
The picked code comes from the original image pixel
The preview can be smaller than the uploaded image, but a pick is mapped back to the original image coordinates before its RGB value is read. This avoids using a blurred or interpolated preview pixel. The coordinate shown beside the result is zero-based: the top-left pixel is 0, 0.
HEX writes each 8-bit red, green, and blue channel as two base-16 digits. For example, #3B82F6 is rgb(59 130 246). Each channel has 256 integer values, from 0 through 255, so an opaque 24-bit RGB image can represent 16,777,216 combinations.
How the dominant palette is made
For fast palette extraction, this tool samples a canvas whose longest side is at most 256 pixels. It groups similar 8-bit RGB values deterministically, then assigns all sampled pixels to the nearest displayed representative color. The percentage beside every swatch is its share of those sampled visible pixels, and the displayed percentages add to 100%.
Pixels below 50% opacity are excluded from the palette because their apparent color depends on the background behind them. A tiny logo detail may not become a dominant swatch; click that detail in the image to get its exact HEX, RGB, and HSL values instead.
Choose the color notation that fits the job
Use HEX such as #3B82F6 for CSS, tokens, and design handoff. Use rgb(59 130 246) when working with channel values or canvas code. HSL writes the same sRGB color as hue in degrees plus saturation and lightness percentages, which can be convenient for a quick manual adjustment.
A palette is a starting point, not a contrast guarantee. Before using a color for text, test it against the actual background and type size. The related Color Converter checks the WCAG contrast ratio against white and black.
Frequently asked questions
How do I get a HEX color code from an image?
Add an image, then click or tap the pixel you need. This tool reads that original image pixel and shows its normalized six-digit HEX code, such as #3B82F6, alongside RGB and HSL values.
Does the image color picker upload my image?
No. Image decoding, exact-pixel sampling, palette extraction, and recent-pick storage run in the current browser. The image file and its pixels are not sent to a server by this tool.
Why is a small color missing from the automatic palette?
The palette represents the largest areas of a compact 256-pixel-long-side sample, so a tiny accent can be outweighed by a background. Click the small area directly to retrieve its exact original-pixel color code.
Can I select image colors using only a keyboard?
Yes. Focus the image preview, move the selection one original pixel with an arrow key, or 10 pixels with Shift plus an arrow key. The selected HEX, RGB, and HSL values update after each move.
Related tools
Updated 2026-10-23