The Image Color Picker turns any photo or screenshot you upload into a web design color palette. Copy the extracted colors as CSS variables, Tailwind, SCSS, HEX, or RGB, with everything running entirely in your browser.
How to use it (3 steps)
- Upload an image: Drag & drop a PNG, JPG, or WebP image onto the drop zone, or load it with "choose a file." Images are processed on your device and never sent to a server.
- Choose the number of colors and extract: Use the "Number of colors" slider to pick between 3 and 12, then press "Extract colors." The dominant colors are extracted automatically with k-means.
- Copy the code: Click each extracted color to copy it as HEX, RGB, CSS variables, Tailwind, or SCSS. Save combinations you like with "Save palette" to keep them in your browser.
Copy formats for extracted colors
Copy colors in the format that fits your workflow:
- HEX: a hex value like
#3498db. The most universal format, and it pastes straight into design tools.
- RGB:
rgb(52, 152, 219). A handy starting point when you need to add transparency.
- CSS variables: custom properties like
--color-1: #3498db;, so you can manage a palette in one place.
- Tailwind / SCSS: formats that drop neatly into config files or variables and fit your existing design tokens.
Tips for building a clean palette
- Pick a base color: the color for large backgrounds and whitespace. Lower-saturation extracted colors are easiest to work with.
- Choose one main color: the color that carries your brand or mood — usually the most striking color in the image.
- Add one accent color: used for CTAs and emphasis. A small amount of a highly saturated color adds punch.
- Keep the count low: you don't have to use every extracted color. Narrowing to 3–5 colors creates cohesion.
Which images work, and which don't
Any image with color information — photos, illustrations, screenshots — works. Images with a clear subject or theme color tend to produce palettes closest to your intent. Nearly single-color or noisy images may return a row of similar shades; in that case, adjust the number of colors up or down to fine-tune the result.
Frequently asked questions
Is this tool free?
Yes, completely free with no signup and no usage limits. You can save and copy extracted palettes freely.
Are my uploaded images sent to a server?
No. Color extraction runs entirely in your browser (on your own device), and your images are never sent to an external server.
What formats can I copy?
In addition to HEX and RGB, you can copy colors as CSS custom properties (CSS variables), Tailwind, and SCSS with one click.
How are the colors extracted?
The tool clusters the image's pixels with k-means to automatically extract the dominant colors that represent the image. The number of colors is adjustable.
What kinds of images work best?
Any image with color information — photos, illustrations, screenshots — works. It's handy for color inspiration and building design palettes.
Related tools