# Monochromatisches Farbschema: ein Farbton, eine ganze Identität

[Canonical HTML page](https://gradiently.design/de/guide/monochromatic-color-scheme)

Ein einziger Farbton klingt einschränkend, bis du siehst, wie viel Spielraum in ihm steckt. Richtig aufgebaut deckt eine Farbe Hintergründe, Text, Buttons und Verläufe ab und wirkt unverwechselbarer als ein Regenbogen.

## The short version

- Ein monochromatisches Farbschema nutzt einen einzigen Farbton in verschiedenen Helligkeiten und Sättigungen, aufgebaut aus Aufhellungen, Abdunklungen und Trübungen.
- Eine Aufhellung ist ein Farbton mit Weiß gemischt, eine Abdunklung ein Farbton mit Schwarz und eine Trübung ein Farbton mit Grau.
- Eine brauchbare monochromatische Skala hat rund neun oder zehn Stufen von fast Weiß bis fast Schwarz, gleichmäßig nach wahrgenommener Helligkeit verteilt.
- Eine leichte Verschiebung des Farbtons zum hellen und dunklen Ende hin verhindert, dass eine monochromatische Palette leblos wirkt.
- Monochromatische Paletten ergeben ruhige, stimmige Verläufe, doch langsame Übergänge in einem Farbton neigen zu Banding und profitieren von feiner Körnung.

Ein **monochromatisches Farbschema** nutzt einen Farbton und sonst nichts, variiert in Helligkeit und Sättigung. Denk an Marineblau, Kobalt, Himmelblau und Eisblau: alles Blau, klar verwandt und mit genug Kontrast untereinander für Hintergründe, Text und Akzente. Weil jede Farbe denselben Farbton teilt, wirkt eine monochromatische Palette immer geschlossen. Die Arbeit liegt darin, innerhalb dieses einen Farbtons genug Spielraum aufzubauen.

Dieser Ratgeber zeigt die drei Arten, einen Farbton zu variieren, wie du eine Skala baust, mit der du wirklich gestalten kannst, und wie Monochromie in Verläufen funktioniert. Den größeren Zusammenhang findest du unter [Grundlagen der Farbtheorie](https://gradiently.design/de/guide/color-theory-basics).

## Aufhellungen, Abdunklungen und Trübungen

Jede Farbe einer monochromatischen Palette entsteht durch einen von drei Schritten. Eine **Aufhellung** mischt Weiß hinzu und macht die Farbe heller und weicher. Eine **Abdunklung** mischt Schwarz hinzu und macht sie tiefer. Eine **Trübung** mischt Grau hinzu und macht sie leiser, ohne ihre Helligkeit stark zu ändern.

- Aufhellungen: Richtung Weiß: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Abdunklungen: Richtung Schwarz: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Trübungen: Richtung Grau: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Ein Blau, drei Richtungen. Die meisten monochromatischen Paletten nutzen alle drei.

## So baust du eine monochromatische Palette

Eine Handvoll zufälliger Aufhellungen ist noch keine Palette. Was du brauchst, ist eine Skala: eine Folge von Stufen von fast Weiß bis fast Schwarz, so gleichmäßig verteilt, dass sich jede Stufe so deutlich von ihrer Nachbarin unterscheidet wie die vorige. Neun bis elf Stufen sind üblich, und so arbeiten die meisten Designsysteme.

- Petrol 50: #f0fdfa
- Petrol 100: #ccfbf1
- Petrol 200: #99f6e4
- Petrol 300: #5eead4
- Petrol 400: #2dd4bf
- Petrol 500: #14b8a6
- Petrol 600: #0d9488
- Petrol 700: #0f766e
- Petrol 800: #115e59
- Petrol 900: #134e4a

Eine zehnstufige Petrol-Skala. Helle Stufen für Hintergründe, mittlere für Farbe, dunkle für Text.

1. **Den Kernfarbton wählen** Nimm die Version der Farbe, die dir in voller Stärke am besten gefällt. Sie wird die Mitte der Skala.
2. **Die Enden festlegen** Wähl ein fast Weiß mit einem Hauch des Farbtons und ein fast Schwarz mit einem Hauch des Farbtons. Vermeide reines Weiß und reines Schwarz; sie wirken losgelöst.
3. **Die Stufen nach Helligkeit füllen** Verteile die Stufen danach, wie hell sie wirken, nicht nach gleichen Hex- oder HSL-Werten. Wahrnehmungsbasierte Farbräume wie OKLCH machen das leicht; siehe [OKLCH-Verläufe](https://gradiently.design/de/guide/css-gradient-oklch).
4. **Die Sättigung an den Enden senken** Sehr helle und sehr dunkle Stufen sehen leicht gedämpft besser aus. Volle Sättigung an den Extremen wirkt grell oder matschig.
5. **Den Farbton leicht verschieben** Lass das helle Ende etwas wärmer oder kühler werden und das dunkle Ende in die andere Richtung. Das bringt Leben, ohne das Schema zu brechen.

### Warum eine leichte Farbtonverschiebung hilft

Echte Gegenstände werden selten dunkler, indem einfach Schwarz dazukommt: Schatten nehmen kühleres oder wärmeres Licht aus der Umgebung auf. Eine Skala, die nur Schwarz und Weiß beimischt, wirkt im Vergleich flach. Den Farbton über die Skala hinweg um ein paar Grad zu verschieben, ist in Illustration und Designsystemen gängige Praxis.

- Gerade Skala: nur Weiß und Schwarz: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Verschoben: hell Himmel, dunkel Indigo: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Zwei fünfstufige Blau-Skalen um denselben Kern, `#2563eb`. Die zweite driftet am hellen Ende zu Himmelblau und am dunklen zu Indigo, und wirkt dadurch beleuchtet statt gemischt.

## Eine ganze Identität mit einem Farbton

Eine monochromatische Marke kann überraschend unverwechselbar sein, weil sie auf eine Weise diszipliniert ist, wie es die meisten Marken nicht sind. Der Trick: Gib jeder Stufe der Skala eine Aufgabe und bleib dabei.

| Stufe der Skala | Aufgabe |
| --- | --- |
| 50 bis 100 | Seiten- und Kartenhintergründe |
| 200 bis 300 | Rahmen, Trennlinien, leise Flächen |
| 400 bis 600 | Markenfarbe, Buttons, Illustration |
| 700 bis 800 | Überschriften, Links, kräftige Flächen |
| 900 und dunkler | Fließtext, Hintergründe im Dark Mode |

Rollen für eine monochromatische Skala. Text und Hintergrund kommen von entgegengesetzten Enden, denn dort liegt der Kontrast.

Kombiniere Text und Hintergrund immer von entgegengesetzten Enden der Skala. Zwei mittlere Stufen sehen als Farbfelder schön aus und scheitern als Text; prüfe das mit den Richtlinien unter [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility). Halte die Skala mit der Rolle jeder Stufe in deinem [Markenkit](https://gradiently.design/de/guide/brand-kit) fest, damit alle dieselben Werte nutzen.

Ein redaktioneller Hochformat-Post mit Serifen-Überschrift auf einem weichen, einfarbigen Hintergrund

Ein ruhiges Feld aus einer Farbfamilie unter redaktioneller Schrift.

Ein breiter E-Mail-Header mit Überschrift auf einem ruhigen, einfarbigen Hintergrund

Derselbe Look, übertragen auf einen E-Mail-Header.

Das Einzige, was einer monochromatischen Identität fehlt, ist ein offensichtlicher Akzent. Wenn in deinen Designs ein Button oder ein Preis herausspringen soll, erlaube eine Farbe außerhalb des Farbtons und setz sie sparsam ein. Damit bewegst du dich in Richtung einer [analogen Palette](https://gradiently.design/de/guide/analogous-colors) oder einer Monochromie mit Akzent, beides völlig in Ordnung.

## Monochromatische Farbverläufe

Verläufe in einem Farbton gehören zu den elegantesten, die du machen kannst: Sie erinnern an Licht, das über ein einziges Material fällt. Sie werden nie matschig, weil es keinen zweiten Farbton gibt, mit dem sie kämpfen.

- Mitternachtsblau: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rosé: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Salbei: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Sand: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Violettes Leuchten: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Graphit (ganz ohne Farbton): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Sechs Verläufe in einem Farbton. Jeder bewegt sich nur in der Helligkeit und ein wenig in der Sättigung.

> **Achte auf Banding** Weil sich ein monochromatischer Verlauf langsam verändert, hat er weniger Farbstufen, die er über den Bildschirm verteilen kann, und neigt zu sichtbaren Streifen, besonders in dunklen Blau- und Grautönen. Eine feine Körnungsebene behebt das; siehe [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding).

## FAQ

### Was ist ein monochromatisches Farbschema?

Ein monochromatisches Farbschema nutzt einen einzigen Farbton in einer Reihe von Aufhellungen, Abdunklungen und Trübungen, von sehr hell bis sehr dunkel.

### Was ist der Unterschied zwischen Aufhellung, Abdunklung und Trübung?

Eine Aufhellung ist ein Farbton mit Weiß gemischt, eine Abdunklung mit Schwarz und eine Trübung mit Grau.

### Ist Schwarz-Weiß ein monochromatisches Schema?

Streng genommen sind Schwarz, Weiß und Grau unbunt, haben also keinen Farbton. Im Alltag nennt man sie oft monochrom, und sie folgen denselben Prinzipien.

### Wie viele Farben sollte eine monochromatische Palette haben?

Rund neun bis elf Stufen von fast Weiß bis fast Schwarz geben genug Spielraum für Hintergründe, Text, Rahmen und Markenfarbe.

### Kann eine Marke nur eine Farbe nutzen?

Ja, wenn die Palette die volle Helligkeitsspanne abdeckt und jede Stufe eine klare Rolle hat. Viele einfarbige Marken ergänzen einen kleinen Akzent für Handlungsaufforderungen.