Color · Design

Color Palette Generator

Build harmonious palettes from one base color using classic color-theory modes.

  • #005c70
  • #00236f
  • #150070
:root {
  --color-1: #005c70;
  --color-2: #00236f;
  --color-3: #150070;
}

How to use

  1. Choose a base color.
  2. Pick a harmony mode.
  3. Copy HEX values into your design system.

Features

  • Complementary, analogous, triadic, split, tetradic, monochrome
  • Copy HEX / CSS
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

Are these palettes accessibility-checked?expand_more

Harmony generation does not guarantee WCAG contrast. Use the Contrast Checker on pairs you use for text.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools