Farbpaletten-Generator - Erstellen Sie harmonische Farbschemata

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 Hexadezimalcode (zum Beispiel #3B82F6) in das HSL-Farbmodell um. HSL beschreibt eine Farbe mit drei Zahlen:

• Farbton: die Position der Farbe auf einem 360-Grad-Farbkreis (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 Hexadezimalcode um.

So werden komplementäre Farben berechnet

Die Formel:

$h' = (h + 180) \bmod 360$

Dabei ist h der Farbton der Primärfarbe in Grad und h′ der neue Farbton. Der Modulo-Schritt führt ein Ergebnis, das über eine vollständige Umdrehung hinausgeht, wieder auf den Farbkreis zurück.

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.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

Dabei ist h der Farbton der Primärfarbe.

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.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

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 %.

$l \pm 15, \qquad l \pm 30$

Dabei ist l die Helligkeit der Primärfarbe in Prozentpunkten.

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

Aufgrund der Begrenzungen bei 5 % und 95 % kann eine Primärfarbe, die bereits sehr hell oder sehr dunkel ist, zweimal an dieselbe Grenze stoßen. Schwarz, #000000, ergibt die Helligkeiten 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) und erneut 5 % (#0D0D0D), sodass sich eine Farbe wiederholt.

Das Werkzeug verwenden

1. Wählen Sie mit dem Farbwähler eine Primärfarbe aus oder geben Sie einen Hexadezimalcode 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 Hexadezimalcode auf einer Schaltfläche.
4. Klicken Sie auf diese Schaltfläche, um den Hexadezimalcode zu kopieren, oder verwenden Sie „Alle Farben kopieren“, um die gesamte Palette auf einmal zu kopieren.

Kontrastprüfung für die Barrierefreiheit

Jedes Farbfeld zeigt zwei kleine Abzeichen: eines für den Kontrast gegenüber Weiß und eines für den Kontrast gegenüber Schwarz. Das Werkzeug berechnet mithilfe der WCAG-Formel (Richtlinien für barrierefreie Webinhalte) ein Kontrastverhältnis:

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

Dabei ist C das Kontrastverhältnis.

L1 ist die relative Leuchtdichte der helleren Farbe und L2 die relative Leuchtdichte der dunkleren Farbe. Die Leuchtdichte wird aus den Rot-, Grün- und Blauwerten der Farbe berechnet. Ein Abzeichen zeigt „AA“, wenn das Verhältnis 4,5 oder höher ist, dem WCAG-Mindestwert für Text in normaler Größe. Bei einem Verhältnis unter 4,5 zeigt es „!“. Wenn der Mauszeiger über ein Abzeichen bewegt wird, erscheint das genaue Verhältnis. Schwarzer Text auf weißem Hintergrund erreicht ein Verhältnis von 21, den höchstmöglichen Wert.

Das Werkzeug verwendet dieselbe Kontrastregel, um die Farbe der Kopierschaltfläche für jedes Farbfeld auszuwählen. Es vergleicht die Farbe des Farbfelds mit Schwarz und Weiß und verwendet anschließend diejenige der beiden Farben, die besser lesbar ist. Der Wechsel erfolgt bei einer relativen Leuchtdichte von etwa 0,179, dem Punkt, an dem beide Verhältnisse gleich sind.

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 schreibt jede erzeugte Farbe als sechsstelligen Hexadezimalcode mit einem vorangestellten #-Zeichen, zum Beispiel #ff0000 für Rot. Hexadezimalcodes bilden die Rot-, Grün- und Blauwerte jeweils von 0 bis 255 direkt ab. Die Primärfarbe wird genau so angezeigt, wie sie eingegeben wurde. Eine dreistellige Kurzform wie #F00 bleibt daher in Kurzform. Dreistellige Codes bezeichnen dieselbe Farbe wie die sechsstellige Form: Jede Ziffer wird verdoppelt, sodass #F00 #FF0000 entspricht. HSL ist eine alternative Beschreibung derselben Farben mit Farbton, Sättigung und Helligkeit anstelle der Rot-, Grün- und Blauanteile.