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.

Kostenloses Tool

Color Theme Generator

Generieren Sie komplementäre, analogische, triadische und einfarbige Farbpaletten aus einer beliebigen Hex-Farbe. Exportieren Sie zu Tailwind, CSS-Variablen, SCSS, Material UI und mehr.

Wählen Sie eine Basisfarbe

Hex-Farbe

RGB

0, 82, 204

HSL

216°, 100%, 40%

Schnellvoreinstellungen

Farbharmonie-Schemata

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%

Schattierungen & Tönungen

Gleicher Farbton von hellsten bis dunkelsten — nützlich für Design-System-Skalen.

#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

Exportieren Sie Ihre Farbskala, um sie direkt in Ihr Projekt einzufügen.

Farbname:Wird in Variablen-/Klassenamen verwendet

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;
}

Generierte Skala (11 steps)

100

200

300

400

500

600

700

800

900

950

Alle Schemata auf einen Blick

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic

Farbharmonie erklärt

Farbharmonie-Schemata leiten sich von den Beziehungen zwischen Farben auf dem Farbkreis ab. Komplementärfarben liegen sich gegenüber und erzeugen hohen Kontrast. Analogische Farben sitzen nebeneinander und wirken kohärent. Triadische Schemata verwenden drei gleichmäßig verteilte Farben für lebhaftes Gleichgewicht.

Design-System-Export

Die Framework-Export-Registerkarte generiert eine einsatzbereit kopierbare Farbskala für Tailwind CSS v3/v4, Material UI, Chakra UI, shadcn/ui, CSS Custom Properties und SCSS-Variablen.

Verwendungsweise

Geben Sie eine Hex-Farbe ein oder wählen Sie eine aus.
Durchsuchen Sie die Harmonie-Schemata — Komplementär, Analogisch, Triadisch usw.
Wechseln Sie zum Framework-Export, um die Skala für Ihr Design-System herunterzuladen oder zu kopieren.

Alle Farbberechnungen finden in Ihrem Browser statt — nichts wird an einen Server gesendet.

Häufig gestellte Fragen

Welche Farbformate werden unterstützt?: Eingaben akzeptieren Hex (#RRGGBB oder #RGB). Ausgabe zeigt Hex, RGB und HSL für jeden Farbfeld.
Kann ich zu Tailwind CSS exportieren?: Ja. Der Framework-Export-Bereich generiert Tailwind v3- und v4-Farbskalen sowie CSS-Variablen, SCSS, Material UI, Chakra UI und shadcn/ui-Formate.
Ist das Tool kostenlos?: Ja, völlig kostenlos ohne Registrierung erforderlich.

Verwandte 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