Color Palette Generator

Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.

Inputs

Starting color in hex.

Color-wheel relationship for the palette.

Result

Loading calculator…
—

How to use this calculator

  • Enter a base color in hex.
  • Choose a harmony scheme.
  • Read the generated hex colors for the palette.
  • Verify contrast for any text use and tweak to taste.

About this calculator

Color harmonies are sets of colors that work well together because of their geometric relationship on the color wheel. This generator takes a base color and produces a palette using the classic schemes: complementary (the opposite hue, for high contrast), analogous (neighbors within ±30°, for calm, cohesive looks), triadic (three hues 120° apart, vibrant yet balanced), tetradic (two complementary pairs, rich but harder to balance), and monochromatic (one hue at varying lightness, for subtle, elegant scales). It works by converting your base color to HSL, rotating the hue (or varying the lightness for monochromatic), and converting each result back to hex you can paste straight into your design. Treat the output as a well-founded starting point — geometric harmony is a strong basis, but you should still check text contrast and fine-tune saturation and lightness for the feel you want.

How it works — the formula

Convert base → HSL Complementary: H+180 · Analogous: H±30 · Triadic: H±120 · Tetradic: H+90/180/270 Monochromatic: vary L, keep H, S Convert each → HEX

Each scheme is a fixed set of hue rotations (or lightness steps) applied on the HSL wheel, then mapped back to hex.

Source: Wikipedia — Color scheme

Worked examples

Example 1
#1a73e8 complementary
Inputs:
color=#1a73e8, scheme=complementary
Output:
base hue ~214° + opposite ~34°
Example 2
#1a73e8 triadic
Inputs:
color=#1a73e8, scheme=triadic
Output:
hues ~214°, 334°, 94°
Example 3
#e8431a analogous
Inputs:
color=#e8431a, scheme=analogous
Output:
three neighboring warm hues

Limitations

  • Keeps base saturation/lightness except for monochromatic.
  • Geometric harmony ≠ guaranteed aesthetic or accessible result.
  • Outputs sRGB hex; wide-gamut spaces not used.

A design starting point; verify contrast and refine manually.

Frequently asked

What is a complementary color scheme?+
Two colors directly opposite each other on the color wheel (180° apart). The pairing is high-contrast and energetic — good for making elements pop — but can be jarring if used in equal amounts; often one is dominant and the other an accent.
What is an analogous color scheme?+
Three colors next to each other on the wheel (within about ±30°). They share a common tone, creating a serene, cohesive look. Pick one as the dominant color and use the others as supporting accents.
What is a triadic scheme?+
Three colors evenly spaced 120° apart on the wheel. Triadic palettes are vibrant and balanced even when the colors are quite different; for harmony, let one dominate and use the other two more sparingly.
What is a monochromatic palette?+
A single hue presented at different lightness (and sometimes saturation) levels. It is the safest, most elegant scheme — inherently harmonious — and great for minimalist designs, with contrast coming from light-to-dark variation.
Does a harmonious palette guarantee good design?+
No. Color-wheel harmony gives a solid foundation, but real designs also need adequate contrast for legibility, sensible proportions (a dominant color plus accents), and consideration for color-blind users. Use harmonies as a starting point, then refine.
How are the palette colors computed?+
The base color is converted to HSL, the hue is rotated by the scheme’s angle (or the lightness is stepped for monochromatic), and each resulting HSL color is converted back to hex. Saturation and lightness are kept from the base unless the scheme varies them.

Related calculators

Hex / RGB / HSL Color Converter
Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.
WCAG Color Contrast Checker
Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.
Tip Split Calculator
Compute tip and split a restaurant bill evenly among diners.
Fuel vs Electric Car Cost Comparison
Annual fuel cost (gas car) vs annual electricity cost (EV) for the same mileage.
EV Charging Cost Calculator
Cost per session: kWh delivered × $/kWh, accounting for charger efficiency.
Solar Panel Payback Period
System cost / annual savings = years to break even on a residential solar install.

More tools you might like

Hand-picked tools that pair well with this one — same audience, same intent.

WCAG Color Contrast Checker
Calc

Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.

Hex / RGB / HSL Color Converter
Calc

Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.

Lorem Ipsum Generator
Calc

Generate placeholder text — paragraphs, sentences, or words — in deterministic seeded form. Starts with the classic "Lorem ipsum dolor sit amet" opening.

Random Password Generator
Calc

Generate strong, deterministically-seeded passwords. Pick length, character classes, and bulk-count. All client-side — passwords never leave the browser.

Color Picker (hex / rgb / hsl / hwb)
Calc

Convert a color between hex, RGB, HSL, HWB, and CMYK. Reports relative luminance and WCAG 2.2 contrast ratio against white and black.

Deed Generator
PDF

Generate a one-page general warranty / quitclaim deed PDF from a few input fields — produces a clean printable template.