Image Color Picker

Find the code of any color in your image

Love a color in a photo and want it in your design or website? Need a company logo's colors to build a matching presentation? This tool does two things: picks the color of any point in the image with single-pixel accuracy, and automatically extracts the dominant color palette with each color's share of the image.

How to use it

1. Choose, drop or paste an image.
2. A palette of eight dominant colors appears, sorted by how much of the image they cover.
3. Click any point in the image — or drag across it — to read its exact color.
4. Copy the code in the format you need, or copy the whole palette as CSS variables.

HEX vs RGB vs HSL

• HEX: the most common web format, e.g. #4F46E5 — three hexadecimal pairs for red, green and blue.
• RGB: the same values in decimal from 0–255, e.g. rgb(79, 70, 229), used in design and code.
• HSL: describes hue, saturation and lightness — the easiest format for creating lighter or darker shades.

How the palette is extracted

We downscale the image inside your browser and run K-Means clustering, which groups similar pixels into eight clusters. The average of each cluster becomes a palette color, so the palette reflects the colors that truly dominate the image, not rare ones.

Ideas

• Build a consistent visual identity for your site from your logo.
• Pick slide or social post colors that match a cover photo.
• Match paint or decor colors from a room photo you like.
• Create a beautiful gradient from two palette colors with the CSS Gradient Generator.

Frequently Asked Questions

Last updated: 2026-10-20