↑↓ to move · Enter to open · Esc to close

Image Color Extractor

Make a color palette from image files in seconds: the dominant color, 5 to 12 main colors with HEX, RGB, and HSL codes, and a picker for any single pixel. Export the palette as CSS or JSON.

Updated
Your files are processed in your browser and never uploaded.

Your image

JPG, PNG, WebP, AVIF, GIF, or BMP, up to 50 MB. Ctrl+V pastes.

    Palette

    Pick a color

    Your colors will appear here
    1. Choose or drop an image on the left
    2. Read the main colors below
    3. Click the image to pick any pixel

    How to get a color palette from an image

    1. Choose, drop, or paste an image.
    2. Read the palette. The bar shows how much of the image each color covers, and the first color is the dominant one.
    3. Change Colors in the palette to get between 5 and 12 colors.
    4. Click or tap anywhere on the image to read the exact color of that pixel.
    5. Copy a HEX code, copy the palette as CSS variables, or download it as JSON or a PNG swatch.

    How it works

    The palette comes from median cut, a classic way to split an image's colors into groups:

    1. The image is scaled down to at most 200 pixels on its long side, which keeps the colors and makes the work fast. Transparent pixels are skipped.
    2. All pixels start in one group. The group with the widest spread in red, green, or blue is split at the middle value of that channel.
    3. Splitting repeats until there are as many groups as colors you asked for.
    4. Each color in the palette is the average of one group, and its share is that group's part of all pixels.

    The pixel picker reads the full-size image, not the small copy, so it gives the exact stored value.

    Examples

    • The sample sunset photo gives six colors: a slate blue from the sky and lake (about a quarter of the pixels), an almost equal share of dark green-gray from the hills and shore, two muted violets, a warm peach from the horizon, and a dusty rose. The last digits of each code can differ slightly between browsers, because each one scales the photo down in its own way.
    • A logo on a white background usually puts white first, then the brand colors.
    • An image made of 75% #f0b90b and 25% #1e2329 gives exactly those two colors, with shares of 75% and 25%, however many colors you ask for.

    Using the palette

    The CSS export looks like this and can go straight into a stylesheet:

    :root {
  --color-1: #1f3a73;
  --color-2: #f59e42;
}

    The JSON export lists each color with its HEX, RGB, HSL, and percentage. To turn one of the colors into other formats or check its contrast, use the Color Converter.

    Limitations

    • Median cut picks colors by how many pixels have them. A small but striking accent, such as a red dot in a green field, may not make the list; pick it with the picker instead.
    • Colors are read as stored in the file, without converting a wide-gamut color profile to sRGB.
    • One image at a time.

    Frequently asked questions

    What is the dominant color of an image?

    The color group that covers the most pixels. It is listed first, with its share of the image in percent.

    How many colors should I extract?

    Five or six cover most photos. Use more for busy pictures, or when you need a larger set for charts and themes.

    Can I get the color of one exact spot?

    Yes. Click or tap the image. The picker shows the HEX, RGB, and HSL value of that pixel and its position.

    Is my image uploaded?

    No. The image is read and analyzed in your browser.

    Often used together with the Image Color Extractor.

    • Color ConverterDeveloper Tools

      Converts colors between HEX, RGB, HSL, HSV, and CMYK and checks WCAG contrast.

    • CSS Gradient GeneratorDeveloper Tools

      Builds linear, radial, and conic CSS gradients visually and copies the CSS.

    • Image Grayscale

      Turns color images into grayscale or sepia, with a before/after slider.