Dominant Colors as CSS Variables

Import an image and instantly generate a block of CSS variables (:root {}) containing its dominant colors, ready to paste into your stylesheet.

Example:
Drag and drop an image here, or click to browse (25 MB max).

How it works

The tool analyzes the color distribution of the image using a histogram and keeps the most frequent hues, ordered from the most dominant to the least frequent. Each color is then formatted as a numbered CSS variable (--color-1, --color-2, etc.) inside a directly copyable :root block.

Can I rename the generated variables?

Yes, the generic --color-N name is a neutral starting point: once pasted into your stylesheet, rename each variable according to its actual use (e.g., --color-primary, --color-accent) for cleaner code.

How many colors should I extract?

For a simple brand palette, 3 to 5 colors usually suffice (a dominant color, an accent, and one or two neutral shades). A higher number is useful if you want to capture the full richness of a photo for more decorative purposes.

100% local processing: palette extraction happens entirely in your browser — your image is never sent to a server.