raatools/

Farbpaletten-Generator

Erzeugen Sie harmonische Farbpaletten aus jeder Grundfarbe.

HSL: 243, 75, 59

Complementary

Analogous

Triadic

Split Complementary

Tetradic (Square)

Shades (Lightness Scale)

Was ist ein Farbpalettengenerator?

Ein Farbpalettengenerator erstellt harmonische Farbkombinationen basierend auf der Farbtheorie. Er hilft Designern, visuell ansprechende Farbschemata fuer Websites, Apps, Markenidentitaeten und Grafiken zu erstellen.

Die Farbtheorie definiert Beziehungen zwischen Farben auf dem Farbkreis. Bestimmte Kombinationen erzeugen natuerlich ansprechende Ergebnisse, da sie auf mathematischen Verhaeltnissen der Farbtonwinkel basieren.

So verwenden Sie dieses Tool

Waehlen Sie eine Grundfarbe und einen Harmonie-Typ. Das Tool generiert eine vollstaendige Palette mit HEX- und RGB-Werten zum Kopieren. Passen Sie Saettigung und Helligkeit an, um die Palette zu verfeinern.

Farbharmonien

  • Komplementaer — Farben gegenueber auf dem Farbkreis (z.B. Blau und Orange). Hoher Kontrast, energisch und aufmerksamkeitsstark.
  • Analog — benachbarte Farben auf dem Farbkreis (z.B. Blau, Blaugruen, Gruen). Harmonisch und beruhigend.
  • Triadisch — drei gleichmaessig verteilte Farben (z.B. Rot, Gelb, Blau). Lebendig und ausgewogen.
  • Geteilt-komplementaer — eine Basisfarbe plus die zwei Nachbarn ihrer Komplementaerfarbe. Kontrastreicher als analog, weniger hart als komplementaer.

Farbe und Barrierefreiheit

Etwa 8 % der Maenner und 0,5 % der Frauen haben eine Farbsehschwaeche. Verlassen Sie sich nie allein auf Farbe zur Informationsvermittlung. Stellen Sie sicher, dass Textkontraste die WCAG-AA-Anforderungen erfuellen (Verhaeltnis von mindestens 4,5:1 fuer normalen Text).

Beispiel aus der Praxis

Beginne mit einem Marken-Blau von HSL(220, 80 %, 55 %). Ein komplementärer Akzent liegt gegenüber auf dem Farbkreis bei Farbton 40, einem warmen Bernstein. Für ein Dreiklang-Schema drehe zweimal um 120 Grad zu Farbton 340 und Farbton 100. Sättigung und Helligkeit konstant zu halten und nur den Farbton zu drehen, ergibt Farben, die verwandt und ausgewogen wirken statt zufällig.

Häufige Fehler

Der häufigste Fehler ist, Kontrast nur nach dem Farbton zu beurteilen; ein helles Gelb und Weiß können sich unterscheiden und trotzdem den WCAG-Kontrast für Text verfehlen. Prüfe stets das Kontrastverhältnis, nicht nur die Farben. Ein weiterer ist, zu viele kräftige Akzentfarben zu verwenden, was ein Design zerfasert — die meisten Paletten wirken mit einer dominanten Farbe, einer sekundären und einem einzigen Akzent am besten.

Haeufig gestellte Fragen

Wie viele Farben sollte eine Palette haben?

Die meisten Designsysteme verwenden 5-7 Farben: eine Primaerfarbe, eine Sekundaerfarbe, eine Akzentfarbe, eine Hintergrundfarbe und 2-3 Grautone. Zu viele Farben schaffen visuelles Chaos.

Wie waehle ich die richtige Primaerfarbe?

Beruecksichtigen Sie Farbpsychologie: Blau vermittelt Vertrauen (Banken, Technologie), Gruen steht fuer Natur/Gesundheit, Rot fuer Energie/Dringlichkeit, Violett fuer Luxus. Ueberpruefen Sie auch, welche Farben Ihre Wettbewerber verwenden.

Was ist die 60-30-10-Regel im Farbdesign?

Es ist eine Richtlinie zum Ausbalancieren einer Palette: etwa 60 % eines Designs nutzen eine dominante Farbe (oft ein Neutral), 30 % eine sekundäre Farbe und 10 % einen Akzent für Hervorhebungen und Handlungsaufforderungen. Die Verhältnisse halten ein Layout stimmig und geben dem Akzent zugleich genug Kontrast, um den Blick zu lenken.