Farbpalette-Generator

So benutzt du den Farbpalette-Generator

1. Drück auf Neue Palette (oder auf einer Tastatur die Leertaste) und du bekommst fünf Farben nach einer Farbharmonie. Jeder Druck erzeugt eine neue Zufallspalette.
2. Sperr die Farben, die dir gefallen, mit dem Schloss unter jedem Farbfeld. Gesperrte Farben bleiben stehen, während sich die anderen ändern; im Zufallsmodus wird die erste gesperrte Farbe außerdem zum Anker, um den die neuen Farben gebaut werden – sie passen also weiter dazu.
3. Geh von deiner eigenen Farbe aus: Stell Ausgangspunkt auf Meine Grundfarbe und wähl sie aus, zum Beispiel deine Markenfarbe. Jede Palette enthält dann genau diese Farbe.
4. Wähl eine Harmonie (analog, monochrom, komplementär, geteilt komplementär, Triade, Tetrade oder helle und dunkle Abstufungen) oder lass Beliebig stehen, dann wechselt sie jedes Mal.
5. Feinjustier eine Farbe mit dem Stift, der die Farbauswahl deines Geräts öffnet; die geänderte Farbe wird automatisch gesperrt.
6. Nimm die Farben aus einem Foto: Drück auf Farben aus einem Bild, zieh die Datei auf das Tool oder füg einen Screenshot ein. Die fünf Hauptfarben des Bildes werden ermittelt und gesperrt.
7. Kopieren und exportieren: Tipp auf einen Code, um ihn zu kopieren, schalte zwischen HEX, RGB, HSL und OKLCH um, kopier die ganze Palette als CSS-Variablen oder JSON oder lade ein PNG mit den fünf Farbfeldern herunter. Link kopieren liefert eine Adresse, die genau diese Palette öffnet.

Alles läuft in deinem Browser. Ein Bild, das du lädst, wird auf deinem Gerät gelesen, auf höchstens 100 Pixel an der längsten Seite verkleinert und dort ausgewertet; es wird nie hochgeladen.

Warum die Paletten in OKLCH entstehen

Die gängigen Farbkreise – HSL in CSS, HSV/HSB in Designprogrammen – sind bloß Umstellungen der Rot-, Grün- und Blaukanäle, keine Modelle des menschlichen Sehens. Bei derselben HSL-Helligkeit von 50 % wirkt reines Gelb viel heller als reines Blau, und eine Palette, die den Farbton in HSL dreht, springt zwischen grellen und trüben Farben. Dieser Generator rechnet in OKLCH, der Polarform von OKLab, einem wahrnehmungsorientierten Farbraum, den Björn Ottosson 2020 veröffentlicht hat und den CSS Color Module Level 4 als Funktion oklch() übernommen hat. Die drei Zahlen sind L (wahrgenommene Helligkeit, 0–100 %), C (Chroma, also die Buntheit: 0 ist Grau, sRGB-Farben erreichen etwa 0,32) und H (Farbtonwinkel in Grad). Gleiche Schritte in L wirken wie gleiche Helligkeitsschritte, egal bei welchem Farbton.

Die Umrechnung hat drei Schritte: die Gammakurve von sRGB rückgängig machen, um lineares Licht zu erhalten, mit einer festen Matrix multiplizieren und Kubikwurzeln ziehen, dann mit einer zweiten Matrix L, a und b berechnen. Das Chroma ist √(a² + b²), der Farbton atan2(b, a). Referenzwerte dieses Tools, die mit den veröffentlichten übereinstimmen:

Nicht jede OKLCH-Farbe lässt sich auf einem Bildschirm darstellen. Fällt eine geplante Farbe aus dem sRGB-Farbraum, behält der Generator Helligkeit und Farbton und senkt das Chroma, bis sie hineinpasst – dieselbe Idee wie das Gamut-Mapping in CSS Color 4. So verschiebt sich der Farbton nie, nur weil eine Farbe beschnitten wurde.

Wie eine Palette entsteht

