Farbschema Generator
Paletten, die zusammenpassen
Dieser Farbschema Generator startet mit einer Farbe, einem Namen oder einem Foto. Daher bekommen Sie komplementäre, analoge, triadische und monochrome Paletten, jede mit Hex-Codes, CSS-Variablen und einer Kontrastlesung. Das Rad läuft in Ihrem Browser, und wir laden nichts hoch.
- KostenlosPreis
- SechsHarmonien
- KeineAnmeldung
- KeineUploads
Farbschema Generator
Eine Farbe hinein, sechs Harmonien heraus — mit Kontrasttabelle und fünf Exportformaten
Ein Hex-Code, rgb(), hsl() oder ein Farbname funktionieren alle. Nichts wird hochgeladen — die ganze Seite läuft in diesem Tab.
Der Leser nennt die Harmonie, die am besten passt. Auch ein knapper Fehlschlag bekommt eine Antwort.
Das Bild wird auf einem Canvas in diesem Tab gelesen, eine noch unveröffentlichte Datei bleibt also unveröffentlicht. Bis zu fünf Farben kommen zurück, die meistgenutzten zuerst; ein flaches Bild gibt weniger.
Eine Helligkeitsstufe ist die übliche Reparatur, wenn eine Harmonie auf dem Rad richtig und auf der Seite unlesbar ist.
| Text auf Hintergrund | Verhältnis | Fließtext | Großer Text |
|---|
Die Schwellen sind die der WCAG: 4,5 zu 1 für Fließtext und 3 zu 1 für großen Text.
Bereit. Tippen Sie eine Farbe, wählen Sie eine, oder drücken Sie Seitenblau.
Was ein Farbschema Generator tut
Eine Farbe ist ein Startpunkt und kein Plan. Eine Seite braucht einen Hintergrund, eine Textfarbe, eine Linie und einen Akzent, die zusammengehören. Daher nimmt ein Farbschema Generator die Farbe, die Sie schon haben, und arbeitet den Rest aus.
Vier Dinge kommen aus einer Auswahl zurück. Zuerst die Harmonien: komplementär, analog, triadisch, komplementär geteilt, tetradisch und monochrom. Dann eine Reihe von Tönen und Schattierungen von fast schwarz bis fast weiß. Danach eine Kontrasttabelle, die sagt, welches Paar Text tragen kann. Zuletzt die Exportformate, fertig zum Einfügen.
Diese Kontrasttabelle ist wichtiger, als sie aussieht. Eine hübsche Palette, die die Kontrastregel verfehlt, wird zu einem Support-Ticket. Jedes Paar bekommt also eine Lesung, und jede durchgefallene Zeile sagt das in Worten.
Die Richtung läuft auch rückwärts. Weil Sie eine Palette einfügen können, die Sie schon besitzen, und fragen können, welche Harmonie am besten passt, hilft die Seite, wenn Sie ein Design erben und es ohne sichtbaren Bruch erweitern müssen.
Wie ein Farbschema Generator eine Palette baut
Die Mathematik ist älter als das Web. Ein Farbkreis ordnet Töne in einem Kreis, und jede Harmonie ist eine Form, die auf diesen Kreis gezeichnet wird. Zwei gegenüberliegende Punkte geben ein komplementäres Paar. Drei Punkte mit gleichem Abstand geben eine Triade.
Der erste Durchlauf rechnet Ihre Farbe also nach HSL um. Der Farbton ist der Winkel, die Sättigung ist der Abstand der Farbe zu Grau, und die Helligkeit ist der Anteil an Weiß oder Schwarz. Winkel addieren sich in HSL sauber, und deshalb arbeitet jede Harmonie dort statt in Hex.
Der zweite Durchlauf dreht den Farbton. Komplementär addiert 180 Grad. Analog addiert 30 und zieht 30 ab. Triadisch addiert 120 und 240. Komplementär geteilt addiert 150 und 210. Tetradisch addiert 90, 180 und 270. Jedes Ergebnis läuft um den Kreis, ein Ton von 350 plus 30 landet also auf 20 statt auf 380.
Der dritte Durchlauf justiert die Extras. Weil eine reine Drehung zwei Farben auf derselben Helligkeit lassen kann, bietet der Generator zusätzlich eine Fassung mit gestufter Helligkeit an. Sonst verschwimmen ein Banner und sein Akzent auf einem Projektor.
Hier braucht nichts einen Netzaufruf. Die Seite funktioniert daher offline, und sie funktioniert mit einer Markenfarbe, die Sie lieber nicht in ein gehostetes Werkzeug tippen würden.
Warum das Rad entscheidet und nicht das Auge
Das Auge passt sich an. Zwei Farben, die auf einer weißen Seite verschieden wirken, können auf einer dunklen gleich wirken. Die Tonrechnung passt sich nicht an, und genau das ist ihr Beitrag.
Weil die Drehung auf Zahlen läuft, gibt dieselbe Eingabe immer dieselbe Ausgabe. Eine Palette, die Ihnen letzten Monat gefiel, kommt also genau so zurück, wie Sie sie verlassen haben.
Der Kontrast ist der andere Grund. Ein Kontrastverhältnis hängt von der relativen Leuchtdichte ab und nicht vom Ton. Daher können zwei Farben von gegenüberliegenden Seiten des Rads die Regel verfehlen, wenn beide auf ähnlicher Helligkeit sitzen.
Daher der Helligkeitsschritt. Er ist der Hebel, der eine Harmonie repariert, die auf dem Rad richtig und auf der Seite unbrauchbar ist.
Die sechs Harmonien, eine nach der anderen
Komplementär stellt zwei Töne einander gegenüber. Das Paar schreit, was zu einem Call to Action oder einem Preis passt. Allerdings schadet dasselbe Paar als Fließtext auf einem Hintergrund, weil die Kanten an der Berührung flirren.
Analog hält drei Nachbarn innerhalb von etwa 60 Grad. Weil die Töne nah liegen, wirkt der Satz ruhig, und er passt zu einem Diagramm mit mehreren Reihen. Dennoch liefert er Ihnen keinen natürlichen Akzent.
Triadisch nimmt drei Töne mit gleichem Abstand. Das Ergebnis ist lebhaft und ausgewogen zugleich. Trotzdem muss einer der drei meist zum Akzent schrumpfen, sonst wird die Seite zu einer Flagge.
Komplementär geteilt nimmt einen Ton und die zwei Nachbarn seines Gegenübers. Sie behalten also den Schlag eines komplementären Paars mit weniger Spannung. Von den sechs ist es das einfachste für eine Landingpage.
Tetradisch, manchmal quadratisch genannt, nimmt vier Töne mit gleichem Abstand. Tatsächlich braucht es die meiste Disziplin, da zwei der vier den größten Teil der Seite tragen sollten und der Rest klein bleiben sollte.
Monochrom bleibt auf einem Ton und bewegt nur Helligkeit und Sättigung. Besonders für eine Produktoberfläche ist das der sicherste Satz, weil darin nichts um Aufmerksamkeit konkurriert.
Eine Farbe aus einem Foto lesen
Eine Markenfarbe kommt oft als Logo, Screenshot oder Fotografie an und nicht als Code. Die Seite liest also auch eine. Ziehen Sie die Datei hinein, und der Sampler gibt die Töne zurück, die die meisten Pixel abdecken.
Die Auswertung läuft auf einem Canvas in Ihrem eigenen Tab. Weil die Datei den Browser nie verlässt, bleibt eine unveröffentlichte Produktaufnahme unveröffentlicht.
Der Sampler gruppiert ähnliche Pixel, bevor er sie zählt. Sonst liefert die Fotografie eines Blatts vierhundert Grüntöne und nichts Brauchbares. Die Gruppierung hält die Liste kurz genug zum Auswählen.
Von dort greifen dieselben sechs Harmonien. Daher kann die Fotografie eines Schaufensters in einem Schritt ein ganzes Schema ergeben, mit der Schilderfarbe als Basis.
Was herauskommt: die Exportformate
Jeder Satz geht in dem Format hinaus, das Ihr nächster Schritt braucht. Die schlichte Liste der Hex-Codes passt zu einer Nachricht an ein Design. Die CSS Custom Properties passen zu einem Stylesheet, da Variablen der übliche Weg sind, ein Theme zu halten.
Ein Block aus CSS Custom Properties kommt zuerst, weil ein Theme meist in Variablen lebt. Dann ein Tailwind-Block, da eine Theme-Datei dieselben Werte unter eigenen Namen hält. Danach decken SCSS-Variablen und ein JSON-Objekt die übrigen Fälle ab.
Jedes Feld trägt auch seine eigenen Lesungen. Das heißt der Tonwinkel, die Sättigung, die Helligkeit, der Hex-Code und der Kontrast gegen Weiß und gegen Schwarz.
Zuletzt lädt das ganze Schema als JSON-Datei herunter. So übersteht eine Palette eine geleerte Zwischenablage, und sie kann in einem Design-Repository neben den Bildschirmen liegen, aus denen sie kam.
So nutzen Sie den Farbschema Generator
Vier Schritte, und keiner braucht ein Konto.
- 1
Mit einer Farbe starten
Tippen Sie also einen Hex-Code, wählen Sie einen Namen aus der Liste, oder ziehen Sie die Marke auf dem Rad. Jede der drei setzt die Basisfarbe, und der Rest der Seite aktualisiert sich sofort.
- 2
Die Harmonien lesen
Sehen Sie dann die sechs Sätze durch. Jeder zeigt seine Farbfelder mit dem Hex-Code darunter. Weil die Basisfarbe in jedem Satz bleibt, vergleichen Sie sie, ohne die Stelle zu verlieren.
- 3
Die Kontrasttabelle prüfen
Gehen Sie als Nächstes die Paare durch. Ein Paar, das die Regel für Fließtext verfehlt, funktioniert für eine große Überschrift noch, und die Tabelle sagt, was was ist. Sie reparieren das durchgefallene Paar also, bevor es ein Stylesheet erreicht.
- 4
Das Format nehmen, das Sie brauchen
Kopieren Sie zuletzt die CSS-Variablen, den Tailwind-Block, die SCSS-Liste oder die schlichten Hex-Codes. Laden Sie danach das JSON herunter, wenn Sie das ganze Schema in einer Datei wollen.
Warum dieser Farbschema Generator
Fünf Gründe, und jeder handelt von der Farbe statt vom Code.
Sechs Harmonien statt einer
Sie vergleichen also eine Triade mit einer komplementär geteilten, ohne ein zweites Werkzeug zu öffnen. Weil jeder Satz die Basisfarbe teilt, bleibt der Vergleich fair.
Die Mathematik läuft in Ihrem Tab
Daher bleibt eine Markenfarbe unter Sperrfrist auf Ihrem Rechner. Nichts wird hochgeladen, und kein Konto steht zwischen Ihnen und der Ausgabe.
Der Kontrast kommt mit der Palette
Dann sitzen die Zahlen neben den Farben. Sonst wählen Sie hier eine Palette und finden den Fehler drei Wochen später in einem Audit, wenn das Layout schon gebaut ist.
Ein Foto dient als Eingabe
Weil ein Logo oft die einzige Quelle einer Markenfarbe ist, liest der Sampler direkt eines. So sparen Sie den Schritt, in dem Sie einen Hex-Code aus einem JPEG nach Augenmaß raten.
Fünf Exportformate
Zuletzt passt die Ausgabe zu einem Stylesheet, einem Tailwind-Theme, einem SCSS-Build, einem JSON-Fixture oder einer schlichten Liste. Deshalb lässt Sie die Kopiertaste selten von Hand umformatieren.
Eine Palette bekommen, die hält
Sechs Gewohnheiten, die eine ausgelieferte Palette von einer neu gezeichneten trennen.
- Die Basis aus der Marke wählen Starten Sie also mit der Farbe, die Sie behalten müssen. Ein Generator, der die Basis erfindet, gibt Ihnen ein Schema ohne Eigentümer, und der nächste Designer wirft es weg.
- Die Helligkeit vor dem Ausliefern stufen Weil eine reine Tondrehung zwei Farben gleich hell lassen kann, heben oder senken Sie eine davon. Dann trennt sich das Paar auf einem Projektor genauso wie auf Ihrem eigenen Bildschirm.
- Einen einzigen Akzent behalten Lassen Sie in einem triadischen oder tetradischen Satz eine einzige Farbe die Akzente tragen. Sonst konkurriert jede Schaltfläche um dieselbe Aufmerksamkeit, und keine gewinnt.
- Gegen beide Hintergründe prüfen Prüfen Sie jede Textfarbe auf Weiß und auf der dunkelsten Fläche im Satz. Dadurch finden Sie das durchgefallene Paar, bevor ein Leser die Augen zusammenkneifen muss.
- Die Variablen nach der Aufgabe benennen Schreiben Sie also einen Namen wie Markentinte statt Blau Siebenhundert. Da sich ein Hex-Wert ändert und eine Aufgabe nicht, übersteht der Name ein Rebranding.
- Den Satz in Graustufen prüfen Zuletzt nehmen Sie den Ton weg und schauen erneut. Wenn die Seite noch klar liest, trägt die Palette eine echte Rangordnung und keinen Trick der Farbe.
Sechs Wege, auf denen eine erzeugte Palette schiefgeht
Jeder davon sieht auf dem Rad gut aus und tut auf der Seite weh.
Das komplementäre Paar für Fließtext verwenden
Achtung hier. Weil zwei gegenüberliegende Töne an der Berührung flirren, ermüdet kleine Schrift auf diesem Paar das Auge. Nehmen Sie das Paar lieber für eine Schaltfläche oder eine Überschrift.
Annehmen, das Rad kenne Ihre Marke
Eine Drehung gibt Harmonie und keine Bedeutung. Daher kann eine korrekte Triade für eine Bank trotzdem falsch sein, weil das Rad Ihr Briefing nicht lesen kann.
Den ganzen Inhalt vom Ton tragen lassen
Etwa einer von zwölf Männern liest Rot und Grün anders. Lassen Sie also nie den Ton allein einen Fehler oder einen Erfolg markieren. Form, Wortlaut oder Position müssen die Botschaft wiederholen.
Das dunkle Theme vergessen
Ein Satz, der auf Weiß funktioniert, kann auf Fast-Schwarz zusammenbrechen. Daher listet die Kontrasttabelle eine Lesung gegen beide auf statt nur gegen die, die Sie zufällig geprüft haben.
Die Palette über fünf hinaus wachsen lassen
Jede zusätzliche Farbe fügt jedem Bildschirm eine Entscheidung hinzu. Weil ein Leser etwa fünf gleichzeitig im Kopf hält, wird ein Schema aus zehn Farben zu Lärm.
Hex-Codes von Hand in ein Stylesheet einfügen
Kopieren Sie stattdessen die Variablen. Eine vertippte Ziffer ergibt eine Farbe, die fast richtig aussieht, und die ist schwerer zu finden als eine, die offensichtlich falsch aussieht.
Fragen zum Farbschema Generator
Ist dieser Farbschema Generator kostenlos?
Ja. Es gibt kein Konto, kein Limit und keine bezahlte Stufe. Sie bauen also so viele Paletten, wie Sie möchten.
Sendet er meine Farbe irgendwohin?
Nein. Weil das Rad und der Sampler in Ihrem Browser laufen, verlässt die Basisfarbe nie Ihren Rechner. Daher bleibt eine Markenfarbe unter Sperrfrist privat.
Kann ich mit einer einzigen Farbe starten?
Ja. Ein Hex-Code genügt. Dann bauen sich alle sechs Harmonien darum herum, und die Basisfarbe bleibt in jedem Satz gleich.
Kann er eine Farbe aus einem Bild lesen?
Ja. Ziehen Sie ein Foto, ein Logo oder einen Screenshot hinein, und der Sampler gibt die Töne zurück, die die meisten Pixel abdecken. Weil die Auswertung auf einem Canvas in Ihrem Tab läuft, wird die Datei nie hochgeladen.
Welche Harmonien baut er?
Sechs. Komplementär, analog, triadisch, komplementär geteilt, tetradisch und monochrom. Jede behält die Basisfarbe und dreht den Ton um einen festen Winkel.
Prüft er den Kontrast?
Ja. Jedes Paar aus Text und Hintergrund bekommt ein Verhältnis und ein Urteil für normalen Text und für großen Text. Eine Palette, die gut aussieht und schlecht lesbar ist, fällt hier also auf.
Welche Formate kann ich exportieren?
Fünf. Einzelne Hex-Codes, CSS Custom Properties, einen Tailwind-Theme-Block, SCSS-Variablen und eine JSON-Datei. Außerdem legt die Kopiertaste jedes davon mit einem Klick in Ihre Zwischenablage.
Kann ich eine Palette einfügen, die ich schon habe?
Ja. Fügen Sie die Hex-Codes ein, und die Seite nennt die Harmonie, die am besten passt. Das hilft, wenn Sie ein Design erben und es ohne sichtbaren Bruch erweitern wollen.
Ist eine erzeugte Harmonie barrierefrei?
Harmonie und Barrierefreiheit beantworten verschiedene Fragen. Ein komplementäres Paar kann den Kontrast verfehlen, und ein monochromer Satz kann ihn bestehen. Lesen Sie daher die Kontrasttabelle statt das Rad.
Was sind die WCAG-Kontraststufen?
Die Tabelle nennt zwei Schwellen: 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. Alles unter seiner Schwelle fällt durch, und die Zeile sagt das in Worten.
Funktioniert es auf einem Telefon?
Ja. Das Rad schrumpft, die Farbfelder umbrechen und die Kopiertasten liegen unter der Ausgabe. Eine Palette funktioniert also auch vom Telefon aus, wenn Sie nicht am Schreibtisch sind.
Darf ich die Palette kommerziell nutzen?
Ja. Farbwerte tragen keine Lizenz. Die Hex-Codes gehören also Ihnen, und nichts hier verlangt eine Nennung.
Brauche ich ein Konto oder eine Erweiterung?
Nein. Die Seite läuft für sich, ohne Anmeldung und ohne Installation. Sie schließen den Tab also, wenn die Palette fertig ist.
Was ist ein Farbschema Generator?
Es ist eine Seite, die eine Farbe in eine Familie von Farben verwandelt, die zu ihr passen. Kurz gesagt, das Rad macht die Rechnung und Sie behalten die Codes.
Was ist eine Komplementärfarbe?
Die Farbe gegenüber Ihrer auf dem Rad, also eine halbe Drehung entfernt. Weil die beiden am weitesten auseinanderliegen, liest sich ein komplementäres Paar laut. Das passt zu einer Schaltfläche und selten zu einer ganzen Seite.
Wie wählt das Rad einen Winkel?
Jede Harmonie trägt einen festen Satz Drehungen. Zuerst liest das Rad Ihren Basiston, dann geht es diese Winkel weiter und liest erneut. Ein triadischer Satz landet also immer 120 Grad auseinander.
Kann ich eine Farbe als Namen eintippen?
Ja. Namen wie teal, coral oder mitternachtsblau werden neben dem Hex-Code akzeptiert. Daher können Sie mit dem Wort aus dem Briefing starten statt mit einem Code, den Sie nachschlagen mussten.
Was ist ein triadisches Farbschema?
Drei Farben, gleichmäßig über das Rad verteilt, also 120 Grad auseinander. Weil alle drei gleich weit entfernt sind, liest sich ein triadischer Satz ausgewogen. Er braucht außerdem eine Führung, sonst hat das Auge keinen Halt.
Was ist ein komplementär geteiltes Farbschema?
Eine weichere Beziehung zwischen einer Farbe und den zwei Nachbarn ihres Gegenübers. So behalten Sie den Kontrast ohne das Schreien. Das Paar liegt dabei 150 Grad auseinander statt 180.
Wie viele Farben hält jeder Satz?
Zwischen drei und fünf, je nach Harmonie. Da jeder Satz die Basisfarbe behält, bleibt ein Farbfeld fest und der Rest dreht sich.
Was ist der Unterschied zwischen einem Schema und einer Palette?
Das Schema ist die Beziehung, und die Palette ist die Liste der Codes, die daraus hervorgeht. Mit anderen Worten, das Rad wählt das Schema und der Export gibt Ihnen die Palette.
Welches Farbmodell nutzt das Rad?
Farbton, Sättigung und Helligkeit. Weil ein Winkel auf einem Kreis leicht vorstellbar ist, dreht das Rad den Farbton und lässt die anderen zwei in Ruhe, bis ein Schritt sie verlangt.
Was zeigt die Winkelanzeige?
Die Drehung, die jedes Farbfeld von Ihrer Basisfarbe genommen hat. Zum Beispiel plus 180 für ein komplementäres Paar. So sehen Sie, warum zwei Sätze sich unterscheiden, statt es zu raten.
Kann ich eine Palette als CSS-Variablen nutzen?
Ja. Der CSS-Tab schreibt Custom Properties, eine pro Farbfeld. Fügen Sie den Block dann in ein Stylesheet ein, und jedes Farbfeld ist ein Name statt eines Codes.
Garantiert eine Harmonie ein gutes Design?
Nein. Eine Harmonie verspricht nur, dass die Töne sich aufeinander beziehen. Kontrast, Anteil und Bedeutung entscheiden weiterhin, ob die Seite funktioniert. Prüfen Sie daher die Tabelle, bevor Sie sich festlegen.
Kann ich die Palette herunterladen statt sie zu kopieren?
Ja. Die Download-Taste speichert das aktuelle Format als Datei. So reist eine Palette zu einer Kollegin oder in ein Repository, ohne Kopieren und Einfügen.
Braucht es eine schnelle Verbindung?
Nein. Sobald die Seite geladen ist, laufen Rad und Sampler in Ihrem Tab. Eine langsame Leitung bremst daher den ersten Aufruf und danach nichts mehr.
Werkzeuge, die zu diesem passen
Vier Seiten, zu denen dieselbe Arbeit meist führt.
Farbcode-Picker
Lesen Sie dann ein Farbfeld in allen Formaten auf einmal. Weil ein Stylesheet, ein Canvas-Aufruf und ein Design-Token je eine andere Schreibweise wollen, zeigt der Picker sie alle nebeneinander.
Tool öffnen →Bildkonverter
Ändern Sie vor dem Sampeln eines Logos hier sein Format. Eine kleinere Datei fällt schneller in den Sampler, und ein flacher Hintergrund liest sich sauberer als ein komprimierter.
Tool öffnen →SVG-Kompressor
Bei einem Logo als Vektorgrafik entfernt dieser zuerst die Editor-Metadaten. So bleiben die Zeichnung und die Palette in einer kleinen Datei zusammen.
Tool öffnen →CSS-Minifier
Verkleinern Sie danach die Datei, die ausgeliefert wird. Dann kostet die ganze Palette ein paar Bytes statt ein paar Kilobyte.
Tool öffnen →
Eine Palette aus einer einzigen Farbe bauen
Wählen Sie die Basisfarbe, lesen Sie die sechs Harmonien, prüfen Sie die Kontrasttabelle und nehmen Sie das Format, das Sie brauchen. Nichts verlässt Ihren Browser, also bleibt eine Markenfarbe unter Sperrfrist Ihre eigene. Die ganze Arbeit passt in eine Auswahl.