Extract dominant colors from any image instantly. Upload a photo and get a beautiful color palette with HEX, RGB and HSL values. Free, fully in-browser.
This free tool extracts the dominant colours from any image using a k-means clustering algorithm on the Canvas pixel data - entirely in your browser, with no image data uploaded to any server. Upload a photo and get a ready-to-use palette with HEX, RGB and HSL values for each dominant colour.
Upload any image using the drop zone above - drag and drop or click to browse. The tool analyses the image pixels using a k-means clustering algorithm to group similar colours, then returns the most dominant colour clusters as a palette with HEX, RGB and HSL values. Click any colour swatch to copy its HEX value to the clipboard, or use "Copy all HEX" to get every colour at once. Adjust the count slider (4-12 colours) to control how many colours are extracted.
The colour palette extractor uses k-means clustering - the same algorithm used by professional tools like Adobe Color and Canva's palette generator. Each pixel in the image is treated as a point in 3D RGB colour space. The algorithm initialises cluster centres using k-means++ seeding (spreading initial centroids for better convergence), then iteratively assigns each pixel to its nearest centroid and updates the centroid to the mean colour of its cluster. After 12 iterations, the centroids represent the most dominant colour regions in the image, sorted by frequency.
The tool supports all image formats that your browser can display - JPEG, PNG, WebP, GIF (first frame), BMP, AVIF, and SVG. Transparent pixels (alpha < 128) are automatically excluded from the colour extraction to avoid including transparency as a "colour". For best palette results, use photographs or illustrations with distinct colour regions rather than images with very subtle gradients or noise, where many similar colours may cluster together into fewer distinct palette entries.
Start with a hero image or brand photograph and extract 6-8 dominant colours. The most frequent colour (first in the palette) typically makes a good background or primary brand colour. The second or third most dominant colour works well as an accent. Use the lighter colours for backgrounds and cards, and darker or more saturated colours for text and buttons. Copy the HEX values and paste them directly into your CSS variables or design tool (Figma, Sketch, Adobe XD). This technique ensures your colour palette is harmonious because it is derived from a single coherent image.
No - this colour palette from image tool processes everything entirely in your browser. The image is read using the JavaScript FileReader API and rendered to an off-screen <canvas> element for pixel analysis. No image data is ever sent to any server, stored in a database, or logged. This makes it safe to extract colours from confidential client photos, unreleased product images, or internal brand assets.