Extracting the four colours that matter

The palette strip on the bottom of every exported board is the thing early users asked about most. Here’s roughly what’s happening under it.

The naive version

The obvious way to pick four dominant colours from a set of images is to resize each image to something small (say 64×64), count the most common RGB values, and pick the top four. This is what most “extract palette” scripts on GitHub do.

It produces flat, lifeless palettes. The reason is that RGB is perceptually non-uniform — two RGB colours that are numerically close can look very different, and two that are numerically far can look near-identical. Clustering in RGB picks colours that make no intuitive sense when you see them next to each other.

OKLab

We convert every sampled pixel to OKLab before clustering. OKLab is designed for perceptual uniformity: distances in the space correspond roughly to how different the colours look. We run k-means with k=8 in OKLab, then project the eight centroids back to sRGB for display.

Which four do we keep

Showing all eight would clutter the strip. We pick four by a simple rule:

• One dark (lightness < 0.35)
• One light (lightness > 0.75)
• The two most-used mid-range colours, sorted for chroma contrast

Why desaturated defaults

If we simply pick the top four clusters we often get four saturated colours that don’t sit well together. So before rendering the strip we nudge chroma down by about 20% in OKLab. It looks more like a real brand palette and less like a screenshot of a colour wheel.

Overrides

Click any swatch and enter your own hex if you want. The extraction is a suggestion, not a constraint. We don’t even remember your override across boards — if that annoys you, let us know and we’ll add a saved palette feature.

That’s roughly it. We probably spent three days of engineering time on four little circles, and they still aren’t perfect. If you have feedback, write to us at hello@pixelquick.org.