Tool · Farbe · Free

Farbsystem-Generator.

Leg deine Marken-Farben an — der Generator baut um jede eine 11-stufige Palette (50–950), berechnet die WCAG-AA-Kontraste, zeigt dir Farbharmonien für stimmige Kombinationen und liefert pro Farbe HEX, RGB, HSL und CMYK-Richtwerte. Export als CSS-Variables, Tailwind, JSON oder SCSS. Designer-Brot, in Sekunden.

Marken-/Hauptfarben Picker + Token-Name; beliebig viele

CMYK, RAL & Pantone sind Richtwerte zur Orientierung (Nearest-Match im Lab-Raum). Echte Druckfarbe hängt von Papier und Maschine ab — für 100 % verbindliche Farbe gilt der physische Farbfächer. Die Papier-Auswahl zeigt eine simulierte Druck-Anmutung (Näherung für Tonwertzuwachs/Papierweiß), kein echtes ICC.

Deine Marken-Palette · im Zusammenspiel

Bewertung deiner eingegebenen Farben zusammen: Stimmen die Abstände? Verschmilzt etwas? Fehlt ein Neutral oder ein Text-Anker? Vorschläge kannst du mit einem Klick übernehmen.

Harmonie-Vorschläge · aus deiner Primärfarbe

Automatisch aus Farbe #1 generiert — Ergänzungs-Ideen, keine Pflicht. Jedes Schema hat eine Rolle pro Ton: eine dominante Basis, ein gedämpfter Sekundär-Ton, ein satter Akzent sowie Text- und Flächen-Neutrals. So entsteht eine nutzbare Palette statt fünf gleich lauter Volltöne.

WCAG-Kontrast · Primary-Palette

Welche Stufen kannst du als Text auf welchem Hintergrund verwenden? AA = barrierefrei für normalen Text (4.5:1), AA Large = für 18pt+ Text (3:1).

Stufe Hex auf Schwarz auf Weiß

Lesbare Kombinationen · WCAG

Welche deiner Farben funktioniert als Text (Zeile) auf welcher als Hintergrund (Spalte)? Jede Zelle zeigt das echte Sample plus Kontrast — grün = AA (lesbar), gelb = nur große Schrift, rot = durchgefallen. Schwarz & Weiß sind als Referenz dabei.

Export · alle Farben


            

        


        

            

                Brand-Palette für deine Marke?
                
Ich entwickle das komplette Farbsystem.

                

                    Primary, Secondary, Akzent, neutrale Greys + Light-/Dark-Mode-Mappings + WCAG-Compliance + Token-File für Figma & Code. Inklusive Anwendungsbeispielen.
                

                Zur CI-Entwicklung →