Was ist Monochromatische Palette?

Wählen Sie eine Grundfarbe und erzeugen Sie daraus dunklere Schattierungen und hellere Töne. Legen Sie die Schrittanzahl fest und exportieren Sie als CSS-Variablen, Tailwind-Konfiguration oder kopieren Sie einzelne Hex-/RGB-Werte.

Wähle einen HEX-Wert oder nutze die Farbpipette, lege fest, wie viele Aufhellungen, Töne (mit Grau gemischt) und Abdunklungen du brauchst, und die Seite interpoliert jede Skala im LAB-Raum so, dass die Schritte gleichmäßig aussehen. Jedes Feld zeigt HEX, RGB und HSL mit Ein-Klick-Kopie, und „Alle kopieren“ holt die ganze Skala auf einmal. Du kannst die Ansicht auf nur Aufhellungen, nur Töne oder nur Abdunklungen einschränken oder die gesamte Skala als CSS Custom Properties, als Tailwind-Konfigurations-Snippet, als SCSS-Variablen, als JSON-Design-Tokens oder als PNG-Farbtafel exportieren.

Anleitung

1. Wähle eine Basisfarbe mit dem Farbwähler, gib einen Hex-Code ein oder hol dir die dominante Farbe direkt aus einem Logo oder Foto mit Aus Bild.
2. Stelle ein, wie viele Aufhellungen, Töne (Mischung mit Grau) und Abdunklungen du möchtest, und schränke die Ansicht bei Bedarf mit dem Filter „Anzeigen“ ein.
3. Kopiere einzelne Farbwerte, tippe auf „Alle kopieren“, um alle HEX-Werte auf einmal zu holen, oder exportiere die gesamte Palette als CSS-Benutzereigenschaften, Tailwind-Konfigurationsobjekt, SCSS-Variablen, JSON-Design-Tokens oder Bild-Farbmuster.

Wann verwenden

• Ein UI-Designsystem aufbauen, das neun konsistente Stufen der Markenfarbe für Komponenten braucht.
• Eine Datenvisualisierung gestalten, bei der jede Reihe aus derselben Farbnuance kommen muss (Heatmaps, sequentielle Balken).
• Text- und Hintergrundpaarungen wählen: -100 als Hintergrund mit -900 als Text bleibt fast immer im sicheren Kontrastbereich.

Ergebnis

Sie erstellen ein Dashboard und benötigen eine blaue Palette für die Datenvisualisierung. Sie wählen #3B82F6 als Grundfarbe und generieren 9 Schritte von fast Weiß bis fast Schwarz. Sie exportieren als CSS-Variablen und verwenden --color-blue-100 bis --color-blue-900 in Ihren Diagrammen.

Häufige Fragen

Was ist eine monochromatische Palette eigentlich?

Eine Sammlung von Farben mit demselben Farbton, die sich nur in Sättigung und Helligkeit unterscheiden. Das Ergebnis wirkt wie eine einzige Farbfamilie (zum Beispiel verschiedene Helligkeiten desselben Blaus) und vermeidet das Rauschen, das durch das Mischen unterschiedlicher Töne entsteht.

Wie viele Stufen sollte ich erzeugen?

Im UI sind neun Stufen Standard (Tailwind, Material und IBM Carbon nutzen 50-900-Skalen). Für Datenvisualisierung reichen 5-7 Stufen meist aus. Ab elf Stufen sieht es wie ein Verlauf aus und benachbarte Schritte werden kaum noch unterscheidbar.

Welches Exportformat ist sinnvoll?

CSS-Variablen passen in jedes Stylesheet. Das Tailwind-Snippet kommt in theme.extend.colors und ermöglicht Utilities wie bg-brand-500. SCSS liefert dir sowohl $brand-500-Variablen als auch eine Sass-Map. JSON exportiert die Skala als strukturierte Design-Tokens für ein Style Dictionary. Die PNG-Übersicht eignet sich zum Teilen in Figma oder im Markenleitfaden.

Warum sehen die hellsten Stufen so verwaschen aus?

Bei sehr hoher Helligkeit nimmt das Auge jede gesättigte Farbe als nahezu weiß wahr. Wenn -100 sich nicht von Weiß unterscheidet, reduziere die Anzahl heller Schritte oder bringe die Helligkeitsobergrenze näher an die Basisfarbe; dann werden benachbarte Stufen wieder unterscheidbar.

Sind die erzeugten Farben barrierefrei?

Das prüfst du jetzt direkt hier. Schalte das WCAG-Kontrast-Abzeichen ein, und jedes Feld zeigt, ob schwarzer oder weißer Text darauf AA oder AAA erreicht; die Farbsehen-Vorschau färbt die Skala so, wie sie jemand mit Deuteranopie, Protanopie oder Tritanopie sieht. Faustregel: Kombiniere eine -100/-200-Stufe mit einer -700/-800-Stufe, dann bestehst du meist WCAG AA.

Ähnliche Tools