Was ist Farbschema-Ersteller?

Der Farbschema-Ersteller generiert auf Basis einer einzigen Ausgangsfarbe vollständige Farbpaletten nach Farbtheorieregeln. Wählen Sie monochromatische, komplementäre, geteilt-komplementäre, doppelt geteilte, triadische, tetradische oder analoge Schemata und passen Sie jedes Muster fein ab. Kopieren Sie einen Teilen-Link, exportieren Sie als CSS-Variablen oder Tailwind-Konfiguration oder kopieren Sie die Hex-Codes.

Wähle einen beliebigen Basis-Hex, und der Generator führt die klassischen Drehungen auf dem Farbkreis aus: 180 Grad für Komplementär, 150 und 210 Grad für die beiden Flanken des geteilt-komplementären Schemas, 120 für Triadisch, 90 für Tetradisch und kleine Schritte auf beide Seiten für Analog. Schatten und Tints behalten denselben Farbton und verschieben nur die Helligkeit im HSL-Raum in festen Schritten, sodass jede Farbe eine saubere fünfstufige Rampe bekommt. Jeder Swatch lässt sich als HEX, rgb(), hsl() oder oklch() kopieren; die Kontrasttafel bewertet jede Farbe gegenüber Weiß und Schwarz nach WCAG AA und AAA, und die Sehweise-Vorschau rendert die ganze Palette mit einem Klick durch Filter für Protanopie, Deuteranopie oder Tritanopie neu. Kopieren Sie einen Teilen-Link, um eine Palette zu speichern oder ohne Konto an Teammitglieder weiterzugeben.

Anleitung

1. Wählen Sie eine Ausgangsfarbe über die Farbauswahl oder geben Sie einen Hex-Code ein.
2. Wählen Sie einen Schematyp (monochrom, komplementär, geteilt-komplementär, doppelt geteilt, triadisch, analog, tetradisch), um die Palette zu generieren.
3. Kopieren Sie einzelne Hex-Codes, exportieren Sie die vollständige Palette als CSS-Variablen oder laden Sie sie als Bildmuster herunter.

Wann verwenden

• Aus einem einzigen Marken-Hex eine komplette Palette für eine neue Website oder App ableiten.
• Vor dem Drucken von Werbeartikeln prüfen, ob die Logofarbe eine saubere Komplementärfarbe hat.
• CSS-Variablen erzeugen, ohne Figma oder ein anderes Designtool zu öffnen.

Ergebnis

Ein Webentwickler wählt das Primärblau seiner Marke (#3B82F6), generiert ein triadisches Schema mit komplementären Orange- und Grüntönen und exportiert die Palette als CSS Custom Properties für sein Design-System.

Häufige Fragen

Was unterscheidet ein triadisches von einem tetradischen Schema?

Triadisch nutzt drei Farben im Abstand von 120 Grad auf dem Farbkreis und ergibt ein ausgewogenes Trio. Tetradisch verwendet vier Farben als Rechteck (zwei Komplementärpaare): mehr Abwechslung, aber visuell schwerer zu balancieren.

Wann nutze ich Schattierungen, wann Tönungen?

Schattierungen (dunklere Varianten) eignen sich für Text, Rahmen und Hover-Zustände auf hellen Oberflächen. Tönungen (hellere Varianten) sind gut für Hintergründe, deaktivierte Zustände und dezente Highlights. Die meisten Designsysteme brauchen beide Rampen.

Berücksichtigt der Generator Barrierefreiheits-Kontrast?

Ja — die Kontrasttafel unter der Palette zeigt für jede Farbe das WCAG-Verhältnis gegenüber Weiß und Schwarz mit Bestanden- bzw. Fail-Marken für AA und AAA. Die 4.5:1-Schwelle für normalen Text deckt die meisten UI-Fälle ab. Über die Sehweise-Vorschau lassen sich zusätzlich Protanopie, Deuteranopie und Tritanopie zuschalten, um zu sehen, wie die Palette für Menschen mit Farbsehschwäche wirkt.

Warum wirkt ein analoges Schema ruhiger als ein komplementäres?

Analoge Farben liegen auf dem Kreis nebeneinander und teilen sich eine Farbfamilie, das senkt die visuelle Spannung. Komplementäre Farben stehen sich gegenüber, der Kontrast ist maximal und energischer, ermüdet aber bei großen Flächen die Augen.

Kann ich nach Tailwind exportieren oder nur CSS-Variablen?

Beides geht. CSS-Variablen lassen sich direkt unter :root einfügen. Das Tailwind-Format verpackt die Hex-Werte in einem theme.extend.colors-Objekt, das in tailwind.config.js eingefügt wird.

Ähnliche Tools