How do I use these colors in CSS?

Copy the HEX values and paste them into CSS variables (e.g., :root { --primary: #2563eb; }).

CSS Color Palette

## CSS color palette (copy/paste)
After you extract a palette, paste the HEX values into CSS variables and reuse them everywhere.

Extract a Color Palette from an Image

Upload a JPG/PNG/WebP. Your image is processed in your browser (privacy-friendly). Copy HEX/RGB, download JSON, or share the result.

Drop an image here

or click to choose a file

Palette size

Palette

Details

Tip: For brand work, start with 5–8 colors. For photo cleanup, try 3–5.

FAQ

Is my image uploaded to the server?

No. The extraction runs in your browser via JavaScript. The file is not sent to our server by this tool.

How accurate is the palette?

It’s a pragmatic palette (k-means clustering on pixels). For gradients/noisy photos, results are approximate but usually very useful.

Can I use this for logos?

Yes. Logos with flat colors work extremely well. Use a smaller palette size (3–6) for clean results.

—

## Example: CSS variables
“`css
:root {
–bg: #ffffff;
–text: #111827;
–primary: #2563eb;
–accent: #7c3aed;
}

.button {
background: var(–primary);
color: white;
}
“`

## Example: Tailwind-style naming
“`css
:root {
–brand-50: #eff6ff;
–brand-500: #3b82f6;
–brand-700: #1d4ed8;
}
“`

## Related tools
– Extract colors from image: /extract-colors-from-image/
– Palette from image: /palette-from-image/
– Extract dominant color: /dominant-color-from-image/
– Extract logo colors: /extract-logo-colors/
– CSS color palette: /css-color-palette/
– HEX guide: /hex-color-picker-palette-guide/