Colour Palettes for Design

Colour is one of the most powerful tools in a designer's arsenal. A well-chosen palette creates visual harmony, guides attention, and establishes mood. Extracting colours from an existing image is a reliable way to create a palette that feels cohesive, because the colours already coexist naturally in the photograph or illustration.

How Colour Extraction Works

This tool samples the pixels of your image and groups similar colours together using a median cut quantisation algorithm. The image is scaled down first for performance, then the pixel data is recursively split along the colour channel with the widest range until the desired number of groups is reached. The average colour of each group becomes a swatch in your palette.

Colour Harmony

The random palette generator uses colour theory to produce harmonious combinations. Complementary palettes use colours opposite each other on the colour wheel for maximum contrast. Analogous palettes use neighbours on the wheel for a calm, unified feel. Triadic palettes space three colours evenly around the wheel for vibrant variety. Each approach has its uses depending on the mood and purpose of your design.

Using Your Palette

Once you have a palette you like, copy it as CSS custom properties or a Tailwind config snippet to use directly in your code. Click any individual swatch to copy its hex value to the clipboard. For web design, aim for one or two dominant colours, a couple of accents, and neutral tones for backgrounds and text.