# Petrol-Verlauf: Codes von der Lagune bis zur Tiefsee [Canonical HTML page](https://gradiently.design/de/guide/teal-gradient) Petrol liegt genau zwischen Blau und Grün, was es ruhig, klug und ungewöhnlich leicht mischbar macht. Steige von der Lagune bis zur Tiefsee hinab, mit Codes für jede Tiefe. ## The short version - Ein Petrol-Verlauf mischt blaugrüne Töne, meist von blassem Aqua bis zu tiefem Grünblau. - Petrol geht sauber in seine Nachbarn über: Cyan, Smaragd, Blau und Marine. - Warme Akzente wie Koralle, Pfirsich und Kupfer liegen Petrol gegenüber und lassen es leuchten, wenn sie außerhalb der Mischung bleiben. - Weißer Text braucht ein Petrol mindestens so tief wie #0f766e, um den Kontrast zu bestehen, hellere Petroltöne brauchen dunkle Schrift. - Sehr dunkles Petrol ergibt einen hervorragenden Dunkelmodus-Grund, weil es weicher wirkt als Schwarz und weniger erwartbar als Marine. 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. - Seichtes Wasser: #ccfbf1 - Lagune: #5eead4 - Aqua: #2dd4bf - Petrol: #14b8a6 - Riff: #0d9488 - Seetang: #0f766e - Tiefes Petrol: #115e59 - Abgrund: #042f2e Acht Petroltöne von hell bis dunkel. Zwei oder drei Nachbarn ergeben eine ruhige Mischung, Hell zu Dunkel ergibt Tiefe. ## 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. - Seichtes Wasser: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)` - Lagune: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)` - Himmel zu Lagune: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)` - Sonnenbeschienener Pool: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)` Blasse Petroltöne, die frisch bleiben. Jeder behält einen fast weißen Stopp, damit dunkler Text einen Platz hat. ## 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. - Riff: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)` - Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)` - Cyan zu Seetang: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)` - Petrol zu Blau: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)` - Dreistufiges Petrol: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)` Mittlere Petroltöne ziehen zu Smaragd oder Blau. Wähle die Richtung danach, wie sich deine Marke anfühlen soll. ## 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](https://gradiently.design/de/guide/gradient-banding). - Abstieg: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)` - Licht von oben: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)` - Tiefes Petrol zu Mitternacht: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)` - Lichtschacht: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)` Dunkle Petroltöne mit einer einzelnen Lichtquelle. Sie wirken hochwertig und ruhig. ## 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](https://gradiently.design/de/guide/complementary-colors) erklärt den Sog, und [Korallenverläufe](https://gradiently.design/de/guide/coral-gradient) hat Codes für die andere Seite. - Vermeiden: graue Mitte: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)` - Kupfersonne auf tiefem Petrol: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)` - Blasses Petrol zu Pfirsich: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)` Eine gesättigte Mischung aus Petrol zu Koralle vergraut in der Mitte. Ein kleines warmes Licht auf Petrol oder zwei blasse Töne funktionieren weit besser. 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. | Wenn du bist | Probiere | Kombiniere mit | | --- | --- | --- | | Eine Praxis, ein Pool oder eine Hautpflegemarke | Seichtes Wasser oder Lagune | Anthrazitfarbene Schrift, viel Weißraum | | Eine App oder ein Fintech-Produkt | Petrol zu Blau | Eine korallenfarbene Button-Farbe | | Ein Café, ein Florist oder ein Gartencenter | Jade | Creme und Terrakotta | | Ein Hotel, eine Bar oder eine Kanzlei | Licht von oben | Kupfer- oder Messingdetails | | Ein Abendevent | Lichtschacht | Überschrift in blasser Lagune | Startpunkte, keine Regeln. Teste jeden mit deiner echten Überschrift und deinem Logo. ## 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](https://gradiently.design/de/guide/dark-mode-design). ```css :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); } ``` Eine tiefpetrolfarbene Hülle mit petrolfarbenem Glühen oben. Links in blasser Lagune bleiben davor lesbar. ## 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. | Hintergrund | Weißer Text | Abgrund-Text #042f2e | | --- | --- | --- | | Lagune `#5eead4` | Fällt durch | Etwa 9,8:1 | | Petrol `#14b8a6` | Etwa 2,5:1, fällt durch | Etwa 5,8:1 | | Riff `#0d9488` | Etwa 3,7:1, nur für großen Text | Schwach | | Seetang `#0f766e` | Etwa 5,5:1, besteht | Fällt durch | | Tiefes Petrol `#115e59` | Etwa 7,6:1, besteht | Fällt durch | Petrol wechselt zwischen Riff und Seetang von dunkler zu weißer Schrift. Ein Spa-Post im Hochformat mit weißem Text auf tiefem Petrol-Verlauf Als Post im Hochformat sitzt die Überschrift im ruhigsten Petrol. Dasselbe Spa-Design als hohe Story, mit dem Petrol-Licht passend zum Format verschoben Dasselbe Design als Story, frisch gerendert statt zugeschnitten. 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](https://gradiently.design/de/guide/website-hero-background) ausgewogen bleibt. ## FAQ ### Welche Farben passen zu einem Petrol-Verlauf? Cyan, Smaragd, Blau und Marine mischen sich hinein. Koralle, Pfirsich, Kupfer und Gold ergeben starke warme Akzente, wenn sie außerhalb der Mischung genutzt werden. ### Wie lautet der Hex-Code für Petrol? Das benannte `teal` im Web ist `#008080`. Die meisten modernen Paletten nutzen lebendigere Versionen wie `#14b8a6` für mittleres Petrol und `#0f766e` für ein tieferes. ### Was ist der Unterschied zwischen Petrol und Türkis? Petrol ist tiefer und gedämpfter, Türkis ist heller, leuchtender und neigt etwas stärker zu Grün. Beide liegen zwischen Blau und Grün. ### Kann ich weißen Text auf Petrol nutzen? Nur auf tiefem Petrol, ab etwa `#0f766e` abwärts. Leuchtendes und helles Petrol braucht dunklen Text, um den Kontrast zu bestehen. ### Ist Petrol eine gute Farbe für den Dunkelmodus? Ja. Ein sehr dunkles Petrol wie `#042f2e` ist weicher als Schwarz und markanter als Marine, und blasse Petrol-Akzente sind darauf gut lesbar.