Skip to content
Kordu Tools Kordu Tools

Color Palette Generator

Runs in browser

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

Last updated 08 Apr 2026

Pick a base color and choose a harmony mode — complementary, triadic, analogous, split-complementary, tetradic, square, or monochromatic — to instantly generate a matching color palette. Click any swatch to copy its hex code. Export the full palette as CSS custom properties or JSON. Runs in your browser — nothing is uploaded.

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

  1. 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. 2

    Choose a harmony mode

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

  3. 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.

Frequently asked questions

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.

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.

Colour Contrast Checker

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

Colour Picker

Pick any colour 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.