What the tool does
The tool extracts a color palette from an image locally in the browser. It shows HEX, RGB, and HSL, and lets you copy one color, the palette line, or CSS variables for design, websites, and brand materials.
How to use it
- Upload a JPG, PNG, WebP, or another image format supported by your browser.
- Choose the number of colors and analysis precision.
- Copy a single color, the full palette, or CSS variables.
How colors are selected
The tool scales the image down to a safe size, reads pixels through Canvas, and groups nearby shades into color buckets. The most visible groups become the palette, while very similar shades are merged so the result is useful for design instead of being a list of nearly identical tones.
Analysis precision changes speed and detail. Fast mode is useful for large photos and quick drafts, while a more precise pass helps when small accents, brand colors, or complex illustrations matter.
Using the palette in design
Each color is shown as HEX, RGB, and HSL, so it is easy to move the palette into Figma, CSS, a presentation, or a brand guide. You can copy one color, the whole palette line, or ready CSS variables.
If the background dominates the image, include or exclude it depending on the job. For a product card, the background is often noise. For a moodboard or cover image, the background can be part of the visual mood.
Limits and privacy
The image is not uploaded to a server: analysis runs in the browser. This is useful for client mockups, references, and internal materials that should not be sent to an external service.
The palette is an approximation, not certified color measurement. Gradients, noise, transparency, JPEG compression, and display color profiles can affect the result, so use original specifications for print or strict brand control.