How color palette extraction works
A plain-language look at median-cut quantization, why palettes are ranked by pixel share, and how to turn extracted colors into a design system.
From millions of pixels to a handful of colors
A single photo can contain tens of thousands of distinct color values once you count every subtle gradient. A palette tool has to collapse that into a small, readable set. Rather than pick the most frequent exact values, which tend to be near-duplicates of one dominant color, it groups similar colors together and reports one representative for each group. The result is a spread of colors that actually describes the image instead of five shades of the same blue.
Median-cut quantization
Median cut treats all the sampled pixels as points inside a box in RGB space. It finds the color channel with the widest spread, splits the box at the midpoint of that channel, and repeats on whichever remaining box has the largest spread. Splitting at the midpoint rather than the positional median keeps a small but vivid region, like a red logo on a gray wall, from being swallowed by the larger group. The process stops once there are as many boxes as colors you requested, and each box is averaged into one swatch.
Ranking by pixel share
Once the boxes are settled, each becomes a palette entry tagged with its population, the number of sampled pixels it holds, and its share of the total. Sorting by population puts the colors that cover the most of the image first, which is usually what you want for a dominant-color palette. The percentage on every swatch and the width of each segment in the proportional bar both come straight from that share, so the visual weighting matches the numbers.
Turning a palette into a design system
Extracted colors are a starting point, not a finished theme. Use the largest share as a background or neutral, a mid-share color as a primary accent, and a small vivid swatch as a call to action. Copying the palette as CSS custom properties gives you named tokens you can reference across a stylesheet, and adjusting lightness or saturation from those base hues builds out hover and disabled states. Always check the final combinations for contrast so text stays readable.