Image palette
Drop in a photo and pull out its dominant colours as a usable palette.
:root {
--palette-1: #461943; /* darkslateblue · 51% */
--palette-2: #993558; /* palevioletred · 25% */
--palette-3: #ad5553; /* indianred · 7% */
--palette-4: #f3893c; /* chocolate · 6% */
--palette-5: #fcd381; /* khaki · 6% */
--palette-6: #de6e47; /* coral · 5% */
}Colours come from median-cut quantisation: every sampled pixel goes into one box, the box with the widest channel range is split at its population median, and that repeats until you have as many colours as you asked for. Counting identical pixels instead would hand back six shades of the same sky. Names are the nearest CSS keyword by ΔE, so they are a label, not an exact match.
Extracting colours from an image by eye with a picker gets you the colour of individual pixels, which is rarely the colour the image reads as. Clustering the actual distribution gets you what the eye is averaging.
Drop an image and the dominant colours come back as swatches with hex values ready to copy. The whole thing runs on a canvas in your browser — the picture is not uploaded anywhere.
What people open it for
- Building a palette from a photograph or a piece of artwork
- Matching a UI to an image it sits alongside
- Pulling brand colours out of a logo or screenshot
In the terminal
tools palette
Every utility is also a command in the desktop's shell.