โ† Back to Blog

How to Extract Colors from an Image

2026-04-12 ยท 5 min read

Common Reasons to Extract Colors from Images

Extracting colors from images has many practical uses in design and development: extracting a palette from brand photography, analyzing competitor design colors from screenshots, applying the color tone of a visual reference to your own project, or obtaining the exact brand color HEX value from a logo image. These needs have spawned multiple color extraction methods.

Method 1: Using Browser Developer Tools

If the target color is already displayed on a webpage, using browser DevTools is the quickest method. Steps: right-click the element โ†’ Inspect โ†’ find the color property in the Styles panel โ†’ click the color swatch to open the color picker and read the HEX/RGB value. For colors within webpage images, first download the image, then use other methods to extract.

Method 2: Screen Eyedropper

Modern browsers provide screen color picking through the EyeDropper API. In online color tools supporting this feature, click the "Pick Screen Color" button, and once the cursor changes to an eyedropper, move it over the desired color area in the image and click to get the exact pixel color value. This is the fastest way to extract colors from any image displayed on screen, but requires browser EyeDropper API support (Chrome 95+, Edge 95+, Opera 81+ support it; Firefox and Safari do not yet).

Method 3: Programmatic Extraction with Canvas API

Using JavaScript's Canvas API, you can extract colors from specific pixels or regions of any image:

function getColorFromImage(img, x, y) {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  const pixel = ctx.getImageData(x, y, 1, 1).data;
  const r = pixel[0];
  const g = pixel[1];
  const b = pixel[2];

  const hex = '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();

  return { r, g, b, hex };
}

// Usage: get color at position (100, 150) in the image
const img = document.querySelector('img');
const color = getColorFromImage(img, 100, 150);
console.log(color.hex); // e.g., '#FF5733'

Note: Due to browser same-origin policy, only images from the same origin as the page can be read by Canvas. Cross-origin images require server-side CORS headers or server-side proxy requests.

Method 4: Extracting a Dominant Palette from an Image

Beyond single-pixel color extraction, a more practical scenario is extracting the dominant color theme (primary color, secondary colors, etc.) from an entire image. This is typically done through color quantization algorithms like Median Cut or K-Means clustering. The popular JavaScript library color-thief can help implement this:

// Using color-thief library
const colorThief = new ColorThief();
const img = document.querySelector('img');

// Get the dominant color
const dominant = colorThief.getColor(img);
// Returns [R, G, B] array

// Get a palette of 5 colors
const palette = colorThief.getPalette(img, 5);
// Returns array of [R, G, B] arrays

Extracting Colors with Python

For server-side or data processing scenarios, Python's Pillow and scikit-learn are powerful tools:

from PIL import Image
import numpy as np
from sklearn.cluster import KMeans

def extract_colors(image_path, n_colors=5):
    img = Image.open(image_path).convert('RGB')
    img = img.resize((150, 150))  # Resize for speed
    pixels = np.array(img).reshape(-1, 3)

    kmeans = KMeans(n_clusters=n_colors, n_init=10)
    kmeans.fit(pixels)

    colors = kmeans.cluster_centers_.astype(int)
    return [f'#{r:02X}{g:02X}{b:02X}' for r, g, b in colors]

palette = extract_colors('photo.jpg', 5)
print(palette)  # ['#FF5733', '#1A2C4E', ...]

Considerations: Limitations of Color Extraction

Try the free tool now

Use Free Tool โ†’