Farbpalette Generator: Farbschema erstellen

Ein stimmiges Farbschema in wenigen Sekunden

Dieser Farbpalette Generator schlägt Ihnen fünf Farben vor, die zusammenpassen: per Zufall, ausgehend von einer Grundfarbe oder aus einem Foto. Zu jeder Farbe sehen Sie die Codes in HEX, RGB und HSL, den Kontrast zu Weiß und Schwarz und die Schriftfarbe, die darauf lesbar bleibt. Alles wird in Ihrem Browser berechnet: Nichts wird hochgeladen.

So funktioniert es

1. Klicken Sie auf „Farbpalette erzeugen“ oder drücken Sie die Leertaste. Im Menü „Farbharmonie“ wählen Sie die Regel, von „Komplementär“ bis „Monochrom“, oder „Zufällig“.
2. Eine Farbe gefällt Ihnen? Klicken Sie auf ihr Schloss: Sie bleibt stehen, die übrigen werden um sie herum berechnet.
3. Für eine bestimmte Ausgangsfarbe tragen Sie diese unter „Grundfarbe“ ein und klicken auf „Harmonie anwenden“. „Berechnung der Farbtöne“ wechselt zwischen HSL und OKLCH, das die Helligkeit gleichmäßiger hält.
4. Jede Farbe lässt sich mit dem Farbwähler oder dem HEX-Feld anpassen; die Reihenfolge ändern Sie, indem Sie den Griff einer Farbe ziehen.
5. Ein Klick auf einen Code kopiert ihn. „Palette exportieren“ liefert CSS-Variablen, ein JSON-Array, ein PNG-Bild und einen Link, der die Palette wieder öffnet.

Außerdem können Sie eine Palette aus einem Foto gewinnen, eine Farbe in „Farbabstufungen von 50 bis 900“ zerlegen und Favoriten sowie die letzten 20 Paletten auf diesem Gerät behalten.

Farbkreis und Farbharmonien

Im Farbkreis hat jeder Farbton einen Winkel: Rot liegt bei 0°, Grün bei 120°, Blau bei 240°. Ein Farbschema ist eine Auswahl von Winkeln. So sieht das im HSL-Modus aus, ausgehend von reinem Rot #ff0000:

Komplementärfarben liegen sich gegenüber und ergeben den stärksten Kontrast. Analoge Farben sind Nachbarn und wirken ruhig. Eine monochrome Palette bleibt bei einem Farbton und variiert die Helligkeit. Hat eine Harmonie weniger als fünf Farben, ergänzt das Werkzeug hellere oder dunklere Varianten.

HEX schreibt eine Farbe als drei Paare hexadezimaler Ziffern für Rot, Grün und Blau, etwa #1d4ed8. RGB nennt dieselben Werte von 0 bis 255, rgb(29, 78, 216), HSL übersetzt sie in Farbton, Sättigung und Helligkeit, hsl(224, 76%, 48%).

Paletten richtig einsetzen: die 60-30-10-Regel

Die 60-30-10-Regel gibt 60 % der Fläche einer Hauptfarbe, oft einem neutralen Ton, 30 % einer Nebenfarbe und 10 % einer Akzentfarbe für alles, was ins Auge fallen soll.

• Website: heller Hintergrund, Markenfarbe für Überschriften, Akzent für Schaltflächen.
• Logo: zwei oder drei Farben, getestet in Schwarz-Weiß und klein, etwa auf einer Visitenkarte.
• Präsentation: ein Hintergrund, eine Farbe für Überschriften, eine oder zwei für Diagramme, mit kräftigem Kontrast, denn Beamer lassen Farben verblassen.
• Wohnen: Wände bekommen 60 %, Möbel 30 %, Kissen und Deko 10 %. Wandfarbe sieht nie aus wie am Bildschirm: Streichen Sie vorher eine Probefläche.

Kontrast, Barrierefreiheit und Farbenblindheit

Die WCAG-Richtlinien verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (Stufe AA), für Stufe AAA 7:1. Schwarz #000000 auf Weiß erreicht 21:1. Grau #777777 auf Weiß kommt nur auf 4,48:1: Für normalen Text reicht das nicht, das Werkzeug zeigt „AA großer Text“.

Schätzungen zufolge haben etwa 8 % der Männer und 0,5 % der Frauen europäischer Herkunft eine Farbsehschwäche, meist bei der Unterscheidung von Rot und Grün. Die „Simulation von Farbenblindheit“ zeigt Ihre Palette bei Protanopie, Deuteranopie und Tritanopie. Verschwimmen zwei Farben, ergänzen Sie eine Beschriftung oder ein Symbol.

Häufige Fragen

Warum ist die Komplementärfarbe in OKLCH anders?

In HSL ist die Komplementärfarbe von #ff0000 genau #00ffff. In OKLCH dreht sich der Farbton bei gleicher wahrgenommener Helligkeit; heraus kommt #009aac, das neben Rot ausgewogener wirkt.

Wie behalte ich eine Farbe beim Neuerzeugen?

Klicken Sie auf ihr Schloss. Während Sie in ein Feld tippen, löst die Leertaste nichts aus.

Werden meine Fotos hochgeladen?

Nein. Das Bild wird im Browser ausgewertet: Die Pixel werden nach ähnlichen Farben gruppiert, jede große Gruppe liefert eine Farbe.

Wie teile ich eine Palette?

„Link zur Palette kopieren“ legt die fünf Codes in der Adresse ab, zum Beispiel #ff0000-00ffff-….