Tool categories
Categories View all tools

Color Palette Generator

Pick a base colour and generate harmonious palettes — complementary, triadic, analogous, split-complementary and monochromatic.

How to use

  1. Pick a base colour with the colour picker or type a hex code.
  2. Choose the harmony type — complementary, triadic, analogous, split-complementary or monochromatic.
  3. Click "Generate palette" — the colours appear as swatches with hex codes. Click any swatch to copy its code.

About this tool

Colour harmony is the principle that certain combinations of hues look balanced together. The theory comes from the colour wheel: complementary colours sit opposite each other (maximum contrast), analogous colours sit next to each other (minimum contrast), and triadic colours form an equilateral triangle (balanced contrast). Split-complementary takes the two neighbours of the complement, and monochromatic varies the lightness and saturation of a single hue.

This generator works in the HSL colour space, where H is the hue angle on the wheel, S is saturation and L is lightness. The harmonies are geometric: complementary adds 180° to the hue, triadic adds 120° and 240°, analogous adds and subtracts 30°. The results are starting points for a design — real palette work adjusts saturation and lightness to balance visual weight, and tests the palette on the actual content it will be used with.

Click any swatch to copy its hex code to the clipboard. Everything runs in your browser and nothing is stored.

The formula

Complementary: H+180°. Triadic: H+120°, H+240°. Analogous: H−30°, H, H+30°. Split-complementary: H+150°, H+210°. Monochromatic: same H, varied S and L.

Frequently asked questions

Which harmony should I use?

Complementary for maximum contrast (call-to-action buttons, alert states). Analogous for a calm, cohesive look. Triadic for a balanced palette with variety. Monochromatic for a single-brand-colour design.

Can I use these colours commercially?

Colours are not copyrightable. The palette you generate is yours to use.

Why do the colours look different on my phone?

Because screens have different colour gamuts and calibrations. The hex code is the same; the appearance depends on the display.

Does it check contrast for accessibility?

Not directly — use the WCAG Contrast Checker tool for that. This tool generates harmonious palettes; the contrast checker tells you whether the foreground and background meet accessibility standards.

paleta de cores gerador de cores cores complementares harmonia design triádica análoga monocromática cor hex HSL identidade visual

Related tools

Color Mixer Mix two colors with a proportion slider and read the whole 11-step scale between them, in your browser. Tints & Shades Generator Turn one color into complete tint, shade and tone scales and export them as CSS variables, in your browser. WCAG Contrast Checker Check the contrast ratio between two colors and see whether it passes WCAG AA and AAA, live in your browser. Image Color Picker Upload an image and click any pixel to get its exact HEX, RGB and HSL — processed entirely on your device. Color Converter Convert a color between HEX, RGB, HSL, HSV and CMYK with live two-way sync, in your browser. Image Palette Extractor Upload an image and extract its dominant colors — click any swatch to copy the hex code.

Long links? Shorten them for free

Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.

Shorten a link Create free account

Vai.la is not responsible for how the tools are used or for decisions made based on their results.