Color Tool

Color Picker from Image

Q: How does dominant color extraction work?

We use K-means clustering to sample and group pixel colors, finding the most frequent and visually distinct colors.

Q: What color formats are supported?

HEX, RGB, RGBA, HSL, HSLA, CMYK, and HSV/HSB. All formats can be copied with one click.

Pick any color from an image with pixel-perfect precision. Extract dominant palettes, generate harmonies, and export for your projects.

● 100% Free ● No Upload / No Signup ● All in Browser ● WCAG Checker

🎨

Drop your image here

or click to browse files · paste from clipboard (Ctrl+V)

Supports PNG, JPG, WebP, GIF, BMP, SVG · Max 50 MB

or enter an image URL

or pick from screen

📐 –

💾 –

📄 –

🎯 No color picked

🎨 Preview

Click on image to pick a color

–

📋 Values

HEX–

RGB–

RGBA–

HSL–

HSLA–

CMYK–

HSV–

🎨 Saved Palette

Pick colors and add them here

⚡ Dominant Colors

🎵 Color Harmonies

Pick a color to see harmonies

🎚️ Shades

Pick a color to see shades

♿ WCAG Contrast

Pick a color to check contrast

📤 Export Palette

⚡ Extracted Dominant Colors

Features

Everything You Need for Color Picking

Professional-grade tools packed into a single, privacy-focused web app.

🎯

Precision Color Picking

Click anywhere on your image to pick colors with pixel-perfect accuracy using a 15x magnifier loupe.

⚡

Dominant Color Extraction

K-means clustering algorithm automatically identifies the 6 most prominent colors in your image.

🎵

Color Harmonies

Generate complementary, analogous, triadic, split-complementary, and tetradic palettes instantly.

♿

WCAG Contrast Checker

Verify AA and AAA accessibility compliance against white, black, and custom backgrounds.

📋

All Color Formats

Get HEX, RGB, RGBA, HSL, HSLA, CMYK, and HSV values for any picked color with one-click copy.

📤

Multi-Format Export

Export your palette as CSS variables, SCSS, Tailwind config, JSON, or as a PNG swatch strip.

👁️

EyeDropper API

Use the native browser EyeDropper API to pick colors from anywhere on your screen.

🎚️

Shade Generator

Automatically generate 5 lighter and 5 darker shades for any selected color.

🔒

100% Private

All processing happens locally in your browser. No images are uploaded to any server.

FAQ

Frequently Asked Questions

Is this color picker free to use?+

Yes, completely free with no signup required. All processing happens in your browser, so there are no server costs. You can use it as much as you want.

How does dominant color extraction work?+

We use the K-means clustering algorithm to analyze the pixels in your image. The algorithm samples pixels, groups them into clusters by color similarity, and returns the most representative colors sorted by frequency.

What color formats are supported?

HEX (#RRGGBB), RGB (rgb(r,g,b)), RGBA, HSL (hsl(h,s%,l%)), HSLA, CMYK (c%,m%,y%,k%), and HSV/HSB. All formats can be copied with one click.

What is the WCAG contrast checker?+

The WCAG contrast checker calculates the contrast ratio between your selected color and white/black backgrounds. It shows whether the combination passes AA (4.5:1 for normal text) or AAA (7:1 for normal text) accessibility standards.

Are my images uploaded to a server?+

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images never leave your device. When loading from a URL, the image is fetched directly by your browser.

What is the EyeDropper API?+

The EyeDropper API is a browser feature (currently in Chrome/Edge) that lets you pick any color from your screen, not just from the uploaded image. If your browser supports it, you'll see the EyeDropper button.

Can I export my color palette?+

Yes! You can export your saved palette as CSS variables, SCSS variables, Tailwind CSS config, JSON array, or download as a PNG swatch strip image. Just go to the Export tab after saving some colors.