Image Color Extractor
Pick colors straight from an image and turn each into a 10-step shade palette.
- Product
- Image Color Extractor
- Status
- Active
- Stack
- React, TypeScript, Canvas API, Tailwind CSS
- Updated
- 2026-09-29
#F2A65ASun#E2602FDusk#8E3B6FRidge#3A2F5BNight#16223AThe problem
Pulling a usable palette from a photo or brand asset by eye is slow and inconsistent, and a single color is not enough to build an interface.
The answer
What we built instead.
Part of the ZenUI color palette generator. Upload an image, click any pixel to sample its color, and every color you add becomes a ten-step shade scale (50 to 900) you can copy as HEX, RGB or HSL. Everything runs in the browser; the image never leaves your device.
Pick from any image
Upload a photo or brand asset and click to sample the exact pixel color.
Ten-step shades
Each color becomes a 50 to 900 scale generated with the Ant Design color algorithm.
Copy in any format
Copy every step as HEX, RGB or HSL, or type a color by name.
Private by design
The image is read on a canvas in your browser and never uploaded.
How it behaves
From input to result, in 4 moves.
#F2A65ASun#E2602FDusk#8E3B6FRidge#3A2F5BNight#16223AUpload
Choose an image.
Pick
Click a pixel to sample its color.
Generate
The color becomes a ten-step scale.
Copy
Take HEX, RGB or HSL values.
Try it
Try the idea without leaving the page.
A small playground built with browser APIs. It shows the principle; the real tool does far more.
Under the hood
Under the hood.
- BrowserCanvas pixel sampling · Image never leaves the device
- Colortinycolor2 · @ant-design/colors shade algorithm
Who it is for
Designers
Build a UI palette from a photograph or brand image.
Developers
Turn a brand color into Tailwind-ready shades in seconds.
Put Image Color Extractor to work.
Works alongside