Softonic

Monochromatischer Palettengenerator

Schritt 1 / 3 Skala erstellen

Farben und Paletten werden in diesem Browser erzeugt. Im Schrittmodus bleibt das Projekt bis zu 30 Minuten im Sitzungsspeicher dieses Tabs; kein Farbwert gelangt an den Server oder in die URL.

Monochromatische Skala erstellen

Gib eine Farbe ein und wähle Transformation, Interpolationsfarbraum und Anzahl der Abstufungen.

Zulässig sind #RGB, #RRGGBB, rgb(0–255) und hsl() mit Prozentwerten. Alphakanäle werden nicht unterstützt.

Wird in Exporten für CSS-Variablen, Tailwind, SCSS und Design-Tokens verwendet.

Wähle eine Basisfarbe und der Generator erstellt eine monochromatische Palette darum: Tönungen (progressiv mit Weiß gemischt für einen helleren Verlauf), Schattierungen (progressiv mit Schwarz gemischt für einen dunkleren Verlauf) und Farbtöne (mit Grau gemischt, um die Sättigung zu reduzieren). Nützlich für Designsysteme, die einen kohärenten Verlauf von einer Markenfarbe benötigen, wie die 50–950 Skala von Tailwind, aber anpassbar, oder um Hover- und aktive Zustände auszuwählen, ohne die Palette zu verlassen.

Wie die Palette generiert wird

  1. 1

    Gib eine Basisfarbe ein

    Nutze #RGB, #RRGGBB, ganzzahlige rgb()-Kanäle oder hsl()-Prozentwerte.

  2. 2

    Wähle den Palettentyp

    Wähle eine vollständige helle und dunkle Skala, Aufhellungen zu Weiß, Abdunklungen zu Schwarz oder Töne zu Neutral.

  3. 3

    Wähle die Schrittanzahl

    5, 9 oder 11 Schritte. Neun verwendet die üblichen 100–900-Bezeichnungen im Material-Stil; 11 ergänzt 50 und 950 für eine Skala im Tailwind-Stil.

  4. 4

    Kopieren oder exportieren

    Kopiere HEX, RGB, HSL oder OkLCH oder exportiere CSS, Tailwind, SCSS und Design Tokens Community Group JSON.

