Farbkreis & Farbschema-Generator

So wird es benutzt 3 Schritte
  1. Wählen Sie eine Grundfarbe oder geben Sie ihren Hex-Wert ein.
  2. Wählen Sie eine Harmonie und drücken Sie Schema erstellen.
  3. Drücken Sie Kopieren, um die Farben zu übernehmen.
Farbschema

Die Harmonien entstehen durch Drehen des Farbtons in HSL bei gleichbleibender Sättigung und Helligkeit – genau so funktioniert ein Farbkreis. Der Kontrastwert neben jedem Farbfeld ist sein WCAG-Verhältnis gegenüber Weiß und gegenüber Schwarz; so sehen Sie sofort, welche Textfarbe ein Feld tragen kann.

So funktioniert dieses Werkzeug

Ihre Farbe wird in Farbton, Sättigung und Helligkeit zerlegt, und jedes Schema ist eine Reihe von Drehungen auf dem Farbkreis, bei denen die beiden anderen Werte konstant bleiben. Komplementär ist eine halbe Drehung, triadisch sind zwei Drehungen um je ein Drittel, analog nimmt nahe Nachbarn, und split-komplementär nimmt die beiden Farbtöne beiderseits des Komplements statt des Komplements selbst. Monochromatisch ist die Ausnahme: Der Farbton bewegt sich gar nicht, stattdessen wird die Helligkeit abgestuft.

Jede erzeugte Farbe wird als Hex, RGB und HSL zugleich gezeigt, dazu ihr Kontrastverhältnis gegen Weiß und gegen Schwarz. Diese beiden Zahlen sind das praktisch Wichtige — sie sagen sofort, welche der erzeugten Farben Text tragen kann und in welche Richtung. Eine Farbe, deren Verhältnis gegen beide niedrig ist, kann überhaupt keinen Text tragen und taugt als Fläche, nicht als Hintergrund für Wörter.

Was Harmonieregeln entscheiden und was nicht

  • Gleiche Drehungen ergeben kein gleiches visuelles Gewicht: Der Farbton ist ein geometrischer Kreis, kein wahrnehmungsbezogener. Eine Triade auf einem Gelb liefert eine Farbe, die weit heller ist als die anderen beiden, obwohl die Rechnung symmetrisch ist.
  • Sättigung und Helligkeit bleiben bewusst konstant: Genau das macht die Beziehung zwischen den Farben sichtbar. Eine fertige Palette variiert normalerweise beides, und diese Anpassung bleibt Ihnen überlassen.
  • Die Kontrastspalten gelten nur gegen Weiß und Schwarz: Sie sind ein schneller Hinweis, in welche Richtung Text gehen sollte. Jede konkrete Kombination, die Sie vorhaben, muss trotzdem einzeln geprüft werden.
  • Analoge Schemata brauchen eine dominante Farbe: Fünf benachbarte Farbtöne zu gleichen Teilen wirken unentschlossen. Wählen Sie eine als Leitfarbe und lassen Sie die übrigen sie stützen.

Harmony rules are rotations, nothing more

Every scheme here is the same operation: convert the colour to hue, saturation and lightness, then rotate the hue by a fixed amount while holding the other two constant.

  • Complementary — one half-turn. Maximum separation, and the reason it can look crude if used in equal amounts.
  • Triadic — two rotations of a third each. Balanced and vivid; needs one colour to dominate or it reads as a children's toy.
  • Analogous — near neighbours. Calm and cohesive, with little contrast to work with.
  • Split-complementary — the two hues either side of the complement rather than the complement itself. Keeps most of the contrast and is considerably easier to balance.
  • Monochromatic — the exception. Hue does not move at all; lightness steps instead.

The [msm_tool slug="color-wheel"] shows each colour as hex, rgb and hsl, with its contrast against white and against black.

Equal rotations are not equal weight

This is the thing worth carrying away, and it is why palettes built purely from the wheel often need adjusting by eye.

Hue is a geometric circle, not a perceptual one. A triad built on a yellow produces one colour far brighter than the other two, even though the arithmetic is perfectly symmetrical. Yellows and cyans are inherently lighter than blues and reds at the same saturation and lightness values.

So the wheel tells you which hues relate. It does not tell you they will sit in balance, and adjusting the lightness of the outliers afterwards is a normal part of the job rather than a sign you did it wrong.

Saturation and lightness are held constant deliberately

That is what makes the relationship between the colours visible. A finished palette almost never keeps them constant — the accent is usually more saturated than the base, the background far less so.

Treat the output as the skeleton. Vary the other two dimensions afterwards to give the palette a hierarchy.

The contrast columns are the useful part

Each colour's ratio against white and against black tells you two things at once: whether it can carry text, and in which direction.

A colour scoring well against white and poorly against black wants white text on it. One scoring poorly against both cannot carry text at all — it is a fill colour, a border, an accent on something else, and putting a label on it will fail regardless of which text colour you choose.

That is a faster way to sort a palette into roles than trying combinations by eye.

Proportion matters more than selection

A common rule of thumb is 60/30/10: sixty percent a dominant neutral or base, thirty a secondary, ten an accent. The specific numbers matter less than the principle, which is that colours from the same scheme used in equal amounts fight each other.

Analogous schemes suffer worst from this. Five neighbouring hues in equal measure read as indecisive rather than harmonious. Pick one to lead and let the rest support it.

What the wheel does not answer

  1. Whether any pair is readable. Two harmonious colours can be far too close in lightness to work as text and background. Check the pairs you actually intend to use.
  2. Whether the colours survive colour blindness. Red and green sit opposite on the wheel and are the classic pair that merges for a significant proportion of people. Harmony and distinguishability are different questions.
  3. What the colours mean. Red for danger and green for success are learned conventions that no rotation will respect. Semantic colours are chosen by convention, not derived from a brand.
  4. How they behave in dark mode. A palette tuned against white frequently needs its lightness values reworked rather than simply inverted.

A practical order

Start with the colour you are given — usually a brand colour. Use split-complementary if you need a clear accent, analogous if you want calm. Read the contrast columns and assign roles: which colours can carry text, which are fills, which is the accent.

Then vary lightness and saturation to build the actual scale, and check every text-and-background pair you intend to ship. The wheel gets you to a starting set in a minute; the rest is judgement it cannot make for you.

Häufig gestellte Fragen

Speziell zum Farbkreis & Farbschema-Generator. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.

Komplementär oder split-komplementär für eine Palette, die einen klaren Akzent braucht. Analog für etwas Ruhiges. Monochromatisch, wenn der Farbton bereits feststeht.
Das Verhältnis dieser Farbe gegen Weiß und gegen Schwarz. Sie zeigen auf einen Blick, in welche Richtung Text darauf gehen sollte und ob sie überhaupt Text tragen kann.
Weil die Farbtondrehung geometrisch ist und nicht wahrnehmungsbezogen. Gelb- und Cyantöne sind bei gleicher Sättigung und Helligkeit von Natur aus heller als Blau und Rot.
Die beiden Farbtöne beiderseits des direkten Komplements statt des Komplements selbst. Das erhält den größten Teil des Kontrasts und lässt sich leichter ausbalancieren.
Das gelingt selten. Lassen Sie eine dominieren und setzen Sie die übrigen sparsamer ein, sonst wirkt das Ergebnis unentschieden statt harmonisch.

Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.