Image Color Palette Extractor

Upload any photo, logo, or artwork to instantly extract its dominant colors. Get hex, RGB, and HSL values — then copy the palette as CSS custom properties, a Tailwind config, or a simple hex list.

🖼️
Drop image here or click to upload
Supports JPG, PNG, WebP, GIF · Processed entirely in your browser — nothing uploaded

How to Use the Color Palette Extractor

  1. Upload your image: Click the upload zone or drag and drop any JPG, PNG, WebP, or GIF file. The image stays entirely in your browser — nothing is sent to any server.
  2. View dominant colors: The tool samples thousands of pixels and clusters them using a quantization algorithm to find the most representative colors. Each color shows its HEX code, RGB, and HSL values.
  3. Copy individual values: Each swatch has copy buttons for HEX, RGB, and HSL so you can paste directly into your CSS, Figma, Photoshop, or any design tool.
  4. Export the full palette: Click "Copy CSS Variables" to get a ready-to-paste :root { } block. "Copy Tailwind Palette" gives you a JSON object for your tailwind.config.js. "Copy All HEX" gives a comma-separated list.

Frequently Asked Questions

No. This tool uses the HTML5 Canvas API to process your image entirely within your browser. The image data never leaves your device. No upload, no server, no storage — complete privacy.
The image is drawn onto an off-screen HTML5 Canvas and pixel data is sampled at regular intervals. The sampled colors are then grouped using a modified median-cut quantization algorithm to find clusters of similar colors. The most representative color from each cluster is selected as a dominant color.
JPG/JPEG, PNG, WebP, and GIF (first frame). All modern browsers support rendering these formats on canvas. Very large images (over 20 MB) may be slow to process due to the large number of pixels. The tool automatically downsamples large images for faster extraction.
Click "Copy CSS Variables" to copy a :root { } block with variable names like --color-palette-1 through --color-palette-8. Paste it at the top of your stylesheet and reference the colors anywhere using color: var(--color-palette-1). Rename them to match your project's naming convention.
The Tailwind export gives you a JSON object with keys like palette-1 through palette-8. Paste this inside your tailwind.config.js theme.extend.colors object. Then use classes like bg-palette-1, text-palette-2, etc. in your HTML or JSX.

Related Tools