# Monochromer Farbverlauf: ein Farbton, viele Abstufungen [Canonical HTML page](https://gradiently.design/de/guide/monochrome-gradient) Eine Farbe, die sich nur in der Helligkeit bewegt: Das ist der leiseste Verlauf überhaupt und der, der jeden Fehler zeigt. Hier findest du Codes, die funktionieren, das CSS, das den Farbton ehrlich hält, und die Lösung gegen Streifenbildung. ## The short version - Ein monochromer Farbverlauf mischt einen einzelnen Farbton von dunkel zu hell oder läuft über Grautöne von Schwarz zu Weiß. - Ein monochromer Verlauf ist eine einzelne Mischung, während ein monochromes Farbschema eine ganze Palette aus einem Farbton ist. - Stopps in oklch mit festem Farbton zu definieren verhindert, dass ein einfarbiger Verlauf Richtung Grau oder einen anderen Farbton driftet. - Dunkle monochrome Verläufe bekommen die meisten Streifen, weil ein 8-Bit-Bildschirm zwischen fast schwarzen Tönen nur sehr wenige Abstufungen hat. - Eine leichte Körnungsebene über einem monochromen Verlauf verbirgt Streifen und lässt ihn wie eine Oberfläche wirken. 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. Anthrazit zu Silber: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)` Ein Schwarz-Weiß-Verlauf mit den Stopps zum dunklen Ende gedrängt, sodass der größte Teil des Rahmens tief bleibt und das Licht spät kommt. ## Monochromer Verlauf oder monochromes Farbschema Die beiden Begriffe hängen zusammen und werden oft verwechselt. Ein [monochromes Farbschema](https://gradiently.design/de/guide/monochromatic-color-scheme) 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. | Aspekt | Monochromer Verlauf | Monochromes Schema | | --- | --- | --- | | Was es ist | Eine durchgehende Mischung | Ein Set einzelner Farben | | Wo es lebt | Ein Hintergrund, eine Form, ein Button | Eine ganze Marke oder ein Layout | | Anzahl der Farbtöne | Einer | Einer | | Typischer Einsatz | Hero-Hintergründe, Karten, Plakate | Oberflächen, Illustration, Identität | Dasselbe Prinzip, anderer Maßstab. Der Verlauf ist eine Fläche; das Schema ist ein System. ## 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. - Schwarz zu Weiß: `linear-gradient(180deg, #000000 0%, #ffffff 100%)` - Graphit-Spotlight: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)` - Marine zu Himmel: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)` - Kiefer zu Mint: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)` - Ochsenblut zu Blush: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)` - Aubergine zu Flieder: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)` - Umbra zu Honig: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)` - Papier zu Stein: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)` Acht einfarbige Verläufe. Jeder bleibt von Ende zu Ende in seinem eigenen Farbton. Für das dunkle Ende dieser Familie allein siehe [schwarze Verläufe](https://gradiently.design/de/guide/black-gradient) und [graue Verläufe](https://gradiently.design/de/guide/grey-gradient). Wie die Abstufungen zusammenhängen, steht in [Tints, Töne und Shades](https://gradiently.design/de/guide/tints-tones-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](https://gradiently.design/de/guide/oklch-explained) behandelt das Format. ```css .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% ); } ``` Ändere die Farbtonzahl (264), um den ganzen Verlauf auf eine andere Farbe zu verschieben. Die Chroma fällt am hellen Ende, wie im echten Licht. 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. **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. **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](https://gradiently.design/de/guide/gradient-stops) zeigt mehr. 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. ### Streifen - Fast Schwarz zu dunklem Grau über einen ganzen Bildschirm - Starke JPEG-Kompression beim Export - Vollkommen saubere digitale Oberfläche - Lange, kontrastarme Mischung mit wenigen Stopps ### Glatt - Ein größerer Helligkeitsbereich oder eine kürzere Strecke - PNG oder eine hohe Qualitätseinstellung - Eine leichte Körnungsebene darüber - Ein radiales Licht, das sich nahe seiner Mitte schneller ändert [Streifenbildung bei Verläufen](https://gradiently.design/de/guide/gradient-banding) und [körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) 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 quadratisches Albumcover in tiefem Schwarz und Anthrazit mit einem einzelnen Wort in blasser Schrift Ein quadratisches Release-Cover bei 1080×1080, fast nur Schatten, mit Licht, das an einem Rand aufsteigt. Ein breiter Website-Hero für ein Architekturbüro auf einem dunklen einfarbigen Verlauf Ein Website-Hero bei 1920×1080: derselbe ruhige, einfarbige Ansatz über einen deutlich breiteren Rahmen. 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. ## FAQ ### Was ist ein monochromer Farbverlauf? Ein Verlauf, der einen einzelnen Farbton durch seine eigenen Abstufungen von dunkel zu hell mischt oder über Grautöne von Schwarz zu Weiß läuft. ### Ist ein monochromer Verlauf dasselbe wie ein monochromes Farbschema? Nein. Ein monochromes Schema ist eine Palette aus einem Farbton, verteilt über ein Design; ein monochromer Verlauf ist eine durchgehende Mischung eines einzelnen Farbtons. ### Wie erstelle ich einen einfarbigen Verlauf in CSS? Schreibe die Stopps in oklch und ändere nur die Helligkeit, zum Beispiel von `oklch(0.18 0.08 264)` zu `oklch(0.86 0.06 264)`. Der Farbton bleibt fest, die Farbe kann also nicht driften. ### Warum hat mein schwarzer Verlauf Streifen? Dunkle Töne haben auf einem 8-Bit-Bildschirm sehr wenige unterscheidbare Stufen, deshalb zeigt die Mischung Streifen. Füge eine leichte Körnungsebene hinzu, vergrößere den Helligkeitsbereich oder exportiere als PNG. ### Wie lautet der Code für einen Schwarz-Weiß-Verlauf? `linear-gradient(180deg, #000000 0%, #ffffff 100%)` ist die schlichte Version. Für einen satteren Look dränge die Stopps zum dunklen Ende und höre vor reinem Weiß auf.