The image color extractor pulls the dominant colour palette out of any picture and hands you ready-to-use hex, RGB and HSL codes. Drop in a photo, a logo, a screenshot or a piece of artwork and it returns a tidy set of swatches — each with its exact colour values and the share of the image it occupies — that you can copy with a click or export as a PNG, a block of CSS variables, or structured JSON. It is built for designers picking a brand scheme, developers grabbing colours for a theme, illustrators sampling a reference, and anyone who has ever squinted at a photo wondering “what blue is that?”.
Unlike an eyedropper that reads a single pixel, this tool analyses the whole image. It samples thousands of pixels and groups them into a small number of representative colours, so the palette reflects what the picture actually looks like rather than one arbitrary point. You control how many colours come back — anywhere from a minimal two-tone pair up to a rich twelve-swatch scheme — and an optional “vibrant” mode strips out the near-white and near-black pixels that tend to dominate photographs, leaving the saturated colours that give an image its character.
Crucially, the whole thing runs inside your browser. The image is decoded with the canvas API on your own device; nothing is uploaded, so private photos stay private and the tool keeps working even when you are offline.
How it works
When you load an image, it is drawn to an off-screen canvas and downscaled to a compact sampling grid (about 160 pixels on the long edge). That keeps the analysis fast while preserving the overall colour distribution. Every opaque pixel is packed into a tight buffer, and a classic median-cut algorithm partitions that colour space: it starts with one box holding all the pixels, then repeatedly takes the box with the widest single-channel range and splits it at the median along that channel. Splitting continues until the number of boxes matches your requested palette size, and each box is averaged to produce one swatch. Swatches are sorted by how many pixels they contain, and that pixel count becomes the share you see as a percentage and as a proportional bar.
Because the maths is deterministic, the same image and settings always yield the same palette. Adjusting the slider or toggling the vibrant option re-runs the extraction instantly on the already-loaded image — no re-upload needed.
Example
Suppose you drop in a sunset beach photo and ask for six colours. The extractor might return a warm orange at roughly 32% (the sky), a deep navy at 24% (the sea), a soft sand beige at 18%, a coral highlight, a muted teal and a near-black silhouette tone. The proportional bar shows orange and navy taking up most of the width, confirming they dominate the scene.
Click the orange swatch and #E8853F lands on your clipboard. Click “Export CSS variables” and you get:
:root { --color-1: #e8853f; --color-2: #1f3a52; ... }
ready to paste straight into a stylesheet. Toggle the vibrant option and the muddy near-black tone is replaced by a brighter accent — handy when you want a palette that pops rather than one that documents every shadow. Export the same palette as JSON to feed it into a design-token pipeline, or download the labelled PNG strip to drop into a mood board. Every step happens locally, so even a confidential product mockup never leaves your machine.