Loading…
Loading…
Extract dominant colors from any image as HEX, RGB, and HSL
Drop image here
or click to browse — JPG, PNG, WebP, GIF
Upload an image to extract colors
Need productivity templates?
Task trackers, project planners, and automation scripts that save hours every week. Starting at $4.
Browse Productivity KitsExtracting colors from images is a standard first step in design work. This tool automates it using k-means clustering on pixel data, outputting colors in developer-friendly formats.
The image is drawn to an off-screen canvas at 200x200 max. Raw pixel data is sampled, filtered, and clustered. Final centroids sorted by dominance become palette entries in HEX, RGB, and HSL.
A designer extracts brand colors from a client logo for a CSS design system.
A developer pulls dominant colors from a hero image for a matching gradient overlay.
A marketer extracts palette from product photos for coordinated social media graphics.
Drag and drop an image or click to browse files
Adjust the palette size slider (5-10 colors)
Click any swatch to copy its HEX/RGB/HSL value
Use the export panel for CSS variables, SCSS, or Tailwind config
About the Color Palette from Image
Any format the browser can render: JPG, PNG, WebP, GIF, AVIF, SVG. The image is processed entirely in your browser — never uploaded.
K-means clustering on sampled pixels. Image scaled to max 200x200. Near-white/near-black pixels excluded. 8 iterations to converge.
Yes. CSS custom properties, SCSS variables, or Tailwind config object. Click Copy next to the export panel.
Spotify-Wrapped stats for ChatGPT, Claude & Claude Code
Open →UtilitiesYour whole life on one grid — one square per week
Open →UtilitiesHow often is AI asked to do your job’s tasks? Rank among 718 jobs
Open →UtilitiesFive rounds, one number — your reaction time in milliseconds
Open →