DE

Farbpalette-Generator

Basisfarbe als HEX, RGB oder HSL eingeben oder mit dem Farbwähler aussuchen, dann die Farbharmonie wählen. Der Generator dreht den Farbton im HSL-Farbkreis und zeigt jede Farbe als Farbfeld mit HEX-, RGB- und HSL-Wert zum Kopieren.

z. B. #3B82F6, rgb(59, 130, 246) oder hsl(217, 91%, 60%)
Deine Eingaben werden nur in diesem Browser gespeichert.

Farbfelder

  • Basisfarbe#3B82F6
  • +120°#F63B82
  • +240°#82F63B

Ergebnis

Farbpalette
FarbeHEXRGBHSL
Basisfarbe#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)
+120°#F63B82rgb(246, 59, 130)hsl(337, 91%, 60%)
+240°#82F63Brgb(130, 246, 59)hsl(97, 91%, 60%)

So wird gerechnet

So entstehen die Farbharmonien

Der Generator rechnet die Basisfarbe in das HSL-Modell um (Farbton H in Grad, Sättigung S und Helligkeit L in Prozent, nach CSS Color Module Level 4). Für jede Harmonie wird nur der Farbton gedreht; Sättigung und Helligkeit bleiben gleich. Anschließend wird jede Farbe zurück in sRGB umgerechnet und auf ganze Werte von 0 bis 255 gerundet.

HarmonieDrehung des FarbtonsFarben
Komplementär0°, 180°2
Analog−30°, 0°, +30°3
Triadisch0°, 120°, 240°3
Split-komplementär0°, 150°, 210°3
Tetradisch (Rechteck)0°, 60°, 180°, 240°4
Quadrat0°, 90°, 180°, 270°4
Monochromkein Drehen; Helligkeit in 5 Stufen5

Beispiel: Reines Rot #FF0000 hat H = 0°, S = 100 %, L = 50 %. Um 180° gedreht ergibt sich H = 180° – das ist Cyan #00FFFF, die Komplementärfarbe. Triadisch kommen 120° (Grün #00FF00) und 240° (Blau #0000FF) hinzu.

Monochrome Palette

Bei „Monochrom“ bleibt der Farbton gleich. Die Helligkeit wird in zwei gleich großen Schritten Richtung Schwarz und in zwei Schritten Richtung Weiß verändert. Bei der Standardfarbe #3B82F6 (L ≈ 60 %) liegen die Stufen bei etwa 20 %, 40 %, 60 %, 73 % und 87 %.

Lesbare Schrift auf den Farbfeldern

Die Beschriftung jedes Farbfelds ist schwarz oder weiß – je nachdem, was nach der WCAG-Formel für relative Luminanz den höheren Kontrast ergibt. So erreicht die Schrift immer mindestens 4,58 : 1. Ob zwei Farben Ihrer Palette als Text- und Hintergrundfarbe zusammenpassen, prüfen Sie mit dem Kontrastprüfer.

Grenzen

HSL ist ein einfaches geometrisches Modell, kein wahrnehmungsgleiches: Gelb wirkt bei gleichem L deutlich heller als Blau. Die berechneten Harmonien sind daher ein Ausgangspunkt – feinabstimmen dürfen Sie nach Auge. Grautöne haben keinen Farbton; für sie ergeben Drehungen dieselbe Farbe.

Häufige Fragen

Was ist die Komplementärfarbe von Blau?

Im HSL-Farbkreis liegt sie 180° gegenüber. Für Blau #0000FF (H = 240°) ist das Gelb #FFFF00 (H = 60°), für #3B82F6 (H ≈ 217°) ein Orange um #F6AF3B.

Welche Eingabeformate versteht der Generator?

HEX mit 3, 4, 6 oder 8 Stellen (mit oder ohne #), rgb() und rgba(), hsl() und hsla(), hsv()/hsb(), hwb() sowie drei Zahlen wie „59, 130, 246“ (als RGB). Komma- und Leerzeichen-Schreibweise nach CSS Color 4 funktionieren beide.

Wie übernehme ich die Farben in CSS oder ein Grafikprogramm?

Jedes Farbfeld hat einen Kopier-Knopf für den HEX-Wert. „Als CSS-Variablen kopieren“ legt einen :root-Block mit --farbe-1, --farbe-2 … in die Zwischenablage. RGB- und HSL-Werte stehen in der Tabelle darunter.

Warum sehen manche Harmonien unausgewogen aus?

HSL misst Helligkeit rein rechnerisch. Gelb und Cyan wirken bei gleichem L-Wert viel heller als Blau oder Violett. Passen Sie bei Bedarf die Helligkeit einzelner Farben an oder wählen Sie eine weniger gesättigte Basisfarbe.

Quellen und Rechtsgrundlagen

Stand:

Passende Werkzeuge