Color Picker from Image

Extract exact Hex, RGB, and HSL color codes from any image using a precision eyedropper tool.

Last updated: March 25, 2026

Upload Image to Pick Colors

Click or drop image here

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Color Picker from Image?

An image color picker (also called an eyedropper tool) allows you to sample the exact color of any pixel in a photo, screenshot, logo, or graphic and retrieve its precise color code. Rather than guessing that a muted blue is "approximately #4A90E2", the eyedropper reads the actual RGBA value stored in those specific pixels and converts it to every useful color format instantly.

Designers use image color pickers constantly: to extract brand colors from a logo PSD when the Figma source is unavailable, to identify the exact shade of a competitor's accent color from a website screenshot, to match colors across multiple design assets, or to build a custom color palette from a mood board photograph. This tool uses the browser's Canvas API to read exact pixel values from uploaded images — no software installation required, no image uploaded to a server.

How to Use Color Picker from Image

Upload an image (JPG, PNG, WebP, GIF) using the "Upload Image" button or drag-and-drop

A magnified zoom overlay appears as you hover over the image, showing the exact pixel under your cursor

Click anywhere on the image to "capture" the color at that pixel

All color formats are displayed instantly: Hex (#4A90E2), RGB (74, 144, 226), HSL (213°, 73%, 59%), HSB, CMYK

Click any color format field to copy that value to your clipboard — or click "Add to Palette" to collect multiple colors

Common Use Cases

Extracting the exact brand hex color from a client-provided logo PNG to use in a CSS stylesheet
Identifying the accent color used in a competitor's website by uploading a screenshot
Building a complete color palette from a product photography mood board
Matching a physical texture or fabric color by photographing it and picking the dominant shade
Extracting color values from a Dribbble or Behance inspiration screenshot when the source file is unavailable
Finding the exact color codes from a marketing poster or printed collateral to ensure digital consistency
Color-matching an illustration element to existing brand colors before the full asset is delivered
Picking multiple colors from a data visualization chart to document the color scheme for a style guide

Example Input and Output

Sampling different regions of a sunset photograph to build a color palette:

Image uploaded: sunset-photo.jpg

Image: sunset-photo.jpg (3024 × 4032 px)
Click positions:
  1. Sky (top): (x: 512, y: 120)
  2. Horizon glow: (x: 820, y: 890)
  3. Dark foreground: (x: 200, y: 3500)

Colors captured by clicking

Color 1 — Sky Blue
  Hex:  #4A90D9
  RGB:  74, 144, 217
  HSL:  211°, 65%, 57%
  CMYK: 66%, 34%, 0%, 15%

Color 2 — Warm Amber
  Hex:  #E8922A
  RGB:  232, 146, 42
  HSL:  33°, 79%, 54%
  CMYK: 0%, 37%, 82%, 9%

Color 3 — Deep Shadow
  Hex:  #1A1A2E
  RGB:  26, 26, 46
  HSL:  240°, 28%, 14%
  CMYK: 43%, 43%, 0%, 82%

Total Privacy

Your uploaded images are loaded into a browser-local Canvas element and are never transmitted to a server. This is especially important when picking colors from confidential mockups, unreleased brand assets, or proprietary product designs.

For Designers — eyeDropper API

Chrome 95+ supports the native EyeDropper API (window.EyeDropper), which lets you pick a color from anywhere on your screen — not just the uploaded image. If your browser supports it, click "Pick from Screen" to activate the native eyedropper, which even works on other browser tabs, desktop applications, and your operating system UI.

Color Profile and Display

Colors may appear slightly different across monitors due to display calibration and color profiles (sRGB vs Display P3 vs Adobe RGB). Modern Apple devices use Display P3, which has a wider gamut than sRGB — colors that appear vivid on an M-series Mac may look washed out on a standard Windows monitor. For cross-platform color consistency, work in sRGB and export in sRGB.

Frequently Asked Questions

How accurate is the color reading?

The tool reads the exact RGBA integer values of each pixel stored in the image file. The accuracy is limited only by the image format: JPEG uses lossy compression which alters individual pixel values slightly from the original, so extracted colors may differ slightly from the "true" source color. PNG, WebP lossless, and GIF use lossless encoding, so pixel-exact colors are guaranteed.

What is the difference between Hex, RGB, and HSL formats?

All three represent the same color in different notations. Hex (#4A90D9) encodes three 8-bit values as hexadecimal: #RRGGBB. RGB (74, 144, 217) uses three decimal 0-255 integers for Red, Green, Blue channels. HSL (211°, 65%, 57%) represents color as Hue (0-360° angle on the color wheel), Saturation (0-100% intensity), and Lightness (0-100%). HSL is more intuitive for humans — increasing Lightness makes a color brighter, decreasing Saturation makes it greyer.

Why does the eyedropper read a slightly different color than I expect?

Images on the web are displayed with gamma correction and color profile transforms applied by the OS and browser. The raw pixel value stored in the file may differ from the value visually rendered after display color management. Additionally, if the image uses an embedded ICC color profile other than sRGB, the browser may transform the colors before rendering. The tool reads post-rendering screen pixel values via Canvas, which accounts for the browser's rendering pipeline.

Can I pick colors from a screenshot of a website?

Yes. Take a screenshot (Win+Shift+S on Windows, Cmd+Shift+4 on macOS), save it as PNG, and upload it to the color picker. PNG screenshots preserve exact pixel values without JPEG lossy compression. This workflow is the most reliable way to extract exact colors from any web page without needing browser extension access.

What is CMYK and when should I use it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used by physical printers. It is a subtractive model — ink absorbs (subtracts) light. Screens use RGB (additive light). If you are preparing colors for print design (business cards, product packaging, brochures), use the CMYK values. Note that not all RGB colors can be perfectly reproduced in CMYK — vivid screen blues and greens often shift when printed.

What does the Alpha channel (A in RGBA) mean?

Alpha represents transparency: 255 (100%) means fully opaque, 0 means fully transparent. PNG and WebP support per-pixel transparency. When you pick a color from a transparent PNG region, the Alpha value will be less than 255. In CSS, transparent colors are expressed as rgba(74, 144, 217, 0.5) or as hex with alpha: #4A90D980 where the last two hex digits (80 in hex = 128 in decimal = 50% opacity).

How This Tool Works

The uploaded image is drawn to an off-screen HTML Canvas element at its original resolution. When the user hovers over the image preview, the tool reads the pixel coordinates and calls ctx.getImageData(x, y, 1, 1).data — this returns a Uint8ClampedArray of 4 bytes: [Red, Green, Blue, Alpha]. These raw RGBA values are then converted to all other color formats mathematically: Hex via byte-to-hexadecimal conversion, HSL via the standard RGB-to-HSL formula, HSB via the RGB-to-HSB formula, and CMYK via the standard RGB-to-CMYK conversion.

Technical Stack

HTML5 Canvas APIctx.getImageData() pixel readingRGBA to Hex/HSL/CMYK conversionNative EyeDropper API (Chrome)Client-side only