Color Palette from Image

About the Color Palette from Image

Drop, paste or choose an image and get its dominant colors — from 3 to 16 — sorted by how much of the picture each one covers. Numbered points on the image show where each color comes from; drag a point to a different spot and its swatch follows. It works for photos and for logos and flat graphics, whose exact colors are kept.

The image is analysed on your device. A small copy of about 48,000 pixels is clustered with k-means in the OKLab color space, so colors that look alike are grouped the way you see them, and the same image always gives the same palette. Export the result as CSS variables, Tailwind, SCSS, JSON, Adobe swatches (.ase), a PNG or SVG palette card, or a CSS gradient whose stripes follow each color’s share.

Common uses

• Pulling brand colors out of a logo file to build a style guide or website theme.
• Turning a mood-board photo into a palette for a design, illustration or interior.
• Matching slide, poster or social-media colors to a hero photo.
• Getting a CSS gradient placeholder that resembles an image while it loads.

How the colors are found

• The image is copied at a smaller size (about 48,000 pixels) by picking pixels rather than blending them, so no in-between colors are invented. Transparent pixels are skipped unless you turn that off.
• Each pixel is converted to OKLab, a perceptual color space in which equal distances look like equal differences.
• The colors are grouped with k-means: Lloyd’s algorithm (1982), started with the k-means++ seeding of Arthur and Vassilvitskii (2007). A fixed random seed makes the result reproducible.
• Each swatch is the average color of its group. If one exact color makes up at least half of a group — a flat area of a logo — that exact color is used instead.
• Groups whose colors are closer than the just-noticeable difference that CSS Color 4 uses (0.02 in OKLab) are merged, and the image is clustered again to look for other colors, so no two swatches look the same. If the image has fewer clearly different colors than you ask for, you get fewer swatches and the page says so.
• The share is the fraction of analysed pixels closest to that color.

Photos, logos and screenshots

For logos and flat graphics, request at least as many colors as the logo has; images with no more distinct colors than you ask for return their exact colors. PNG, SVG and WebP lossless files work best, because JPEG compression adds noise that spreads each flat color over many nearby values.

For photos, 5 to 8 colors usually summarize the image well. Large areas such as sky or skin take the first places; use Sort by hue or lightness to arrange the swatches for a palette, and drag points onto details you want to include.

Sample points

Every number on the image marks a typical pixel of that color, chosen inside a uniform area rather than on an edge. When you drag a point, the swatch takes the average of the 3 × 3 pixels under it on the displayed image, and all shares are recalculated for the new palette. Points that you moved are marked picked in the list.

Limitations

• Colors come from a reduced copy of about 48,000 pixels, so details only a few pixels wide in a large image may not get a color of their own.
• Swatches are averages of their group and may not appear exactly anywhere in a photo; drag the point to use a real pixel color.
• Browsers convert wide-gamut (Display P3) and CMYK images to sRGB before the page can read them, and only the first frame of an animated image is analysed.
• HEIC/HEIF photos from iPhones open directly in Safari. Other browsers first download the libheif decoder (1.4 MB, LGPL-3.0) from this site, once; it then decodes the photo on your device.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.