Monochromer Farbverlauf: ein Farbton, viele Abstufungen

Ein monochromer Farbverlauf mischt einen Farbton durch seine eigenen Abstufungen, von tief bis hell, ohne eine zweite Farbe ins Spiel zu bringen. Schwarz zu Weiß über Grau ist die reinste Version; ein Marine, das in blasses Blau aufsteigt, oder eine Aubergine, die sich in Flieder hebt, sind ebenfalls monochrome Verläufe. Sie wirken ruhig und hochwertig, weil nichts konkurriert, und aus demselben Grund zeigen sie jeden Fehler: Streifen, trübe Mittelpunkte und einen Farbton, der auf halbem Weg driftet. Die Codes und das CSS unten vermeiden alle drei.

Monochromer Verlauf oder monochromes Farbschema

Die beiden Begriffe hängen zusammen und werden oft verwechselt. Ein monochromes Farbschema ist eine Palette: mehrere Tints, Töne und Shades eines Farbtons, verteilt über ein ganzes Design. Ein monochromer Verlauf ist eine einzelne Mischung innerhalb dieser Idee. Du kannst einen monochromen Verlauf in einem Design nutzen, dessen Palette gar nicht monochrom ist, etwa einen tiefblauen Hintergrund unter oranger Schrift.

Codes für monochrome Verläufe zum Kopieren

Jeder davon behält einen einzigen Farbton und ändert nur seine Helligkeit und ein wenig seine Sättigung. Dunklere Stopps sind etwas gesättigter als hellere, so verhält sich echte Farbe im Schatten, und deshalb wirken diese natürlich.

Für das dunkle Ende dieser Familie allein siehe schwarze Verläufe und graue Verläufe. Wie die Abstufungen zusammenhängen, steht in Tints, Töne und Shades.

So erstellst du einen monochromen Verlauf in CSS

Der einfachste Weg, einen Farbton zu halten, ist, die Stopps in oklch zu schreiben und nur die erste Zahl, die Helligkeit, zu ändern. Der Farbwinkel bleibt fest, die Farbe kann also nicht wandern, und oklch verteilt die Helligkeit gleichmäßig, sodass die Mischung in gleichmäßigem Tempo ansteigt. OKLCH erklärt behandelt das Format.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Farbton wählen

   Wähle eine Farbe und finde ihren Farbwinkel. Ein Blau liegt bei etwa 260, ein Grün bei etwa 145, ein Rot bei etwa 25.

2. 2

   Dunkelsten und hellsten Stopp setzen

   Halte das dunkle Ende über reinem Schwarz und das helle unter reinem Weiß, außer du willst eine harte Kante. Eine Helligkeit von 0,15 bis 0,9 ist ein angenehmer Bereich.

3. 3

   Den mittleren Stopp bewusst platzieren

   Verschiebe ihn zu dem Ende, das dominieren soll. Ein mittlerer Stopp bei 30 Prozent ergibt einen überwiegend hellen Rahmen; bei 70 Prozent überwiegend dunkel. Verlaufs-Farbstopps zeigt mehr.

4. 4

   Körnung hinzufügen

   Eine schwache Rauschebene über dem Verlauf verbirgt Streifen und gibt ihm ein Materialgefühl.

Warum dunkle monochrome Verläufe Streifen bekommen

Die meisten Bildschirme zeigen 256 Stufen pro Kanal. Ein Verlauf von Schwarz #000000 zu dunklem Grau #282828 hat nur 40 unterscheidbare Schritte. Dehnst du ihn über einen 1920 Pixel breiten Hero, ist jeder Schritt ein 48 Pixel breiter Streifen, den das Auge im Dunkeln leicht erkennt. Mehrfarbige Verläufe verbergen das, weil sich die Kanäle zu unterschiedlichen Zeitpunkten ändern; ein monochromer Verlauf ändert alle drei gemeinsam, sodass die Streifen übereinanderliegen.

Streifenbildung bei Verläufen und körnige Verläufe gehen ausführlich auf die Lösung ein, mit Code für eine SVG-Rauschebene.

Wo monochrome Verläufe wirken

Weil sie eine Farbe tragen, lassen monochrome Verläufe Schrift und Fotografie führen. Sie passen zu Luxus-Produkteinführungen, Architekturbüros, Musikveröffentlichungen und jeder Marke, deren Identität eine einzelne Farbe ist. Setze die Worte im hellsten oder dunkelsten Ende desselben Farbtons oder in Weiß oder Schwarz, und das Design wirkt wie eine einzige selbstbewusste Entscheidung.

Wenn du einen Akzent brauchst, nimm ihn von außerhalb des Farbtons und nutze ihn einmal: ein einzelnes oranges Datum auf einem Marineverlauf oder ein roter Preis auf Graphit. Der Verlauf bleibt monochrom, und der Akzent bekommt die ganze Aufmerksamkeit, weil nichts anderes darum konkurriert.

Ein monochromer Hintergrund in Gradiently kann sich auch bewegen: Ein Mark rendert sein Licht live, sodass ein einfarbiger Verlauf langsam hinter den Worten driften kann, und mit Pro wird er als nahtlose Schleife in jeder Größe exportiert, die du gestaltest.