Petrol-Verlauf: Codes von der Lagune bis zur Tiefsee

Ein Petrol-Verlauf läuft zwischen blaugrünen Tönen: blasses Aqua am hellen Ende, ein klares mittleres Petrol in der Mitte und ein dunkles, tintiges Grünblau unten. Weil Petrol auf halbem Weg zwischen Blau und Grün liegt, mischt es sich leicht in beide Richtungen und wird fast nie matschig. Die Codes unten folgen ihm nach Tiefe, von der sonnigen Lagune bis zur Tiefsee, mit Hinweisen zu Akzenten, CSS und Schrift für jede Stufe.

Eine Petrol-Leiter, um jeden Verlauf zu bauen

Die meisten guten Petrol-Verläufe sind zwei bis vier Stufen dieser Leiter. Wähle Nachbarn für eine sanfte Mischung oder überspringe drei Sprossen für Dramatik. Die Namen unten werden im Rest des Artikels verwendet.

Helle Petrol-Verläufe: Lagune und seichtes Wasser

Helles Petrol ist sauber, frisch und leise heiter. Es passt zu Wellness, Pools und Bademode, Zahn- und Gesundheitspraxen und jedem Produkt, das hygienisch wirken will, ohne die Kälte von reinem Blau. Führe es zu Weiß oder zu einem blassen Mint, damit es sanft bleibt.

Mittlere Petrol-Verläufe: Riff und Jade

Die Mitte der Skala ist Petrol in seiner selbstsichersten Form. Diese funktionieren gut für Apps, Fintech-Dashboards, Nachhaltigkeitsmarken und Bildung, weil sie zugleich vertrauenswürdig (Blau) und lebendig (Grün) wirken. Die Neigung zu Smaragd macht es natürlich, die Neigung zu Blau technisch.

Dunkle Petrol-Verläufe: die Tiefsee

Am dunklen Ende wird Petrol fast schwarz mit einem kühlen grünen Hauch. Das ist das anspruchsvollste Petrol: Kanzleien, Spirituosen, Hotels, Architektur, Abendevents. Es ergibt auch einen großartigen Grund für einen leuchtenden Akzent, weil nichts daran konkurriert. Dunkle Mischungen zeigen in komprimierten Exporten Banding, etwas Korn hilft, siehe Gradient Banding.

Warme Akzente für einen Petrol-Verlauf

Das Gegenstück von Petrol im Farbkreis ist ein warmes Rotorange, daher bringen Koralle, Pfirsich, Aprikose und Kupfer es zum Klingen. Halte die warme Farbe aus der Mischung selbst heraus: Ein Verlauf von Petrol zu Koralle läuft in der Mitte durch ein stumpfes Grau. Nutze den Akzent stattdessen für einen Button, eine Überschrift oder eine kleine Form. Komplementärfarben erklärt den Sog, und Korallenverläufe hat Codes für die andere Seite.

Beachte das dritte Farbfeld: Sehr blasse Töne von Gegenspielern mischen sich problemlos, weil wenig Sättigung zu verlieren ist. Das ist ein nützlicher Trick für sanfte Verpackungen und Hochzeitspapeterie.

Einen Petrol-Verlauf für deine Marke wählen

Petrol ist bei Gesundheits-, Finanz- und Nachhaltigkeitsmarken beliebt, der Farbton allein hebt dich also nicht ab. Was es tut, sind die Tiefe, die du wählst, der Akzent, den du dazu paarst, und die Fläche. Beginne bei der Aufgabe, die das Design erfüllen muss.

Petrol-Verlauf in CSS für eine Dunkelmodus-Oberfläche

Tiefes Petrol ist eine schöne Alternative zu Schwarz oder Marine für eine dunkle Oberfläche. Es wirkt weicher als reines Schwarz und gibt blasser Schrift trotzdem reichlich Kontrast. Hier ist ein Hintergrund für eine App-Hülle mit weichem Glühen hinter dem oberen Seitenrand. Mehr zum Ansatz in Dark-Mode-Design.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Lesbarer Text auf Petrol

Mittleres Petrol täuscht. #14b8a6 wirkt stark genug für weiße Schrift, misst aber etwa 2,5 zu 1, ein klarer Fehlschlag. Weiß braucht Seetang (#0f766e, etwa 5,5 zu 1) oder dunkler. Auf allem ab Aqua aufwärts nutze die Abgrund-Farbe #042f2e als Tinte: Sie hält den Text in der Petrol-Familie und ist gut lesbar.

Dieser letzte Punkt zählt mehr, als es aussieht. Ein Verlauf, der von einem Post zu einer Story zugeschnitten wird, verschiebt das Licht an die falsche Stelle. In Gradiently wird ein Mark in jeder Größe gerendert, und der Designer kann die anderen Größen für dich erstellen, sodass ein Petrol-Look im Feed, in der Story und im Website-Header ausgewogen bleibt.