Jede Palette beginnt mit einem Anker: deiner Grundfarbe, der ersten gesperrten Farbe oder einer Zufallsfarbe mit einer Helligkeit zwischen 45 % und 80 % und mittlerem Chroma. Die vier anderen Farben erhalten die Farbtöne der gewählten Harmonie und Helligkeitsstufen zwischen 30 % und 90 % (die Stufe, die dem Anker am nächsten liegt, entfällt, sodass sich jede Farbe in der Helligkeit vom Anker unterscheidet). Das Chroma schwankt um bis zu 30 % um das des Ankers und nimmt zu sehr hellen und sehr dunklen Farben hin ab, die voll gesättigt grell wirken. Eine Zufallszahl, die bei jeder neuen Palette gezogen wird, steuert alle Entscheidungen, und dieselbe Zahl ergibt immer dieselbe Palette – so stellt ein kopierter Link deine Farben exakt wieder her.

Weil die Winkel auf dem OKLCH-Farbkreis gemessen werden, kann die Komplementärfarbe anders ausfallen als auf einem HSL-Kreis oder dem Itten-Farbkreis aus dem Kunstunterricht: Die OKLCH-Komplementärfarbe von Marineblau #1f4e79 (Farbton 249°) ist ein warmer Oliv-Orange-Ton bei etwa 69°.

Beispiel: eine Triade aus #1f4e79

Mit der Grundfarbe #1f4e79 (OKLCH-Helligkeit 41,4 %, Chroma 0,088, Farbton 249,1°) und der Harmonie Triade erzeugt der Startwert der Seite die folgenden Farben. Die Farbtöne liegen bei etwa 249°, 9° und 129°, jeweils 120° auseinander, und die Helligkeit reicht von 28,7 % bis 92,9 %:

Die Kontrastspalten zeigen, welcher Text auf welcher Farbe funktioniert. Das dunkle Weinrot trägt weißen Text mit 14,66:1, das blasse Rosa schwarzen Text mit 16,79:1, und das mittlere Grün erreicht mit Weiß nur 3,64:1 – genug für große Überschriften, zu wenig für Fließtext.

Kontrast und Barrierefreiheit

Jedes Farbfeld zeigt die bessere Wahl aus weißem und schwarzem Text mit Kontrastverhältnis und Stufe; die Kontrasttabelle unter der Palette listet beide. Die Werte folgen den Web Content Accessibility Guidelines (WCAG) 2.2 des W3C (die europäische Norm EN 301 549 und damit die BITV 2.0 verweisen auf die Vorgängerversion 2.1 mit denselben Kontrastwerten): Die relative Leuchtdichte ist 0,2126 R + 0,7152 G + 0,0722 B der linearisierten Kanäle, das Verhältnis (hellere + 0,05) / (dunklere + 0,05), von 1:1 bis 21:1. Normaler Text braucht 4,5:1 für Stufe AA und 7:1 für AAA; großer Text (24 px oder 18,7 px fett) braucht 3:1 für AA. Die Verhältnisse werden nach zwei Nachkommastellen abgeschnitten, nicht gerundet, damit keine Farbe als bestanden erscheint, die es nicht ist.

Tipps für den Einsatz einer Palette

• Gib jeder Farbe eine Rolle. Eine verbreitete Aufteilung ist 60 % Hintergrund- oder Hauptfarbe, 30 % Zweitfarbe und 10 % Akzent; die dunkelste Farbe eignet sich oft für Text.
• Prüf den Text, bevor du dich festlegst. Nutz die Kontrasttabelle oder füg ein beliebiges Paar in den Farbwähler ein, um Codes und Kontrast zu sehen.
• Verlass dich nicht nur auf den Farbton. Etwa jeder zwölfte Mann hat eine Rot-Grün-Sehschwäche; variier auch die Helligkeit.
• Nutz den CSS-Export als Startpunkt für Design-Tokens: Benenn --color-1 und die anderen in Rollen wie --marke oder --hintergrund um.

Häufige Fragen

Zuletzt aktualisiert: 15. Oktober 2026