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

Generate complementary, analogous, triadic, and monochromatic color palettes from any hex color. Export to Tailwind, CSS variables, SCSS, Material UI, and more.

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

Color harmony explained

Color harmony schemes are derived from the relationships between colors on the color wheel. Complementary colors are opposite each other and create high contrast. Analogous colors sit adjacent and feel cohesive. Triadic schemes use three evenly-spaced colors for vibrant balance.

Design system export

The Framework Export tab generates a ready-to-paste color scale for Tailwind CSS v3/v4, Material UI, Chakra UI, shadcn/ui, CSS custom properties, and SCSS variables.

How to use

Enter or pick a hex color.
Browse the harmony schemes — Complementary, Analogous, Triadic, etc.
Switch to Framework Export to download or copy the scale for your design system.

All color calculations happen in your browser — nothing is sent to any server.

Frequently Asked Questions

What color formats are supported?: Input accepts hex (#RRGGBB or #RGB). Output shows hex, RGB, and HSL for every swatch.
Can I export to Tailwind CSS?: Yes. The Framework Export section generates Tailwind v3 and v4 color scales, plus CSS variables, SCSS, Material UI, Chakra UI, and shadcn/ui formats.
Is the tool free?: Yes, completely free with no sign-up required.

Related Tools

Color Contrast

Check WCAG AA and AAA color contrast ratios for web accessibility

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CSS named colors instantly

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually — drag color stops, share via URL