Skip to content
Kordu Tools
Colour Tools Runs in browser Updated 08 Apr 2026

Color Palette Generator

Generate harmonious color palettes using color theory. Complementary, triadic, analogous, and more.

Color harmony

Adjacent hues, naturally harmonious

CSS custom properties
:root {
  --palette-1: #3cf6af; /* –60° */
  --palette-2: #3ce0f6; /* –30° */
  --palette-3: #3c83f6; /* Base */
  --palette-4: #523cf6; /* +30° */
  --palette-5: #af3cf6; /* +60° */
}
Loading rating…

How to use Color Palette Generator

  1. Pick a base color

    Use the color picker or type a hex code into the input field. Click Random to explore a new starting color.

  2. Choose a harmony mode

    Select complementary, triadic, analogous, split-complementary, tetradic, square, or monochromatic to generate a matching palette.

  3. Copy or export

    Click any swatch to copy its hex code. Use Copy CSS to export the palette as CSS custom properties, or Copy JSON for a JSON array.

Color Palette Generator FAQ

What is color harmony?
Color harmony refers to colors that look pleasing together based on their positions on the color wheel. Analogous colors sit next to each other and feel natural; complementary colors are opposite and create contrast; triadic colors are evenly spaced and feel vibrant. Choosing the right harmony for your project sets the emotional tone and ensures visual coherence.

What is the difference between complementary and split-complementary?
A complementary palette uses exactly two colors opposite each other on the color wheel — maximum contrast but harder to balance. A split-complementary uses the base color plus the two colors adjacent to its complement. This gives similar contrast with more variety and is generally easier to work with in design.

When should I use monochromatic?
Monochromatic palettes — one hue at different lightness and saturation levels — create elegant, sophisticated looks with low visual noise. They work well for backgrounds, text hierarchies, and UI surfaces where you want cohesion without distraction. They pair well with a single accent color from a different hue.

What CSS format does the export use?
Exported CSS uses custom properties (--palette-1 through --palette-N) inside a :root block, ready to paste into any stylesheet. Variable names include the color label as a comment.

Is my data sent anywhere?
No. All palette generation happens in your browser. Nothing is uploaded or stored.

Background

The Kordu Color Palette Generator creates harmonious color palettes from any base color using color theory principles. Choose from seven harmony modes:

  • Complementary — two colors opposite on the color wheel; high contrast, bold combinations
  • Triadic — three colors equally spaced; vibrant yet balanced
  • Analogous — five adjacent hues; naturally harmonious, low contrast
  • Split-complementary — base color plus two colors adjacent to its complement; safer than pure complementary
  • Tetradic — four colors forming two complementary pairs; rich variety
  • Square — four colors equidistant on the wheel; high contrast variety
  • Monochromatic — five shades of the same hue; elegant and cohesive

Click any swatch to copy its hex code. Export the complete palette as CSS custom properties or as a JSON array with hex and HSL values. Use the Random button to explore new starting points.

Common uses: designing UI color systems, creating brand palettes, building Tailwind or CSS variable themes, and exploring color relationships for illustration or data visualisation.

All generation runs client-side in your browser. Nothing is uploaded or stored.

Related tools

Tint & Shade Generator

Generate tints (lighter) and shades (darker) from any base color. Exports CSS variables.

Color Contrast Checker

Check WCAG color contrast ratios between foreground and background colors. See AA and AAA pass/fail badges instantly.

Color Picker

Pick any color and instantly view HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values. Copy any format with one click.

Color Blindness Simulator

See how any color appears under different types of color blindness — protanopia, deuteranopia, tritanopia, and achromatopsia.