Open menu

Color Palette from Image

Choose a photo, illustration or logo to pull out its dominant colors. You decide how many colors (from 2 to 12), see each one as a swatch with its hex code and its share of the image, and order them by how common or how light they are. Export the palette as CSS custom properties, SCSS variables, a Tailwind v4 theme or design tokens, and check which pairs have enough contrast for text. The image is analysed on your device and never uploaded.

Input

or drop it here. It stays on your device.
Order

Palette

Choose an image, or use the sample, to extract its colors.

    Export as
    CSS variables
    :root {

}

    Runs entirely in your browser. Nothing you paste or open here is uploaded or stored.

    How to use the palette extractor

    1. Choose an image or drop it on the box: PNG, JPEG, WebP, GIF, AVIF or SVG.
    2. Set the number of colors. Five or six is a good start for a brand or interface palette.
    3. Choose the order: most common first, or light to dark.
    4. Copy individual hex codes from the swatches, or set a name prefix and export the whole palette.
    5. Read the contrast check before using any pair for text.

    Use the sample image analyses a built-in sunset illustration, so you can see how the tool behaves before choosing your own image.

    How it works

    1. Downscaling. The image is drawn at most 200 pixels on its longest side. Fine detail doesn’t change the main colors, and fewer pixels keeps the analysis fast.
    2. Sampling. Up to 12,000 pixels are used, and pixels that are more than half transparent are skipped, so logos on transparent backgrounds give their real colors.
    3. Clustering. Pixels are converted to OKLab and grouped with k-means: starting points are spread out with the k-means++ method, then each group’s centre is refined until it stops moving. A fixed seed makes the result the same every time for the same image.
    4. Reporting. Each swatch is the average sRGB color of its group, with its share of the sampled pixels. Text on each swatch is set to black or white, whichever contrasts more.

    Worked examples

    Choose your logo with a transparent background and set the count to the number of colors in the logo. The swatches match the logo’s colors, because transparent pixels don’t create a “background” color. Export as CSS variables named after your brand.

    Example 2: a website theme from a hero photo

    Choose a landscape photo and extract six colors. Sort light to dark: the lightest swatch can be a background, the darkest a text color, and a saturated mid-tone an accent. Check the contrast list to see which pairs work for text.

    Example 3: matching an illustration

    Extract eight colors from an illustration to build charts or icons in the same style. The share percentages show which colors dominate, which helps you keep the same balance.

    Tips for better palettes

    • Crop first. Large areas of sky or background dominate the result; cropping to the subject gives more interesting colors.
    • Ask for more colors than you need, then pick the best ones. Similar shades are easy to drop.
    • Adjust for accessibility. Darken or lighten a swatch slightly with the color converter to reach the contrast you need.

    Common mistakes

    • Using mid-tone photo colors for text, which usually fails contrast.
    • Expecting exact brand colors from a JPEG photo. Compression and lighting shift colors; use official hex codes for brand work.
    • Too few colors for busy images, which averages distinct colors into muddy ones.
    • Ignoring dark mode. A palette taken from a bright image may need darker variants.

    Frequently asked questions

    How are the colors chosen?

    The image is scaled down, transparent pixels are ignored, and the remaining colors are grouped with k-means clustering in the OKLab color space, where distances match how different colors look to people. Each swatch is the average color of one group.

    Why do I get different colors from another tool?

    Palette extraction involves choices: the color space, how many colors, how pixels are sampled and whether similar shades are merged. Clustering in a perceptual space like OKLab tends to give more balanced palettes than grouping by RGB values.

    Is my image uploaded anywhere?

    No. The image is drawn onto a canvas in your browser and analysed there. Nothing is sent to a server, so you can use unreleased designs or private photos.

    Can I use the extracted colors for text?

    Only if the contrast is high enough. The checks list pairs that reach 4.5:1, the WCAG minimum for normal text. Photos often produce mid-tones, so you may need to add a near-black or near-white.

    How many colours should I extract?

    Five to eight is a good start for a brand or UI palette. Use more for illustration work, and fewer if you only need an accent colour to match a photo.

    Sources