UI Shades
Explore

Image color picker - extract a color palette from any image

Extract a color palette from any image

Upload a photo, screenshot, logo or piece of art and UIshades pulls out its colors - up to eight dominant tones, ranked by how much of the image they cover. Every color is a real pixel marked by a circle on the image, so you can see exactly where it came from and drag it to fine-tune. Click anywhere on the image to pick another color, then turn any of them into a full OKLCH ramp or Tailwind scale. The image stays on your device - nothing is uploaded.

How it works

  1. 1. Upload. Drop, paste, or choose an image (PNG, JPEG, WebP, GIF).
  2. 2. Review. Up to 8 dominant colors appear, each with a circle on the image.
  3. 3. Fine-tune. Drag a circle to change its color, or click the image to add one.
  4. 4. Export. Pick a color for its ramp and exports, download a PNG, or save the palette.

Frequently asked questions

Is my image uploaded to a server?
No. The image is read and analyzed entirely in your browser. Nothing is sent to or stored on a server, which also means a result is not shareable and is lost when you reload the page.
How many colors can I extract?
Up to 8. Simple images return fewer - a two-color logo yields about two colors - while photos fill all eight. You can remove colors and add your own by clicking the image.
How are the colors chosen?
A median-cut algorithm finds the most dominant color regions, ranked by how much of the image each covers. Every swatch is a real pixel from the image, marked by a circle you can drag to change the color.
What image formats are supported?
PNG, JPEG, WebP and GIF. Large images are scaled down for fast analysis; the colors you get are unaffected.
Can I turn an extracted color into shades?
Yes. Click any color in the palette to generate its full OKLCH tint-to-shade ramp or an 11-stop Tailwind scale, with copy-ready exports for Tailwind, CSS variables, W3C design tokens and Figma.