Gradient Extractor

The tool runs in three stages. (1) The image is downscaled to 200x200 max (for speed) and drawn to a hidden canvas. (2) Each pixel's R, G, B values are quantized by bit-shifting (2-bit, 3-bit, or 4-bit per channel) so that similar colors merge into "buckets" — 2-bit gives 64 buckets (8 per channel), 3-bit gives 512, 4-bit gives 4096. (3) A frequency map counts how many pixels fall into each bucket, then the top 40 buckets are clustered with a 8-iteration K-means into the requested number of centroids. The K-means step merges over-represented buckets and splits under-represented ones to give an even palette. Finally, the percentage of each output color is the sum of pixels in the buckets that merged into its centroid. The whole pipeline runs in JS on the canvas pixel data, no WebAssembly, no network.

It depends on the image. For photographs and complex gradients, 3-bit (medium, default) gives 5-10 distinct dominant colors with smooth transitions. For flat-design illustrations, posters, or logo art, 2-bit (low) gives a posterized palette of 3-6 strong colors. For detailed paintings or photos with many subtle hues, 4-bit (high) gives finer differentiation but may include near-duplicate colors. If the result looks "too few" colors, raise the granularity; if it looks "too many similar" colors, lower it. Also, more colors (the top selector) plus higher granularity is the most detailed; fewer colors plus lower granularity is the most abstracted. Try 3 colors at 2-bit for a Bauhaus look, or 10 colors at 4-bit for a full spectrum.

The preview uses a CSS linear-gradient or radial-gradient background, with one color stop per palette color, evenly distributed from 0% to 100% of the gradient. The "Linear 90°" option runs left-to-right (the default), "45°" runs bottom-left to top-right, "180°" runs bottom-to-top, and "Radial" uses a circle with the first color at the center and the last at the edge. The PNG download renders the same gradient to a 1200x480 canvas via canvas createLinearGradient / createRadialGradient, then exports as PNG with the standard toBlob. The CSS download saves a .css file with a .gradient class that you can paste into any project.

Yes. The extractor is pure client-side JavaScript inlined in the HTML. There are no network calls, no API uploads, no analytics, no CDN. Your image is loaded via FileReader (which reads the file from your local disk) and drawn to a hidden canvas, then the pixel data is processed locally. The downscaled copy, the palette, the gradient, and the exported PNG are all generated in your browser. You can extract colors from private photos, customer logos, or proprietary product images without any data being transmitted. The only file operations are FileReader for the drop-zone and the standard <a download> for the CSS/PNG exports.

No, the tool only accepts local files via the file picker or drag-and-drop. Adding URL-based loading would require fetching the image from a remote server, which would leak the URL (and any sensitive image path or query parameters) to whatever CORS proxy or image host serves it. The privacy-first design is intentional: the image never leaves your device. If you have an image at a URL that you want to process, download it first (right-click → Save As, or use a download manager), then drop the local file into the tool. The tool also accepts any image format the browser can decode — PNG, JPG, WebP, GIF, BMP, ICO, AVIF (on supported browsers) — so the local workflow is flexible.