Color Palette Generator

The tool uses the 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. The algorithm recursively finds the color channel (red, green or blue) with the greatest range, sorts pixels by that channel, and splits the set at the median. This repeats until the desired number of color groups is reached. Each group is averaged to produce one representative color. Colors are then sorted from lightest to darkest by perceived luminance.

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.

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.