Moody Verläufe: dunkle, satte Farbcodes mit Atmosphäre

Ein Moody Verlauf ist eine dunkle Mischung, die sich wie ein schwach beleuchteter Raum verhält: Der größte Teil des Bildes liegt im Schatten, ein Bereich fängt das Licht, und die Farben werden zurückgehalten statt hochgedreht. Das Rezept lässt sich einfach beschreiben. Beginn mit einem getönten Fast Schwarz, füg ein oder zwei gedämpfte Mitteltöne hinzu und lass ein einzelnes Licht, oft warm vor einem kühlen Grund, die Fläche zum Leben erwecken. Unten findest du zwölf Codes zum Kopieren, dann wie du eigene baust und Worte darauf lesbar hältst.

Was einen Verlauf moody macht und nicht nur dunkel

Viele dunkle Verläufe wirken flach. Marineblau, das in Schwarz ausläuft, ist dunkel, hat aber kein Wetter. Stimmung entsteht aus ein paar Entscheidungen, die Fotografen und Coloristen beim Film instinktiv treffen, und du kannst sie bewusst treffen.

• Low Key. Etwa drei Viertel des Bildes sind Schatten. Licht ist die Ausnahme, nicht die Regel.
• Eine Lichtquelle. Licht fällt aus einer Ecke oder von einer Kante ein, sodass das Auge weiß, wo Fenster oder Lampe sind.
• Zurückgehaltene Farbe. Mitteltöne sind leicht vergraut. Ein staubiges Petrol wirkt stimmungsvoller als ein leuchtendes.
• Farbige Schatten. Der dunkelste Punkt ist Blauschwarz, Grünschwarz oder Ochsenblut, nie #000000.
• Temperaturkontrast. Ein kleines warmes Licht in einer kühlen Szene, oder umgekehrt, erzeugt Spannung.

Zwölf Moody Verlauf Codes

Jeder davon ist ein einzelner CSS Wert, den du in background einfügen kannst. Sie sind grob nach Temperatur gruppiert: zuerst kühl und stürmisch, dann die warmen, lampenbeleuchteten, dann ein paar dazwischen.

Wenn du eher eine klare als eine stürmische Nacht willst, gehen Nachthimmel Verläufe mehr ins Blaue und fügen Sterne hinzu. Für tiefere, glänzendere Farbe mit mehr Sättigung liegen Edelsteinfarben eine Stufe heller als alles hier.

Eine Moody Farbpalette als Ausgangspunkt

Wenn du eigene Verläufe baust, arbeite mit einer Palette statt mit zwei Farben. Fünf reichen: ein Grund, zwei Schattenstufen, ein gedämpfter Mittelton und ein Licht. Das Licht ist die einzige Farbe, die wirklich hell sein darf, und es sollte nur auf einer kleinen Fläche erscheinen.

Warum warmes Licht vor kühlem Schatten so gut funktioniert, erklärt Farbtemperatur. Weitere fertige Sets findest du bei dunklen Farbpaletten.

So machst du einen Moody Verlauf in CSS

1. 1

   Einen getönten Grund setzen

   Wähl ein Fast Schwarz mit Farbton, etwa #0b0d12 für Blauschwarz oder #120806 für warmes Braunschwarz. Nutze es auch als Fallback für background-color.

2. 2

   Den Schattenkörper anlegen

   Leg einen sanften linearen Verlauf zwischen zwei dunkle Stufen desselben Farbtons. Das gibt dem Bild Tiefe, bevor irgendein Licht dazukommt.

3. 3

   Ein Licht platzieren

   Füg in einer Ecke einen radialen Verlauf hinzu, der bei etwa 40 Prozent zu transparent ausläuft. Halte seine Farbe gedämpft und seine Deckkraft deutlich unter voll.

4. 4

   Ein kühles Gegenlicht hinzufügen

   Optional ein zweiter, größerer und schwächerer Radialverlauf in der gegenüberliegenden Ecke, aus der kühlen Familie. Er verhindert, dass die Schattenseite tot wirkt.

5. 5

   Mit Körnung abschließen

   Eine feine Rauschebene mit geringer Deckkraft versteckt Banding und lässt die Fläche wie Film wirken. Verläufe mit Körnung hat den Code.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Worte auf einen Moody Hintergrund setzen

Helle Schrift auf dunklem Grund liest sich gut, bis sie den einen hellen Lichtfleck kreuzt, an dem du so lange gearbeitet hast. Plane die Headline auf der Schattenseite und halte das Licht von den Worten fern, statt es dahinter zu legen. Ein weiches gebrochenes Weiß wie #ece6dc sitzt angenehmer auf einem Moody Grund als reines Weiß, das hart wirken kann.

Die rechte Version ist das, was ein Mark von Gradiently von selbst macht: Er weiß, wo die Worte stehen, vertieft die Farbe nahe den Buchstaben und wählt Zeile für Zeile helle oder dunkle Schrift aus seiner eigenen Palette, ohne zusätzliche Kästen oder Schatten. Text auf einem Verlauf behandelt die Variante von Hand.

Wo Moody Verläufe am besten wirken

Sie passen zu Nacht, Musik, Drinks, Film, Duft und Quiet Luxury. Zu einem Kindergeburtstag oder einem Sommerschlussverkauf passen sie weit weniger. Für eine ganze Oberfläche in diesem Register behandelt dunkle Verlaufshintergründe die zusätzliche Sorgfalt, die Bildschirme brauchen.

Wenn du Ebenen lieber nicht von Hand abstimmen willst: Im Markt gibt es lebendige Marks genau in diesem Register, auffindbar mit Begriffen wie „tiefes Petrol“ oder „Ochsenblut“. Mit jedem nicht gesicherten Mark kannst du kostenlos gestalten, und wenn du dir einen sicherst, trägt kein anderes Plakat dieselbe Atmosphäre.