Color Picker from Image: 7 Methods That Actually Work

You have an image. You need the exact hex code of that blue in the header, or the warm orange from a sunset photo, or every color in a brand's logo. Eyeballing it gets you close. Close is not good enough.

A color picker from image extracts precise color values — hex, RGB, HSL — directly from pixel data. The method you choose depends on whether you need a single color, a full palette, or programmatic extraction at scale. This guide covers all three scenarios with seven tested approaches, from zero-install browser tools to Python scripts that process thousands of images.

One thing to get right first: your source image format matters more than most guides admit. Lossy formats like JPEG introduce compression artifacts that shift colors by 5–15 units in RGB space. If color accuracy matters, convert your source to PNG before sampling. Lossless formats preserve the exact pixel values you need.

Why Source Format Affects Color Accuracy

JPEG compression works by averaging nearby pixels into 8×8 blocks. That averaging shifts colors — sometimes visibly, sometimes just enough to give you #2B7DE0 when the actual brand blue is #2979FF. For casual use, this doesn't matter. For design systems, brand guidelines, or data visualization, it's a real problem.

PNG, WebP (lossless mode), and TIFF preserve every pixel exactly as authored. If you're extracting colors from a logo, a UI mockup, or any image where precision matters, work from a lossless source. Not sure which format to use? Our format comparison guide breaks down the tradeoffs.

For palette extraction from photographs — where you want the general color mood, not exact hex values — JPEG is fine. The compression artifacts blend into the natural variation already present in photos.

Method 1: Browser-Based Color Pickers (Zero Install)

The fastest path from image to hex code. Upload an image, click a pixel, get the color.

Best Option: imagecolorpicker.com (v2, 2024)

Upload any image and click anywhere to sample a color. It also generates a palette of dominant colors automatically. No account required, no software to install.

Strengths: Instant results, generates palettes alongside single-pixel picks, supports drag-to-zoom for precise sampling.

Limitations: Requires uploading your image to a third-party server. If you're working with confidential design files or client assets, that may be a dealbreaker.

Runner-Up: HTML Canvas + JavaScript (In-Browser, Private)

If you want color picking without uploading anything, you can build a private tool in about 20 lines of JavaScript:

// Drop an image onto a canvas, click to sample colors
const canvas = document.getElementById('picker');
const ctx = canvas.getContext('2d');

document.getElementById('fileInput').addEventListener('change', (e) => {
  const img = new Image();
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
  };
  img.src = URL.createObjectURL(e.target.files[0]);
});

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((e.clientX - rect.left) * (canvas.width / rect.width));
  const y = Math.floor((e.clientY - rect.top) * (canvas.height / rect.height));
  const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
  const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
  console.log(`RGB: ${r}, ${g}, ${b} | Hex: ${hex}`);
});

This runs entirely in your browser. The image never leaves your machine — identical to how Pixotter's image processing works. Save this as an HTML file and you have a permanent, private color picker.

Method 2: Native OS Tools

Your operating system has a color picker built in. No browser, no upload, works on any pixel visible on your screen.

macOS: Digital Color Meter (Pre-Installed)

Open Digital Color Meter from Applications → Utilities. Hover over any pixel on your screen. It displays RGB values in real time. To copy the color, press ⇧⌘C.

Tip: Set the dropdown to "Display in sRGB" for consistent values. The default "Display native values" gives device-dependent colors that won't match across screens.

Windows: PowerToys Color Picker (v0.87.1)

Microsoft PowerToys includes a system-wide color picker. Install PowerToys v0.87.1 from the Microsoft Store or GitHub, then activate the picker with Win+Shift+C. Click any pixel on screen to copy its hex value.

License: MIT (genuinely open source, no restrictions).

Settings to configure: Open PowerToys Settings → Color Picker → set default format to HEX. Enable "Show color name" for quick identification of named CSS colors.

Linux: gpick (v0.2.6)

gpick is the strongest Linux color picker. It samples from anywhere on screen, converts between color spaces, and generates palettes from sampled colors.

# Ubuntu/Debian
sudo apt install gpick

# Fedora
sudo dnf install gpick

License: BSD 3-Clause (permissive open source).

Method 3: Design Tools with Built-In Eyedroppers

Every major design application includes a color picker. If you already have one open, this is your fastest path.

Figma (Web, v124)

Open the image in Figma. Select the Eyedropper tool (shortcut: I), click any pixel. The color appears in the Fill panel with hex, RGB, and HSL values. Figma's eyedropper works on rasterized images, vector objects, and even across frames.

Figma's edge: It averages a small region around your click point by default, which gives you a more representative color from photographs. For single-pixel precision, zoom to 800%+ before sampling.

Adobe Photoshop (v25.12, 2024)

The Eyedropper tool (I) picks colors from any pixel. Configure the sample size in the options bar — "Point Sample" gives you the exact pixel, while "3×3 Average" or "5×5 Average" gives a blended result.

License: Proprietary, subscription required ($22.99/mo for Photography plan).

