How to use
- 1Drag a photo into the box or click to choose one; a sample image is shown to start with.
- 2Set the number of colours from 3 to 16 and choose k-means or median cut.
- 3Sort colours by share or by lightness and copy any HEX code with one click.
- 4Export the palette as CSS variables, JSON or a PNG swatch strip.
How the dominant colours are found
The image is scaled down and its pixels are grouped in a perceptual colour space (CIELAB). K-means clusters tones that look alike to the eye and usually gives the most natural palette. Median cut repeatedly splits the colour range in two and gives an evenly spread result that can pick up small but distinct accents. Each colour shows its percentage of the image, so you can tell the main colour from the accents.
For painters, designers and home projects
Plan your mixes before you start a landscape, pull website colours from a brand photo, or take ideas for walls and textiles from a room you like. Remember that a colour on screen is not the same as a physical paint chip: monitors, lighting and camera settings all shift it, so always check the manufacturer’s colour card before buying paint.
Your image stays on your device
Everything runs in your browser in a background thread (Web Worker). The photo is never uploaded, which makes the tool safe for client work and personal pictures.
Frequently asked questions
How do I get the color codes from a picture?
Add the picture to the tool and the dominant colours are listed with HEX (#rrggbb) and RGB values. Use the copy button to paste a code straight into Photoshop, Canva, Figma or your CSS.
How many colors should I extract?
Five or six colours make a good general palette. If you want to see tonal steps for painting, go for 10–16.
What is the difference between k-means and median cut?
K-means merges colours that look similar and gives a natural result. Median cut is faster and divides the colour range into equal parts, so it can catch small accent colours.
Will the color match a paint chip exactly?
No. Screen colours depend on your display and on the light in the photo. Treat the result as an approximate reference and compare it with a physical colour card.
Not happy with the results?
Talk to Webin Agency about fast, SEO-friendly websites, e-commerce and Google Ads management.