Create a color palette

Pick a base colour and a harmony rule, or drop in an image to extract its main colours. Lock the swatches you want to keep and regenerate the rest.

Runs on your device

Loading tool…

How to use

Pick a base colour and a harmony (analogous, complementary, triadic…).
Press Space to regenerate unlocked colours.
Export the palette.

Worked example

Base #2F6FEB with the complementary rule gives #9B7000: the hue turned 180° in OKLCH at the same lightness, with chroma reduced to fit sRGB.

Supported formats and limits

Input	Base colour, Image (to extract colours)
Output	CSS variables, JSON, Tailwind config, PNG swatch
Engine	OKLCH colour math; k-means extraction for images

Limitations

Colours outside the sRGB gamut are clipped for display.

Questions

Which harmony rules are available?

Analogous, complementary, split complementary, triadic, tetradic and monochrome. Hues are rotated in OKLCH at the same lightness, and chroma is reduced where needed to fit sRGB. #2F6FEB with the complementary rule gives #9B7000.

How are colours taken from an image?

The image is read in your browser and its pixels are grouped with k-means clustering into the main colours. The image is not uploaded.

Does it check contrast?

Yes, between swatches, with an AAA, AA, AA large or Fail label per pair. That rates colour pairs only; it does not certify that a design or site is accessible.

Guides

Colour contrast and WCAG: what AA and AAA mean, with examples

Privacy

Runs on your device. Files and text are processed in this browser tab and are not uploaded.

See the privacy policy for how toolsdocks handles data.