Farbpalette-Generator
Für die Farbpalette die 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.
Quelle: CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. Stand: .
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.
Farbpalette erstellen – so geht's
- Basisfarbe als HEX, RGB oder HSL eingeben oder mit dem Farbwähler aussuchen.
- Farbharmonie wählen, etwa komplementär, analog, triadisch oder monochrom.
- Die Farben mit HEX-, RGB- und HSL-Werten kopieren.
Beispiel: Aus dem Blau hsl(217, 91 %, 60 %) wird durch Drehen um 180° im Farbkreis die Komplementärfarbe hsl(37, 91 %, 60 %) – ein warmes Orange, etwa #F6AF3C.
| Harmonie | Drehung des Farbtons | Farben |
|---|---|---|
| Komplementär | 0°, 180° | 2 |
| Analog | −30°, 0°, +30° | 3 |
| Triadisch | 0°, 120°, 240° | 3 |
| Split-komplementär | 0°, 150°, 210° | 3 |
| Tetradisch (Rechteck) | 0°, 60°, 180°, 240° | 4 |
| Quadrat | 0°, 90°, 180°, 270° | 4 |
| Monochrom | kein Drehen; Helligkeit in 5 Stufen | 5 |
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.
Weitere Farbwerkzeuge: Farbwerte umrechnen mit dem Farbumrechner, die Lesbarkeit prüfen mit dem Kontrast-Checker und eine Farbe aus einem Foto holen mit der Pipette.
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.
Welche Farben passen zusammen?
Harmonisch wirken Farben mit festen Abständen im Farbkreis: komplementär (180°) für starken Kontrast, analog (benachbarte Töne) für ruhige Paletten, triadisch (je 120°) für ausgewogene bunte Kombinationen.
Quellen und Rechtsgrundlagen
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Stand: · So prüfen wir
Passende Werkzeuge
- Farbumrechner: HEX, RGB, HSL, HSV, CMYKFarbwerte umrechnen: HEX in RGB, RGB in HEX, HSL, HSV, HWB und CMYK – Eingabe in jedem Format oder per Farbwähler, Ergebnis zum Kopieren, direkt im Browser.
- Farbkontrast prüfen nach WCAG 2.2Farbkontrast von Text- und Hintergrundfarbe prüfen: Kontrastverhältnis nach WCAG 2.2, Bewertung AA/AAA für normalen und großen Text sowie UI-Elemente.
- Farbe aus Bild bestimmen (Pipette)Farbcode aus einem Bild auslesen: Foto laden, Stelle anklicken, HEX-, RGB- und HSL-Wert kopieren – plus Hauptfarben. Ohne Upload, alles bleibt im Browser.
- BMI-Rechner nach WHOBMI-Rechner: Body-Mass-Index aus Größe und Gewicht mit WHO-Kategorie auf farbiger Skala, Normalgewicht für Ihre Größe und BMI Prime – in cm/kg oder ft/lb.
- KalorienrechnerKalorienrechner: Alter, Geschlecht, Größe, Gewicht, Aktivität und Wochenziel eingeben und die täglichen Kalorien zum Abnehmen, Halten oder Zunehmen erhalten.
- Pflegegrad Rechner: Pflegegrad selbst berechnenPflegegrad Rechner 2026: alle 64 Kriterien der Begutachtung in 6 Modulen bewerten – Punkte, gewichtete Punkte und voraussichtlicher Pflegegrad 1 bis 5.
- Scheidungskosten Rechner 2026Scheidungskosten Rechner 2026: Verfahrenswert, Gerichtskosten und Anwaltskosten der Scheidung aus dem Nettoeinkommen – einvernehmlich oder mit zwei Anwälten.
- Pflegegeld Rechner 2026 mit KombinationsleistungPflegegeld Rechner 2026: Pflegegeld für Pflegegrad 2 bis 5 berechnen, auch als Kombinationsleistung mit dem Pflegedienst – Beträge nach § 37 und § 38 SGB XI.
- Maya-Kalender umrechnenMaya-Kalender umrechnen: jedes Datum in Lange Zählung, Tzolk’in-Tag und Haab’-Datum übertragen oder eine Lange Zählung zurück in unser Datum – GMT-Korrelation.