How to Extract Colors from Screenshots for Design Consistency

You're building a landing page and need to match the exact blue from a client's mockup. Or you're documenting your product and want the button color to match across screenshots and text. Eyeballing hex codes doesn't cut it.

Here's how to extract exact colors from any image.

The Problem with Eyeballing Colors

Human color perception is unreliable. That blue you think is #3B82F6 could actually be #2563EB — and while you might not notice in isolation, side by side the difference is obvious. Inconsistent colors make your product look unfinished.

Browser-Based Color Picking

Zumie Color Picker — Upload any image, click anywhere to extract the exact color. Get hex, RGB, and HSL values with one-click copy. Builds a palette as you pick. Runs entirely in your browser, no upload to servers.

This is the fastest option when you have a screenshot or mockup and need specific colors from it.

How Color Extraction Works

Under the hood, browser-based color pickers use the Canvas API:

1. Draw the image onto a <canvas> element
2. Use getImageData() to read the pixel data at the clicked coordinates
3. Convert the RGBA values to hex, RGB, and HSL formats

This gives you the exact pixel color — not an approximation. The same technique powers the eyedropper in design tools like Figma and Photoshop.

Color Formats Explained

Hex (#3B82F6)

The most common format for web development. Six characters representing red, green, and blue channels in hexadecimal.

RGB (rgb(59, 130, 246))

Same information as hex but in decimal. Easier to read and manipulate programmatically.

HSL (hsl(217, 91%, 60%))

Hue, Saturation, Lightness. The most intuitive format for humans — you can create color variations by tweaking individual values:

• Hue — The actual color (0-360 degrees on the color wheel)
• Saturation — How vivid the color is (0% = gray, 100% = full color)
• Lightness — How bright (0% = black, 50% = pure color, 100% = white)

HSL is particularly useful for creating hover states, dark mode variants, and accessible color palettes.

Building a Consistent Color Palette

Start from Screenshots

If you're documenting an existing product:

1. Take screenshots of key UI elements (buttons, headers, backgrounds)
2. Extract the primary, secondary, and accent colors
3. Document them in your style guide with all three formats

Create Variations with HSL

Once you have a base color in HSL, create a full palette:

/* Base: hsl(217, 91%, 60%) — your primary blue */
--color-50:  hsl(217, 91%, 97%);  /* Lightest background */
--color-100: hsl(217, 91%, 93%);
--color-200: hsl(217, 91%, 85%);
--color-500: hsl(217, 91%, 60%);  /* Base */
--color-700: hsl(217, 91%, 45%);  /* Darker for text */
--color-900: hsl(217, 91%, 25%);  /* Darkest */

Just adjust the lightness value while keeping hue and saturation constant.

Check Accessibility

After extracting colors, verify contrast ratios meet WCAG standards:

• 4.5:1 minimum for normal text
• 3:1 minimum for large text and UI components

Tools like WebAIM's contrast checker can verify this.

Common Use Cases

Matching Brand Colors from a PDF

Clients send a brand guide as a PDF. Screenshot the color swatches, upload to a color picker, and extract the exact values.

Documenting Existing UI

When reverse-engineering a design system from a live product, screenshots + color picking is faster than digging through CSS.

Creating Consistent Tutorials

If you're making tutorials or documentation with screenshots, extract the key colors so your annotations and highlights match the product.

For Screen Recordings

The same principle applies to video content. When you're recording your screen for demos or tutorials, consistency matters — matching backgrounds, annotation colors, and transitions make your content look intentional.

Zumie gives your screen recordings consistent, beautiful backgrounds and smooth zoom transitions automatically. No need to manually match colors across recordings — every video gets the same polished treatment.