Color Palette Generator

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Pick a base color above and select a harmony mode to generate your palette.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Palette Generator

Generates complementary, analogous, triadic, tetradic, split-complementary, and monochromatic palettes from one base color.

How it works

The base hex is converted to HSL and the scheme is produced by rotating the hue while holding saturation and lightness. Complementary rotates 180°, analogous takes ±30°, triadic takes 120° and 240°, tetradic takes 90°, 180°, and 270°, and split-complementary takes 150° and 210° — the two hues flanking the complement, which gives the contrast of a complementary pair without its harshness. Monochromatic is the exception: it holds the hue and saturation and steps lightness through a fixed ladder of 20%, 35%, 50%, 65%, and 80%.

When to use it

  • Deriving a first set of accent and secondary colors from a single brand color
  • Finding a color that will stand out against a background you are already committed to, using the complementary or split-complementary mode
  • Generating a five-step monochromatic ramp for a surface, hover, and border scale
  • Exploring alternatives quickly before spending time hand-tuning a palette

Watch out for

  • Hue rotation in HSL is not perceptually even. A 120° step from a bright yellow lands on a much darker color at the same nominal saturation and lightness, so triadic sets often need lightness correction by hand.
  • A palette says nothing about readability. Check every text-on-background pair you intend to use in the contrast checker — harmonious colors frequently fail 4.5:1.
  • Monochromatic mode discards the base lightness. It replaces it with the fixed ladder, so the color you entered may not appear in its own palette.
  • Only 6-digit and 3-digit hex is accepted as the base color; rgb(), hsl(), and named colors are not.

Frequently Asked Questions

What is a complementary color scheme?

Complementary colors are directly opposite on the color wheel (180° apart). They create maximum contrast and visual vibration. Example: blue (#0000FF) and orange (#FF8000). Use for call-to-action buttons that need to stand out from a background.

What is an analogous color scheme?

Analogous colors sit next to each other on the color wheel (±30°). They are harmonious and low-contrast — great for backgrounds, gradients, and calm interfaces. A blue-teal-green palette is analogous and commonly used in health and wellness branding.

How do I generate accessible color pairs from a palette?

After generating your palette, check each foreground/background combination with the WCAG Contrast Checker tool. For AA compliance, the contrast ratio must be at least 4.5:1 for body text — many generated palettes need lightness adjustment to pass.

How to Use Color Palette Generator

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.