Tönungen vs. Schattierungen vs. Farbtöne

  • Tönung = Basisfarbe + Weiß. Heller, pastelliger. mix(base, #fff, p%) wobei p der Prozentsatz von Weiß ist.
  • Schattierung = Basisfarbe + Schwarz. Dunkler, stimmungsvoller. mix(base, #000, p%).
  • Farbton = Basisfarbe + Grau. Gleiche Helligkeit, geringere Sättigung, gedämpfter.

Die drei Transformationen erzeugen unterschiedliche visuelle Charaktere: Tönungen wirken luftig und optimistisch, Schattierungen wirken bodenständig und ernst, Farbtöne wirken zurückhaltend und raffiniert.

Ein 9-Schritte-Verlauf von einer Basis

Schritt Beschreibung Typische Verwendung
100 Sehr hell Oberflächen, Chip-Hintergründe
200 Hell Deaktivierte Zustände
300 Mittelhell Ränder, Trennlinien
400 Leicht gedämpft Sekundärtext (heller Hintergrund)
500 Basisfarbe Standardmarke, deine Basis
600 Mittel-dunkel Hover-Zustände bei primären Aktionen
700 Dunkel Aktive Zustände, Überschriften
800 Sehr dunkel Starker Text auf hellem Hintergrund
900 Dunkelste Schattierung Text mit maximalem Kontrast

Die Zahlenbezeichnungen orientieren sich an verbreiteten Token-Konventionen; die erzeugten Farben sind keine offiziellen Material- oder Tailwind-Werte.

Warum Monochromatisch für Schnittstellen funktioniert

  • Vertrautheit. Jedes Element sieht unverkennbar verwandt aus.
  • Konsistenz. Ein wiederverwendeter Farbton macht Beziehungen leicht erkennbar, sorgt allein aber noch nicht für eine farbenblindgerechte Oberfläche.
  • Einfachheit. Eine Entscheidung, die Basisfarbe, steuert die gesamte Palette.

Kombination mit Neutralfarben

Eine monochromatische Palette benötigt auch Grautöne. Häufiges Muster:

  • Primärer Verlauf von deiner Markenfarbe (9 Schritte).
  • Neutraler Verlauf von einer entsättigten Version des Primärtons (9 Schritte).
  • Vielleicht eine Akzentfarbe (ein einzelner gut gewählter Schritt für Warnungen und CTAs).

Nutze dies als Ausgangsstruktur, nicht als feste Regel. Wie viele Paletten nötig sind, hängt von Zuständen, Datenvisualisierung, semantischen Farben und Barrierefreiheit des Produkts ab.

Kontrastprüfungen

Für Text auf einem Hintergrund verlangt WCAG 4.5:1 für normalen Text und 3:1 für großen Text. Bezeichnungen wie 100, 500 oder 900 stehen nicht für ein bestimmtes Kontrastverhältnis; das Ergebnis hängt von Grundfarbe, Palettentyp und Interpolationsfarbraum ab.

Überprüfe immer die spezifischen Kombinationen, die du verwenden möchtest, mit einem Kontrastprüfer.

Exportieren in dein Designsystem

Ausgabeformate:

  • CSS-Custom-Properties: --primary-50: #f0f9ff; --primary-100: ...
  • Tailwind-Konfiguration: JS-Objekt bereit zum Einfügen in tailwind.config.js → theme.extend.colors.
  • SCSS-Karte für Sass-Projekte.
  • Design-Tokens JSON in der $type/$value-Struktur der Design Tokens Community Group.

Häufig gestellte Fragen

Aufhellungen bewegen sich bewusst zu Weiß, deshalb kann eine stark gesättigte Basis schnell pastellig werden. Vergleiche HSL und OkLCH, verwende weniger Abstufungen oder wähle eine weniger gesättigte Basisfarbe.

Du kannst HSL oder OkLCH wählen. HSL verändert Helligkeit und Sättigung; OkLCH verändert wahrnehmungsbezogene Helligkeit und Chroma und reduziert das Chroma bei Bedarf, damit das Ergebnis im sRGB-Farbraum bleibt.

In der vollständigen Skala ist die Grundfarbe das mittlere 500-Token. Die Aufhellungsskala endet bei der Basis, die Abdunklungsskala beginnt dort und die Tonskala endet dort. Die Labels versprechen keine bestimmte Helligkeit.

Eine direkte Figma-Integration gibt es nicht. Kopiere einzelne Werte oder nutze CSS-, Tailwind-, SCSS- oder Design-Tokens-JSON-Text als Ausgangspunkt für deinen eigenen Ablauf.

Verwandte Tools

Graffiti-Generator

Erstelle Graffiti-Schrift mit Tag-, Bubble-, Block-, Stencil-, Neon- und Wild-Effekten. Passe Farben an und exportiere PNG oder SVG direkt im Browser.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Favicon-Generator für Initialen und Emojis

Erstellen Sie ein Favicon aus ein oder zwei Initialen oder einem Emoji. Wählen Sie Form und Hintergrundfarbe; bei Initialen können Sie zusätzlich Zeichenfarbe und Schriftstil anpassen.

QR-Code-Generator

Erstellen Sie einen QR-Code lokal im Browser aus URL, Klartext oder einer korrekt formatierten QR-Nutzlast und laden Sie ihn als PNG herunter.

Barcode-Generator

Erstellen Sie im Browser 1D-Barcodes in Code 128, EAN, UPC, ITF-14 und weiteren unterstützten Formaten und laden Sie SVG oder PNG herunter.

Fotoeditor

Browser-basierter Fotoeditor mit Zuschneiden, Drehen, Helligkeit, Kontrast, Sättigung, Filtern, Textüberlagerung und Export nach JPG, PNG oder WebP.