Color Palette from Image - Extract HEX, RGB, HSL Colors

Loading tool…

Get the Colors Out of Any Image

A good photo, a logo or a screenshot of a site you like is often the fastest way to a color scheme. Drop in an image and QodeCat shows its dominant colors as swatches, ordered by how much of the image each one covers.

5 to 10 colors: Use the slider to choose how many dominant colors you want.
Every format: Each swatch shows HEX, RGB and HSL; click a value to copy it.
Share in percent: See how much of the image each color covers.
Ready for code: Copy the whole palette as CSS custom properties or as JSON.

Why use this tool?

Real Dominant Colors, Not Random Pixels

The tool groups similar pixels with the median-cut algorithm and refines the groups with k-means, so each swatch is the average of a whole area of the image rather than a single pixel. Transparent pixels are ignored.

Private and Fast

The image is read and analyzed locally in your browser on a copy scaled down to at most 200 pixels. Nothing is uploaded, and the palette updates instantly when you change the number of colors.

Frequently Asked Questions

Q. How are the colors chosen?

Pixels are split into groups of similar colors (median cut), then each group is refined with a few k-means passes. Every swatch is the average color of one group, sorted by its share of the image.

Q. Why do I sometimes get fewer colors than I asked for?

If the image contains fewer distinct colors than the number you chose, for example a flat logo with three colors, the tool returns only the colors that really exist instead of inventing near-duplicates.

Q. What does the CSS export look like?

A :root block with one custom property per color, from --color-1 (the most common) onward, with HEX values. The JSON export lists HEX, RGB, HSL and the share in percent for each color.