🎨

Image Color Extractor

Extract dominant colors and color palette from any image. Click anywhere on the image to pick a color. Copy HEX, RGB, or HSL values instantly.

📂

Click to upload or drag & drop an image

PNG, JPG, GIF, WebP supported

About Image Color Extractor

Upload any image to extract its dominant color palette. Use the eyedropper by clicking anywhere on the image to get the exact color at that point. Copy color values as HEX, RGB, or CSS variables. Ideal for designers, developers, and branding work.

How to Use

  1. Upload an image by clicking or dragging it onto the upload area. The dominant palette is extracted automatically.
  2. Select how many colours to extract (6–16) and click Extract Palette to refresh.
  3. Click any colour swatch to copy its HEX value to the clipboard.
  4. Click anywhere on the image to use the eyedropper and get the exact colour at that pixel.
  5. Use Copy All HEX or Copy CSS Variables to grab the full palette at once.

How the Palette Is Generated

The tool uses the median cut algorithm — a colour quantization method that divides the image's colour space into buckets and finds the average colour in each. This produces a representative palette of the image's most visually prominent colours.

Frequently Asked Questions

Colour quantization is the process of reducing the number of distinct colours in an image to a smaller representative set. The median cut algorithm splits the colour space recursively to find the most dominant colours in the image.
Simply click anywhere on the image preview. The eyedropper reads the exact pixel colour at that point and displays the HEX, RGB, and HSL values. You can then click "Copy HEX" to copy it to the clipboard.
CSS Variables (custom properties) let you define colours once and reuse them throughout your stylesheet. Click "Copy CSS Variables" to get a :root { --color-1: #...; } block you can paste directly into your CSS file.
The median cut algorithm finds mathematically dominant colours, which may not always match the colours your eye is drawn to. Increasing the number of colours to extract can reveal more subtle tones in the image. Use the eyedropper for pinpoint accuracy on specific areas.
The tool provides colours in HEX (e.g. #FF5733), RGB (e.g. rgb(255, 87, 51)), and HSL (e.g. hsl(11, 100%, 60%)) formats. HEX is the most common for web use, while HSL is useful for adjusting lightness and saturation programmatically.