What is color harmony?

Color harmony refers to colors that look pleasing together based on their positions on the color wheel. Common harmony schemes include complementary (opposite colors), analogous (adjacent colors), triadic (evenly spaced), and monochromatic (same hue, different lightness).

What is a complementary color?

A complementary color is the color directly opposite another on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and are used to make designs pop. For example, the complement of blue is orange.

What is an analogous color scheme?

An analogous color scheme uses three colors that are adjacent to each other on the color wheel (typically ±30°). These schemes feel harmonious and natural, and are common in nature. They work well for backgrounds and gradients.

What is a triadic color scheme?

A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). It creates vibrant, high-contrast palettes that maintain balance. Good for designs that need energy and variety.

What is a monochromatic color palette?

A monochromatic palette uses a single hue at different lightness and saturation levels. It looks clean and professional, and is common in minimalist design systems. All colors naturally work together since they share the same underlying hue.

What are shades and tints?

Shades are created by adding black to a color (decreasing lightness), making it darker. Tints are created by adding white (increasing lightness), making it lighter. Design systems like Tailwind CSS use numbered scales (100–900) to represent these gradations.

Free Tool

Color Theme Generator

Pick any color and instantly get matching palettes — complementary, analogous, triadic, split-complementary, tetradic, and monochromatic. Includes shades & tints scale and CSS variables export.

Pick a Base Color

Hex Color

RGB

0, 82, 204

HSL

216°, 100%, 40%

Quick presets

Color Harmony Schemes

Two colors opposite on the color wheel — high contrast, bold pairings.

#0052CC

0,82,204

216°,100%,40%

#CC7A00

204,122,0

36°,100%,40%

Shades & Tints

Same hue from lightest to darkest — useful for design system scales.

#E5F0FF

229,240,255

215°,100%,95%

#B3D1FF

179,209,255

216°,100%,85%

#80B3FF

128,179,255

216°,100%,75%

#3385FF

51,133,255

216°,100%,60%

#005CE6

0,92,230

216°,100%,45%

#003D99

0,61,153

216°,100%,30%

#002966

0,41,102

216°,100%,20%

#001433

0,20,51

216°,100%,10%

Framework Export

Export your color scale ready to paste into your project.

Color name:Used in variable/class names

brand-colors.css

@import "tailwindcss";

@theme {
  --color-brand-50: #F0F6FF;
  --color-brand-100: #DCEAFE;
  --color-brand-200: #B4D1FD;
  --color-brand-300: #74AAFB;
  --color-brand-400: #2E80FA;
  --color-brand-500: #065FE5;
  --color-brand-600: #054AB3;
  --color-brand-700: #033886;
  --color-brand-800: #02275E;
  --color-brand-900: #02193C;
  --color-brand-950: #010E23;
  --color-brand: #0052CC;
}

Generated scale (11 steps)

100

200

300

400

500

600

700

800

900

950

All Schemes at a Glance

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic