Zum Inhalt springen
🛠️
Whiz Tools

Farbpaletten-Generator - Erstellen Sie harmonische Farbschemata

Kostenloser Farbpaletten-Generator erstellt wunderschöne komplementäre, analoge, triadische und monochromatische Farbschemata sofort. Wählen Sie eine Primärfarbe und generieren Sie harmonische Paletten für Webdesign, Grafiken und Branding-Projekte.

Einfacher Farbpaletten-Generator

Wählen Sie den Harmonietyp

Generierte Palette

Wählen Sie eine Farbe und einen Harmonietyp, um eine Palette zu generieren

Über Farbharmonien

Farbharmonien sind Farbkombinationen, die angenehm für das Auge sind. Sie schaffen ein Gefühl von Ordnung und Ausgewogenheit im Design.

Harmonietypen

  • Komplementär: Farben, die sich gegenüber auf dem Farbkreis befinden, erzeugen hohen Kontrast und lebendige Looks.
  • Analog: Farben, die nebeneinander auf dem Farbkreis liegen, schaffen ein ruhiges und komfortables Design.
  • Triadisch: Drei Farben, die gleichmäßig um den Farbkreis verteilt sind und starken visuellen Kontrast bei gleichzeitiger Harmonie bieten.
  • Monochrom: Verschiedene Schattierungen, Töne und Nuancen einer einzigen Farbe, die einen zusammenhängenden Look mit subtilen Variationen erzeugen.
Ladekalkulator...
📚

Dokumentation

Was ist ein Farbpaletten-Generator?

Ein Farbpaletten-Generator ist ein Werkzeug, das ausgehend von einer Startfarbe, der Primärfarbe, eine Gruppe zusammenpassender Farben erstellt. Dieser Farbpaletten-Generator nimmt eine Primärfarbe und einen Harmonietyp entgegen und berechnet anschließend mithilfe von Regeln der Farbtheorie den Rest der Palette. Die vier unterstützten Harmonietypen sind komplementär, analog, triadisch und monochromatisch.

So erstellt das Werkzeug eine Palette

Das Werkzeug wandelt die Primärfarbe aus einem Hex-Code (zum Beispiel #3B82F6) in das HSL-Farbmodell um. HSL beschreibt eine Farbe mit drei Zahlen:

  • Farbton: die Position der Farbe auf einem Farbkreis von 360 Grad (0° ist Rot, 120° ist Grün, 240° ist Blau).
  • Sättigung: die Intensität der Farbe, von 0 % (Grau) bis 100 % (reine Farbe).
  • Helligkeit: wie nah die Farbe an Schwarz oder Weiß liegt, von 0 % (Schwarz) bis 100 % (Weiß).

Jeder Harmonietyp verschiebt den Farbton, die Helligkeit oder beides und wandelt das Ergebnis anschließend wieder in einen Hex-Code um.

So werden komplementäre Farben berechnet

Die Formel:

1new_hue = (original_hue + 180) mod 360
2

Sättigung und Helligkeit bleiben unverändert.

Ausgearbeitetes Beispiel: Reines Blau, #0000FF, hat den Farbton 240°, die Sättigung 100 % und die Helligkeit 50 %. Durch Addition von 180° ergibt sich der Farbton 60°. Wird der Farbton 60° bei gleicher Sättigung und Helligkeit wieder in einen Hexadezimalcode umgewandelt, ergibt sich #FFFF00, also Gelb. Das Werkzeug kombiniert Blau daher mit Gelb und nicht mit Orange.

Das kann verwirrend sein, weil im Kunstunterricht häufig ein anderer Farbkreis vermittelt wird: der RYB-Pigmentfarbkreis (Rot-Gelb-Blau), bei dem Orange die Gegenfarbe von Blau ist. Dieses Werkzeug verwendet den RGB-basierten HSL-Farbkreis von Bildschirmen. Deshalb unterscheiden sich seine komplementären Farbpaare vom Farbkreis zum Mischen von Farben.

So werden analoge Farben berechnet

Analoge Farben liegen auf dem Farbkreis nahe bei der Primärfarbe. Das Werkzeug erzeugt zwei Farbtöne mit einem Abstand von 30° und zwei Farbtöne mit einem Abstand von 60° zum Primärfarbton, alle bei gleicher Sättigung und Helligkeit.

1hue ± 30°  and  hue ± 60°
2

Ausgearbeitetes Beispiel: Blau, #0000FF (Farbton 240°), erzeugt den Farbton 270° (#8000FF), den Farbton 210° (#0080FF), den Farbton 300° (#FF00FF) und den Farbton 180° (#00FFFF). Zusammen mit der Primärfarbe enthält die Palette fünf Farben.

So werden triadische Farben berechnet

Triadische Farben liegen auf dem Farbkreis 120° voneinander entfernt und bilden zusammen mit der Primärfarbe ein gleichmäßig verteiltes Trio.

1hue + 120°  and  hue + 240°
2

Ausgearbeitetes Beispiel: Rot, #FF0000 (Farbton 0°), erzeugt den Farbton 120° (#00FF00, Grün) und den Farbton 240° (#0000FF, Blau). Das Dreifarben-Set besteht aus Rot, Grün und Blau, den drei Grundfarbtönen digitaler Bildschirme.

So werden monochromatische Farben berechnet

Monochromatische Farben behalten Farbton und Sättigung bei und verändern nur die Helligkeit. Das Werkzeug verschiebt die Helligkeit in jede Richtung um 15 und 30 Prozentpunkte, begrenzt auf einen Bereich zwischen 5 % und 95 %.

1lightness ± 15  and  lightness ± 30
2

Ausgearbeitetes Beispiel: Blau, #0000FF (Helligkeit 50 %), erzeugt eine Helligkeit von 65 % (#4D4DFF), 35 % (#0000B3), 80 % (#9999FF) und 20 % (#000066).

Das Werkzeug verwenden

  1. Wählen Sie mit dem Farbwähler eine Primärfarbe aus oder geben Sie einen Hex-Code wie #3B82F6 ein.
  2. Wählen Sie einen Harmonietyp: komplementär, analog, triadisch oder monochromatisch.
  3. Lesen Sie die erzeugte Palette ab. Jedes Farbfeld zeigt seinen Hex-Code.
  4. Klicken Sie auf ein Farbfeld, um seinen Hex-Code zu kopieren, oder verwenden Sie „Alle Farben kopieren“, um die ganze Palette auf einmal zu kopieren.

Kontrastprüfung für die Barrierefreiheit

Jedes Farbfeld zeigt zwei kleine Kennzeichen: eines für den Kontrast gegenüber Weiß, eines für den Kontrast gegenüber Schwarz. Das Werkzeug berechnet ein Kontrastverhältnis mit der Formel der WCAG (Web Content Accessibility Guidelines):

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

L1 ist die relative Leuchtdichte der helleren Farbe und L2 die relative Leuchtdichte der dunkleren Farbe. Die Leuchtdichte ergibt sich aus den Rot-, Grün- und Blauwerten der Farbe. Ein Kennzeichen zeigt „AA“, wenn das Verhältnis bei 4,5 oder darüber liegt, was dem Mindestwert von 4,5:1 der WCAG-Stufe AA für Text normaler Größe entspricht. Andernfalls zeigt es „!“. Schwarzer Text auf weißem Hintergrund erreicht ein Verhältnis von 21, den höchstmöglichen Wert.

Häufig gestellte Fragen

Was ist ein Farbpaletten-Generator? Es handelt sich um ein Werkzeug, das ausgehend von einer Primärfarbe und einer ausgewählten Harmon ieregel eine Gruppe zusammenpassender Farben erzeugt.

Warum kombiniert dieses Werkzeug bei komplementären Farben Blau mit Gelb statt mit Orange? Das Werkzeug dreht den Farbton auf dem HSL-Farbkreis um 180°. Dieser basiert darauf, wie Bildschirme rotes, grünes und blaues Licht mischen. Der im Kunstunterricht vermittelte Rot-Gelb-Blau-Farbkreis erzeugt andere komplementäre Farbpaare, weil er Pigmente statt Licht mischt.

Wie viele Farben erzeugt jeder Harmonietyp? Komplementär erzeugt insgesamt 2 Farben, einschließlich der Primärfarbe. Triadisch erzeugt 3. Analog erzeugt 5. Monochromatisch erzeugt 5.

Welches Farbmodell verwendet das Werkzeug intern? HSL (Farbton, Sättigung, Helligkeit). Es wandelt den eingegebenen Hexadezimalcode in HSL um, führt die Berechnung durch und wandelt das Ergebnis anschließend wieder in einen Hexadezimalcode um.

Prüft das Werkzeug, ob Farben barrierefrei sind? Ja. Jedes Farbfeld zeigt, ob es gegenüber Weiß und Schwarz genügend Kontrast aufweist, um den WCAG-AA-Standard für normalen Text zu erfüllen. Dafür ist ein Verhältnis von mindestens 4,5 erforderlich.

Kann ich für ein Projekt mehr als einen Harmonietyp verwenden? Ja. Viele Designs kombinieren Harmonietypen, zum Beispiel ein analoges Set für die Hauptfarben und eine komplementäre Farbe für eine Schaltfläche oder Hervorhebung.

Farbformate

Das Werkzeug zeigt Farben als Hex-Codes an, sechsstellige Codes mit einem vorangestellten #-Zeichen (zum Beispiel #FF0000 für Rot). Hex-Codes entsprechen direkt Rot-, Grün- und Blauwerten von jeweils 0 bis 255. HSL ist eine alternative Beschreibung derselben Farben, die Farbton, Sättigung und Helligkeit statt der Rot-, Grün- und Blauanteile verwendet.

Referenzen

  1. World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.2. WCAG 2.2 — Kontrastverhältnis (L1 + 0,05) / (L2 + 0,05), Verhältnisse von 1 bis 21 und der Mindestwert von 4,5:1 für normalen Text (Erfolgskriterium 1.4.3, Stufe AA).
  2. World Wide Web Consortium (W3C). CSS Color Module Level 4. CSS Color Module Level 4 — in HSL ist der Farbton 0° Rot, 120° Grün und 240° Blau.