ToolBark
Generators

Color Palette Generator

Generate beautiful, harmonious 5-color palettes instantly

Configuration

Current base: #335C9E — HSL(217°, 51%, 41%)

Your Palette

#335C9E

Blue

217° 5141%

#302777

Deep Blue

247° 5131%

#9142C2

Indigo

277° 5151%

#2D808B

Cyan

187° 5136%

#39B183

Teal

157° 5146%

CSS Variables

:root {
  --color-1: #335C9E;
  --color-2: #302777;
  --color-3: #9142C2;
  --color-4: #2D808B;
  --color-5: #39B183;
}

Tailwind Config

colors: {
  "palette-1": "#335C9E",
  "palette-2": "#302777",
  "palette-3": "#9142C2",
  "palette-4": "#2D808B",
  "palette-5": "#39B183",
}

About This Harmony

Adjacent hues — calm, cohesive — Analogous palettes use hues that sit next to each other on the color wheel (30° apart). They feel natural and pleasing, like colors found in nature.

About

Generate beautiful, harmonious color palettes for your next design project in seconds. Choose from six color theory schemes — analogous, complementary, split-complementary, triadic, tetradic, or monochromatic — then lock a base color or let the tool pick one at random. Copy individual hex codes or export ready-to-paste CSS variables and Tailwind config snippets.

FAQ
What is a harmonious color palette?+

A harmonious color palette uses colors that relate to each other on the color wheel according to proven color theory rules — such as analogous (adjacent hues) or complementary (opposite hues). These relationships create visual balance that feels intentional and pleasing to the eye.

How do I use the generated palette in my project?+

Click "Copy CSS" to get a ready-to-paste :root block of CSS custom properties, or "Copy Tailwind" for a colors object you can drop straight into your tailwind.config file. You can also copy individual hex codes with the Copy button on each swatch.

What is the difference between analogous and complementary schemes?+

Analogous schemes use hues that sit close together on the color wheel (roughly 30° apart), creating a calm and cohesive feel. Complementary schemes pair colors directly opposite each other (180° apart), producing strong contrast — great for highlighting calls to action.

Can I start from a specific color?+

Yes. Use the color picker or type a hex code (e.g. #3a7bd5) into the Base Color field. The tool will generate the full 5-color palette from that starting point using your chosen harmony rule.

Related tools