Image Colour Extractor

Upload any image to extract its dominant colour palette with hex & RGB codes.

Ad · 728×90
🖼️
Drop an image here, or click to browse
PNG, JPG, GIF, WebP supported
8 colours
Ad · Responsive

About This Image Colour Extractor

Extracting a colour palette from an image is a common task in design, branding, and web development. Designers use extracted palettes to ensure their UI matches brand photography, artists use them for colour studies, and developers use them to set CSS variables and theme tokens. This tool uses a median-cut quantisation algorithm to cluster the pixels in your image into the most representative colour groups, returning the dominant colours sorted by frequency.

Click any colour swatch to see its hex code, RGB values, and HSL representation — all ready to copy with one click. Your image is processed entirely in your browser using the HTML5 Canvas API; it is never uploaded to any server and no data leaves your device.


How to Use

  1. Drag and drop an image onto the upload zone, or click it to browse for a file.
  2. Adjust the slider to choose how many colours to extract (4–16).
  3. The palette appears automatically — click any swatch to see its hex, RGB, and HSL values.
  4. Use ⿻ Copy All Hex Codes to copy the full palette to your clipboard.

Frequently Asked Questions

This tool uses a median-cut algorithm. It samples pixels from the image (downscaled for speed), then repeatedly splits the largest colour "bucket" along its widest colour channel until the desired number of clusters is reached. The average colour of each cluster becomes one palette entry. This produces perceptually natural palettes that reflect the actual dominant colours rather than the most statistically frequent pixels.

There is no strict file size limit, but very large images are automatically scaled down before processing to keep extraction fast. The visual preview always shows the original image at display size; only the colour sampling uses a downscaled version.

No. Your image is processed entirely in your browser using the HTML5 Canvas API. It is never uploaded to any server, never logged, and never stored anywhere outside your device.

Ad · Responsive