What palette types are generated?

The generator creates complementary, analogous, triadic, split-complementary, tetradic, and monochromatic palettes from your chosen base color.

What color formats are shown?

Each swatch includes HEX, RGB, and HSL values so you can copy the format required by CSS, a design system, or a graphics tool.

Can I export the palette?

Click any swatch to copy its HEX value, or copy and download the complete palette as CSS custom properties.

How are the palettes calculated?

Palettes are calculated by rotating hue on the HSL color wheel by fixed angles for each harmony rule. Monochromatic palettes keep hue constant while changing lightness.

Which HEX formats are accepted?

Yes. Enter either a three-digit shorthand value such as #09f or a full six-digit HEX value such as #0099ff.

Which harmony should I choose?

Complementary colors create strong contrast, analogous colors feel cohesive, and triadic or tetradic schemes provide balanced variety. Choose the harmony that matches the visual emphasis you need.

Is my color sent to a server?

The tool runs entirely in your browser. Your selected color is used locally to calculate the palette and is not uploaded.

How should I use generated colors?

Use the generated HEX values for backgrounds, text, borders, buttons, and accents. Check text contrast separately before using a color in an accessible interface.

Color Tools

Color Palette Generator

Generate harmonious color palettes in 6 modes — complementary, analogous, triadic, split-complementary, tetradic, or monochromatic — from any base color.

6 Harmony Modes
Complementary / Triadic / Analogous
HEX Values
Copy Colors
Browser-only

Palette Options

Base color

CSS variables

:root {
  --color-1: #6366f1;
  --color-2: #f16366;
  --color-3: #66f163;
}

Build a balanced color palette

A color palette gives an interface a repeatable set of colors for backgrounds, text, borders, actions, and accents. This generator starts with one HEX color and calculates related colors in HSL space. HSL separates hue from saturation and lightness, which makes harmony relationships easier to understand and adjust than raw RGB values.

Choose a base color, select a harmony, then click any swatch to copy its HEX value. Every swatch also shows RGB and HSL equivalents. Use the CSS variables output to move the palette into a stylesheet or design token file.

Color harmony reference

Harmony	Hue relationship	Common use
Complementary	180° apart	High-contrast accents
Analogous	Neighbouring hues	Calm, cohesive interfaces
Triadic	120° apart	Balanced variety
Split-complementary	Base plus two near its complement	Contrast with less tension
Tetradic	Four hues in 90° steps	Rich, multi-purpose systems
Monochromatic	Same hue, varied lightness	Simple, restrained hierarchy

Complementary palettes work well when one color should draw attention. Use an analogous palette when a page needs continuity between sections. Triadic and tetradic palettes can support dashboards or illustrations, but assign one dominant color and reserve the others for supporting roles.

HEX, RGB, and HSL

HEX is compact and common in CSS:

:root {
  --color-1: #6366f1;
  --color-2: #f16666;
}

RGB represents red, green, and blue channel values:

.button {
  background: rgb(99, 102, 241);
}

HSL expresses hue in degrees plus saturation and lightness percentages:

.button:hover {
  background: hsl(239°, 84%, 67%);
}

The formats describe the same colors. Choose the one that matches the API or design tool where you will use the value.

Practical workflow

Start with a brand, illustration, or existing interface color.
Compare harmony options instead of choosing supporting colors independently.
Assign the strongest contrast to actions and important states.
Test text and background combinations with a contrast checker.
Export CSS variables and name them by role in your project.

Generated relationships are a starting point, not a complete accessibility system. Check contrast for normal text, large text, focus indicators, and disabled states before shipping.

JavaScript example

CSS variables can be consumed directly from a component:

const styles = {
  backgroundColor: "var(--color-1)",
  color: "var(--color-2)",
};

Frequently asked questions

Does the generator upload my color?

No. Calculations happen in the browser. The selected HEX value is not sent to the server.

Can I enter shorthand HEX?

Yes. Three-digit values such as #09f are expanded to their six-digit form before the palette is calculated.

Which harmony should I use?

Use complementary or split-complementary for contrast, analogous for cohesion, triadic for balanced variety, and monochromatic for a restrained visual scale.

Frequently Asked Questions

What palette types are generated?: The generator creates complementary, analogous, triadic, split-complementary, tetradic, and monochromatic palettes from your chosen base color.
What color formats are shown?: Each swatch includes HEX, RGB, and HSL values so you can copy the format required by CSS, a design system, or a graphics tool.
Can I export the palette?: Click any swatch to copy its HEX value, or copy and download the complete palette as CSS custom properties.
How are the palettes calculated?: Palettes are calculated by rotating hue on the HSL color wheel by fixed angles for each harmony rule. Monochromatic palettes keep hue constant while changing lightness.
Which HEX formats are accepted?: Yes. Enter either a three-digit shorthand value such as #09f or a full six-digit HEX value such as #0099ff.
Which harmony should I choose?: Complementary colors create strong contrast, analogous colors feel cohesive, and triadic or tetradic schemes provide balanced variety. Choose the harmony that matches the visual emphasis you need.
Is my color sent to a server?: The tool runs entirely in your browser. Your selected color is used locally to calculate the palette and is not uploaded.
How should I use generated colors?: Use the generated HEX values for backgrounds, text, borders, buttons, and accents. Check text contrast separately before using a color in an accessible interface.

Disclaimer

This tool is provided for general informational and utility purposes only. Results may be inaccurate, incomplete, outdated, or contain errors. Always verify results before relying on or using them.

Some tools may use AI, automated processing, third-party services, or server-side processing. Do not rely on these tools as a substitute for professional advice.

Use at your own risk. BestToolOnline makes no guarantees regarding the accuracy, reliability, completeness, availability, or suitability of results, to the maximum extent permitted by applicable law.

See our Terms of Service and Privacy Policy for complete details.

Loading tool...

Build a balanced color palette

Color harmony reference

Harmony	Hue relationship	Common use
Complementary	180° apart	High-contrast accents
Analogous	Neighbouring hues	Calm, cohesive interfaces
Triadic	120° apart	Balanced variety
Split-complementary	Base plus two near its complement	Contrast with less tension
Tetradic	Four hues in 90° steps	Rich, multi-purpose systems
Monochromatic	Same hue, varied lightness	Simple, restrained hierarchy

HEX, RGB, and HSL

HEX is compact and common in CSS:

:root {
  --color-1: #6366f1;
  --color-2: #f16666;
}

RGB represents red, green, and blue channel values:

.button {
  background: rgb(99, 102, 241);
}

HSL expresses hue in degrees plus saturation and lightness percentages:

.button:hover {
  background: hsl(239°, 84%, 67%);
}

The formats describe the same colors. Choose the one that matches the API or design tool where you will use the value.

Practical workflow

Start with a brand, illustration, or existing interface color.
Compare harmony options instead of choosing supporting colors independently.
Assign the strongest contrast to actions and important states.
Test text and background combinations with a contrast checker.
Export CSS variables and name them by role in your project.

Generated relationships are a starting point, not a complete accessibility system. Check contrast for normal text, large text, focus indicators, and disabled states before shipping.

JavaScript example

CSS variables can be consumed directly from a component:

const styles = {
  backgroundColor: "var(--color-1)",
  color: "var(--color-2)",
};

Frequently asked questions

Does the generator upload my color?

No. Calculations happen in the browser. The selected HEX value is not sent to the server.

Can I enter shorthand HEX?

Yes. Three-digit values such as #09f are expanded to their six-digit form before the palette is calculated.

Which harmony should I use?

Use complementary or split-complementary for contrast, analogous for cohesion, triadic for balanced variety, and monochromatic for a restrained visual scale.