For batch extraction from many images, Photoshop's Actions panel can automate the eyedropper and log values, but the Python method below (Method 5) is more practical at scale.

GIMP (v2.10.38)

GIMP's color picker tool (shortcut: O) works identically to Photoshop's. Click to sample, and the foreground color updates. Open Windows → Dockable Dialogs → Pointer Information for real-time color readout as you move the cursor.

License: GPL v3 (free and open source).

Method 4: Browser DevTools (For Web Colors)

Need the exact color used on a webpage — not the image, but the CSS? Browser DevTools give you the computed color without sampling errors.

Chrome DevTools (v124+)

1. Right-click any element → Inspect.
2. In the Styles panel, click any color swatch to open the color picker.
3. Click the eyedropper icon (bottom-left of the color panel).
4. Click anywhere on the page to sample.

This reads the actual rendered pixel value, which accounts for transparency, blending, and color profiles. The sampled color may differ from the CSS value if the element has opacity or blend modes applied.

Firefox DevTools (v125+)

Firefox has the same flow: Inspect → click a color swatch → eyedropper. Firefox's implementation also shows the color's contrast ratio against adjacent elements, making it useful for accessibility auditing.

Method 5: Python Scripts for Batch Extraction

When you need colors from hundreds or thousands of images — product catalogs, social media assets, design system audits — manual picking doesn't scale. Python handles this cleanly.

Extract Dominant Colors with colorgram.py (v1.2.0)

# pip install colorgram.py==1.2.0 Pillow==10.4.0
import colorgram

# Extract top 6 colors from an image
colors = colorgram.extract('photo.png', 6)

for color in colors:
    r, g, b = color.rgb
    hex_val = f'#{r:02x}{g:02x}{b:02x}'
    proportion = color.proportion
    print(f'{hex_val} — {proportion:.1%} of image')

Output:

#2979ff — 34.2% of image
#1a1a2e — 22.8% of image
#e8e8e8 — 18.1% of image
#ff6b35 — 12.4% of image
#16213e — 8.3% of image
#f5f5f5 — 4.2% of image

License: MIT (colorgram.py), PIL Software License (Pillow) — both permissive.

colorgram.py uses a modified median-cut algorithm that groups similar pixels into clusters. The proportion field tells you how much of the image each color occupies, which is essential for generating weighted palettes.

Extract the Single Most Common Color

from PIL import Image
from collections import Counter

def dominant_color(image_path):
    img = Image.open(image_path).convert('RGB')
    # Resize for speed — color distribution holds at lower resolution
    img = img.resize((150, 150))
    pixels = list(img.getdata())
    most_common = Counter(pixels).most_common(1)[0][0]
    r, g, b = most_common
    return f'#{r:02x}{g:02x}{b:02x}'

print(dominant_color('logo.png'))  # → #2979ff

Performance note: Resizing before counting is not optional for large images. A 4000×3000 photo has 12 million pixels. At 150×150, you have 22,500 — the dominant color calculation drops from seconds to milliseconds, and the result is identical for palette purposes.

If you're batch-processing images, resize them first to a consistent dimension. This normalizes the extraction and cuts processing time dramatically.

Process an Entire Directory

from pathlib import Path
import colorgram
import json

results = {}
for img_path in Path('product_images').glob('*.png'):
    colors = colorgram.extract(str(img_path), 5)
    results[img_path.name] = [
        {'hex': f'#{c.rgb.r:02x}{c.rgb.g:02x}{c.rgb.b:02x}', 'proportion': round(c.proportion, 3)}
        for c in colors
    ]

with open('palette_report.json', 'w') as f:
    json.dump(results, f, indent=2)

This outputs a JSON file mapping each image to its color palette — ready to feed into a design system audit, a product database, or a color-based search index.

Method 6: CLI Tools for Developers

ImageMagick (v7.1.1-39)

ImageMagick can extract colors from the command line, which makes it scriptable and pipeable:

# Get the single most dominant color
magick convert photo.png -resize 1x1! -format '%[hex:p{0,0}]' info:
# Output: 2979FF

# Get the top 10 colors as a histogram
magick convert photo.png -colors 10 -format '%c' histogram:info:

License: Apache 2.0 (permissive open source).

Get the Color of a Specific Pixel

# Color at pixel (200, 150)
magick convert photo.png -format '%[hex:p{200,150}]' info:
# Output: FF6B35

This is the CLI equivalent of clicking a pixel with an eyedropper. Combine it with shell scripting to extract colors at specific coordinates across hundreds of images.

Method 7: Mobile Apps

Sometimes the color you need is in the physical world, not a file. Mobile apps use your camera as a real-time color picker.

Recommendation: Adobe Capture if you're in the Creative Cloud ecosystem — palettes sync to Photoshop, Illustrator, and XD automatically. Color Grab for one-off sampling on Android.

Comparison: Which Method to Use

The short version: For a single color from a single image, use your OS tool (Digital Color Meter or PowerToys). For palettes, use Python's colorgram.py. For web colors, use DevTools. For everything else, the Canvas/JS method gives you pixel-perfect accuracy with zero dependencies.

