ColorPicker

Image Color Extractor

Upload an image to automatically extract its key colors — processed in your browser, no server upload

Drop image here or click to browse

Supported: JPEG, PNG, WebP, SVG, GIF

You can also paste an image from clipboard with Ctrl+V

Smart Palette Extraction

AI-powered quantization algorithm accurately extracts 8-12 representative colors from your image.

Multiple Format Copy

One-click copy in HEX, RGB, HSL, and even Tailwind CSS class names.

WCAG Contrast Ratio

Automatically calculates AA/AAA accessibility grades for extracted colors. Optimized for web design.

How It Works

Extract colors from images in 3 simple steps

1

Upload Image

Drag & drop or select an image to extract colors from.

2

Auto Extract

Colors are instantly extracted in your browser.

3

Copy & Use

Copy in your preferred format — HEX, RGB, HSL, or Tailwind — and use in your designs.

Frequently Asked Questions

Find answers to common questions

Are my images uploaded to a server?
No. All image processing happens 100% in your browser. Colors are extracted locally using the node-vibrant library — your images are never sent to or stored on any server.
How many colors are extracted?
By default, 8-12 key colors are extracted. Depending on image complexity, you'll get 6 semantic colors (Vibrant, Muted, etc.) plus additional palette colors.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the brightness difference between text and background. AA grade (4.5:1+) is for normal text, AAA grade (7:1+) is for enhanced accessibility.
How are Tailwind class names mapped?
Extracted colors are matched to the nearest Tailwind CSS v4 palette color using RGB Euclidean distance algorithm to provide class names (e.g., bg-blue-500).
What image formats are supported?
JPEG, PNG, WebP, SVG, and GIF images are supported. Most web images can be processed.