🎨

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.

About Image Color Extractor

The Image Color Extractor picks the dominant colors from any uploaded photo and displays their HEX, RGB, and HSL codes. Perfect for building a color palette from a brand photo, artwork, or screenshot.

How to Use

  1. Click Upload Image and choose a photo or graphic.
  2. The tool analyzes the image and extracts the top dominant colors.
  3. Click any color swatch to copy its HEX code.
  4. Use the extracted palette in your design, CSS variables, or brand guidelines.

How It Works

The image is drawn onto a canvas and its pixel data is read using getImageData(). A color quantization algorithm clusters pixels into dominant color groups and selects the most representative colors from each cluster.

Example

Upload a brand photo of a product against a teal background. The extractor identifies the dominant teal, product highlight colors, and neutral tones — giving you the building blocks for a matching design palette.

Frequently Asked Questions

The tool typically extracts 5–10 dominant colors. Very complex images with many colors may show fewer representative swatches as the algorithm groups similar hues together.
The tool extracts the average of pixel clusters, not exact pixel values. This smooths out noise and compression artifacts. For a specific pixel's exact color, use a browser extension color dropper instead.
Yes. Any image file works — photos, screenshots, graphics, logos, illustrations. PNG and JPG are both supported.
No. All processing happens in your browser using the canvas API. Your image never leaves your device.