Tips for Accurate Color Extraction

1. Use Lossless Source Images

JPEG artifacts shift colors. Work from PNG or lossless WebP when accuracy matters. If your source is JPEG, that's fine for palette extraction (dominant colors survive compression), but don't trust individual pixel samples. Understanding the difference between PNG and WebP helps you pick the right source format.

2. Sample Multiple Points

A single pixel can be an outlier — noise, anti-aliasing, or a compression artifact. Sample 3–5 nearby pixels and average them, or use a 5×5 sample size in your tool's settings.

3. Mind Your Color Profile

sRGB is the web standard. If your image uses Adobe RGB, Display P3, or ProPhoto RGB, the hex values you sample will look different on an sRGB display. Convert to sRGB first, or verify your tool is reading the embedded profile. The relationship between RGB and CMYK color models matters here — a color that looks perfect on screen may shift in print if you're working across media.

4. Account for Display Calibration

Two monitors showing the same hex code can look visibly different if one is uncalibrated. If you're matching brand colors, trust the hex values from your color picker — not what your eyes see on screen. The number is the truth; the display is an approximation.

5. Resize Large Images Before Batch Processing

A 6000×4000 image doesn't give you a better palette than a 300×200 version. Resize down before batch processing. The dominant colors are the same, and your scripts run 400× faster.

Common Color Formats and Conversions

When you pick a color, you'll get a value in one format. Here's how they relate:

Most tools output hex or RGB. Convert between them with this formula:

# Hex to RGB
def hex_to_rgb(hex_color):
    h = hex_color.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

# RGB to Hex
def rgb_to_hex(r, g, b):
    return f'#{r:02x}{g:02x}{b:02x}'

# RGB to HSL
def rgb_to_hsl(r, g, b):
    r, g, b = r/255, g/255, b/255
    mx, mn = max(r, g, b), min(r, g, b)
    l = (mx + mn) / 2
    if mx == mn:
        h = s = 0
    else:
        d = mx - mn
        s = d / (2 - mx - mn) if l > 0.5 else d / (mx + mn)
        if mx == r: h = (g - b) / d + (6 if g < b else 0)
        elif mx == g: h = (b - r) / d + 2
        else: h = (r - g) / d + 4
        h /= 6
    return round(h * 360), round(s * 100), round(l * 100)

FAQ

How do I pick a color from an image on my phone?

Use Adobe Capture (iOS/Android, v9.2) or Color Grab (Android, v4.0). Open the app, point your camera at the image or load it from your gallery, and tap to sample colors. Adobe Capture syncs palettes to Creative Cloud; Color Grab copies hex codes to your clipboard.

What is the most accurate way to extract a color from an image?

Use a lossless source image (PNG or lossless WebP) and sample with a tool that reads raw pixel data — Python's Pillow library, ImageMagick, or a design tool like Figma at high zoom. Avoid sampling from JPEG files when exact color values matter, as compression shifts pixel colors by 5–15 RGB units.

Can I extract a full color palette from an image automatically?

Yes. Python's colorgram.py (v1.2.0) extracts dominant colors and their proportions with three lines of code. For a no-code option, imagecolorpicker.com generates a palette when you upload an image. Both use clustering algorithms to group similar pixels and return representative colors.

How do I get the hex color code of a specific pixel?

On macOS, use Digital Color Meter (pre-installed) and hover over the pixel. On Windows, install PowerToys v0.87.1 and press Win+Shift+C. On Linux, use gpick (v0.2.6). All three copy the hex value to your clipboard with a keyboard shortcut. From the command line, ImageMagick's magick convert image.png -format '%[hex:p{x,y}]' info: returns the hex value at exact coordinates.

Does JPEG compression affect color picking accuracy?

Yes. JPEG uses lossy compression that averages pixels in 8×8 blocks, shifting individual pixel colors. For palette extraction (dominant colors), the effect is negligible. For precise single-pixel sampling — matching brand colors, extracting exact values from UI mockups — convert to PNG first to preserve the original pixel data.

What color format should I use: hex, RGB, or HSL?

Use hex (#2979FF) for CSS and HTML — it is the most widely supported and compact. Use RGB (rgb(41, 121, 255)) when you need to manipulate individual channels in code. Use HSL (hsl(217, 100%, 58%)) when adjusting lightness or saturation, since HSL maps directly to how humans perceive color relationships.

How do I extract colors from images in bulk?

Write a Python script using colorgram.py (v1.2.0) and Pillow (v10.4.0) to loop through a directory of images. Resize each image to 150×150 before extraction for performance. Output results to JSON for easy integration with databases or design tools. ImageMagick's CLI also supports batch processing via shell scripts.

Is there a way to pick colors from an image without uploading it?

Yes. The HTML Canvas method loads images locally in your browser — the file never leaves your machine. Native OS tools (Digital Color Meter, PowerToys, gpick) read pixels directly from your display. Python scripts and ImageMagick process files on your local filesystem. Only browser-based web tools require uploading.