Color Palette Generator

The tool uses an iterative Median Cut algorithm to extract dominant colors from your image. The image is downsampled to 200x200 pixels for speed, then all pixel colors are read via the browser Canvas API. Starting from one bucket containing every pixel, the algorithm repeatedly finds whichever current bucket has the greatest color range on any channel, sorts that bucket by that channel, and splits it at the median. This continues until the target number of buckets is reached. Each bucket is then averaged to produce one representative color, and the results are sorted from lightest to darkest by perceived luminance.

Yes. If two buckets end up averaging to the exact same HEX color, the duplicate is removed. Splitting also stops early if the remaining bucket has no color range left to divide. Simple logos, flat-color graphics or images with very limited color variety can return fewer swatches than the count you selected, this is expected rather than a bug.

The Image Color Picker lets you click a specific pixel to read its exact color. It is for when you need a precise color from a specific point in the image. The Color Palette Generator automatically analyzes the entire image and extracts the most dominant colors across all regions. It is for when you want to understand what colors an image is built from, or when you want to build a UI palette inspired by a photo, illustration or brand asset.

4 colors works well for simple images, logos and graphics with flat color. 6 colors is a good default for most photos and illustrations. 8 colors captures more variation and works well for complex or colorful images. 12 colors is for images with a wide range of distinct hues such as festival photography, detailed illustrations or design mockups. For web UI use, 4 to 6 dominant colors is usually enough to build a complete palette.

The CSS output is a :root block containing the extracted colors as CSS custom properties (CSS variables). You can paste this directly into your stylesheet. Each variable is named with the prefix you set (defaulting to --color-1, --color-2, etc.) and you can then reference them anywhere in your CSS with var(--color-1). This is the fastest way to turn a palette extracted from an image into a set of usable design tokens for a web project.

Each swatch block is labeled with its HEX code and RGB value. The HSL value shown in the on-screen palette is not included in the PNG export, only HEX and RGB are printed onto the downloaded image.

Pixels that are more than roughly half transparent are excluded from the analysis, not only pixels that are completely transparent. This keeps mostly-transparent edges and overlays from skewing the extracted palette toward whatever color happens to be underneath them.

No. The entire extraction runs in your browser using the Canvas API. Your image is drawn onto a hidden canvas element and the pixel data is read locally. Nothing is sent to any server. You can disconnect from the internet after the page loads and the tool still works.

The algorithm finds the most statistically dominant colors across the entire image, not the colors that look most visually prominent. On photos with a large sky or background, muted sky blues may dominate even if a smaller subject is more visually striking. This is a property of algorithmic color quantization. If you need a specific color from a specific part of the image, use the Image Color Picker to click directly on the area you want.