# Meer Farbverlauf: Codes von der Untiefe bis zur Tiefsee [Canonical HTML page](https://gradiently.design/de/guide/ocean-gradient) Das Meer ist schon ein Verlauf: hell über Sand, leuchtend, wo die Sonne hinkommt, fast schwarz, wo nicht. Kopierst du diese Reihenfolge, wirkt ein Meer-Verlauf echt. Hier sind die Codes, Tiefe für Tiefe. ## The short version - Ein Meer Farbverlauf mischt Blau- und Blaugrüntöne in der Reihenfolge, in der echtes Wasser sie zeigt: hell und türkis in den Untiefen, klares Blau auf offener See und fast schwarzes Marineblau in der Tiefe. - Wasser schluckt zuerst rotes Licht, weshalb das Meer mit der Tiefe blauer und dunkler wird. - Senkrechte Meer-Verläufe, oben hell und unten dunkel, wirken wie Tiefe; ein harter Stopp zwischen zwei Blautönen wirkt wie ein Horizont. - Weißer Text funktioniert auf der tiefblauen Hälfte eines Meer Farbverlaufs; die hellen Untiefen brauchen dunkle Marineschrift. - Meer-Verläufe passen zu Reisen, Schwimmen, Segeln, Meeresfrüchten, Nachhaltigkeit und ruhigen Technikprodukten. Ein **Meer Farbverlauf** mischt Blau- und Blaugrüntöne in derselben Reihenfolge wie das Meer: helles Aqua über Sand, Türkis in den Untiefen, klares Blau auf offener See und ein fast schwarzes Marineblau in der Tiefe. Lässt du ihn von oben nach unten laufen, hell zu dunkel, liest man ihn als Tiefe, ohne dass es jemand sagen muss. Die Codes unten folgen diesem Tauchgang, dazu kommen Horizont-Mischungen, ein CSS-Meer über die ganze Seite und die Textfarben, die Worte auf Wasser lesbar halten. ## Warum das Meer blau ist, und warum das für deinen Verlauf zählt Wasser schluckt zuerst das rote Ende des Sonnenlichts, dann Gelb und Grün; je tiefer du gehst, desto mehr bleibt nur Blau übrig, und dann verblasst auch das. Flaches Wasser über hellem Sand reflektiert viel Licht und wirkt türkis; tiefes Wasser wirkt dunkel marineblau. Ein Meer-Verlauf, der diese Reihenfolge einhält, wirkt natürlich; einer mit dunklem Blau über Türkis wirkt auf dem Kopf, auch wenn niemand sagen kann, warum. - Gischt: #e0f7f4 - Untiefen: #7ee0d6 - Lagune: #22b8cf - Offenes Meer: #0284c7 - Dünung: #075985 - Dämmerzone: #0c3b66 - Tiefe: #082f49 - Abgrund: #020c1b Das Meer von oben nach unten. Die meisten Meer-Verläufe nutzen drei oder vier benachbarte Stopps aus dieser Spalte. ## Meer Farbverläufe für flaches Wasser Das helle Ende: das Wasser, das du bei klarem Wetter vom Strand oder Boot aus siehst. Sonnig, sauber und einladend, passend für Urlaubsmarken, Bademode, Poolfirmen und Sommerkarten. Die tropischere Seite behandeln die [Türkis Farbverläufe](https://gradiently.design/de/guide/turquoise-gradient). - Gischt zu Untiefen: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Klares Wasser: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)` - Sonne auf dem Wasser: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)` - Riffkante: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)` Mischungen für flaches Wasser. Jede beginnt mit einem hellen oder leuchtenden Stopp, wie helles Wasser über Sand aussieht. ## Farbverläufe der offenen See Weiter draußen verliert das Meer sein Grün und wird zu einem klaren, selbstbewussten Blau. Diese Mischungen wirken verlässlich, ruhig und kompetent, weshalb sie zu Segelclubs, Reiseversicherern, Meeresforschung und Technikmarken passen, die Blau ohne die Kälte von Firmenmarine wollen. Die größere Blaufamilie findest du unter [blaue Farbverläufe](https://gradiently.design/de/guide/blue-gradient). - Offenes Meer: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)` - Atlantik: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)` - Vor der Küste: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Dünung: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Blautöne offenen Wassers. Weniger Grün, mehr Tiefe, und oben noch hell genug, um wie Tageslicht zu wirken. ## Tiefsee Farbverläufe Am Ende des Tauchgangs wird das Meer fast schwarz mit nur einer Spur Blau. Das ist dramatisch und leise zugleich: Tauchschulen, Dokumentationen, Luxusuhren, Fischrestaurants nach Einbruch der Dunkelheit. Ein schwacher Schein von oben, wie Licht von der Oberfläche, verhindert, dass sie leer wirken. Dunkle Verläufe zeigen leicht Streifen, lies also [Verlaufs-Banding](https://gradiently.design/de/guide/gradient-banding), bevor du exportierst. - Abstieg: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)` - Licht von der Oberfläche: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)` - Biolumineszenz: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)` Tiefsee-Mischungen. Eine weiche Lichtquelle genügt; alles andere ist Tiefe. ## Horizont- und Küsten-Verläufe Meer-Designs enthalten oft den Himmel oder den Strand. Der Trick für einen Horizont ist ein harter Stopp: zwei Farbstopps an derselben Position, sodass der Himmel endet und das Meer auf einer klaren Linie beginnt. Eine Küste funktioniert umgekehrt, das Meer läuft über einen hellen Gischt-Stopp in Sand aus, damit sich warme und kühle Farben nie als Grau treffen. [Verlaufs-Stopps](https://gradiently.design/de/guide/gradient-stops) erklärt, wie Stopp-Positionen funktionieren. - Horizont im Morgengrauen: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)` - Mittagshorizont: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)` - Küstenlinie: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` Harte Stopps ergeben einen Horizont; ein heller Gischt-Stopp ergibt eine weiche Küste. ## Die Richtung für jedes Format wählen Weil ein Meer-Verlauf Tiefe bedeutet, funktioniert er am besten senkrecht, und hohe Formate zeigen den ganzen Tauchgang. In breiten Formaten klappt eine Horizont-Mischung oder ein radiales Leuchten meist besser, als das ganze Meer in eine geringe Höhe zu pressen. Ein Hochformat-Post liegt dazwischen: Ein sanfter senkrechter Verlauf von offener See zur Tiefe funktioniert, solange die Überschrift in einem Band landet und nicht über dem Wechsel. - Story 1080×1920: 1080 × 1920 - Pin 1000×1500: 1000 × 1500 - Post 1080×1350: 1080 × 1350 - Website-Hero 1920×1080: 1920 × 1080 - LinkedIn-Banner 1584×396: 1584 × 396 Nutze bei Stories und Pins die volle Höhe für den Tauchgang. Probiere bei Hero und Banner stattdessen einen Horizont oder ein Licht von einer Seite. Hier lässt dich ein einzelnes zugeschnittenes Bild im Stich: Das Licht landet bei der Hälfte deiner Größen am falschen Ort. Ein Gradiently Mark wird dagegen in jedem Format neu gerendert, und der Designer kann Story, Post und Banner aus einem Briefing erzeugen, sodass das Meer in jedem richtig sitzt. ## Ein Meer Farbverlauf in CSS für eine ganze Seite Eine lange Seite kann zum Tauchgang werden: oben hell, am Footer tief. Binde den Verlauf an die ganze Dokumenthöhe statt ans Fenster, gib ihm einen einfarbigen Fallback und füge oben einen weichen Oberflächenschein hinzu. [CSS lineare Verläufe](https://gradiently.design/de/guide/css-linear-gradient) behandelt die Syntax. ```css html { background-color: #082f49; /* fallback, and the colour seen on overscroll */ } body { min-height: 100vh; margin: 0; color: #082f49; background-image: radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%), linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%); } /* switch to light text once the page reaches deep water */ .deep { color: #e0f7f4; } ``` Eine Seite, die beim Scrollen tiefer wird. Nutze dunklen Text in den hellen oberen Abschnitten und hellen Text in den unteren. ## Text auf einem Meer Farbverlauf Ein Meer-Verlauf wechselt von sehr hell zu sehr dunkel, deshalb funktioniert keine einzelne Textfarbe auf ganzer Fläche. Tiefes Marineblau `#082f49` auf hellem Himmelblau `#7dd3fc` misst etwa 8,3 zu 1. Weiß auf Dünung `#075985` misst etwa 7,6 zu 1 und auf offenem Meer `#0284c7` fällt es auf etwa 4,1 zu 1, in Ordnung für große Überschriften, aber knapp unter Fließtext. Setze Worte dorthin, wo die Farbe zu ihnen passt, und sieh dir [Text auf Verläufen](https://gradiently.design/de/guide/text-on-gradient) für weitere Techniken an. Eine Segelclub-Story mit klarem Überschriftentext auf einem Meer Farbverlauf, der von leuchtendem Blau zu tiefem Marineblau dunkler wird Eine Story, die oben von leuchtendem Wasser zu tiefem Blau unten läuft, mit den Worten im ruhigsten Band. ## FAQ ### Welche Farben ergeben einen Meer Farbverlauf? Helles Aqua, Türkis, klares Blau, tiefes Blau und fast schwarzes Marineblau, in dieser Reihenfolge von oben nach unten. Codes wie `#7ee0d6`, `#0284c7` und `#082f49` decken den Bereich ab. ### Sollte ein Meer Farbverlauf von hell zu dunkel oder von dunkel zu hell laufen? Oben hell und unten dunkel, wie das Licht in echtem Wasser mit der Tiefe schwindet. ### Wie mache ich eine Horizontlinie in einem CSS-Verlauf? Gib zwei Farbstopps dieselbe Position, etwa `#bae6fd 45%, #0284c7 45%`. Die Farbe wechselt dann auf einer scharfen Linie statt in einer Mischung. ### Welche Textfarbe funktioniert auf einem Meer Farbverlauf? Dunkles Marineblau auf dem hellen oberen Teil und Weiß auf dem tiefen unteren Teil. Prüfe den Punkt direkt hinter jeder Textzeile. ### Was ist der Unterschied zwischen einem Meer Farbverlauf und einem blauen Farbverlauf? Ein Meer Farbverlauf folgt der Reihenfolge echten Wassers und enthält meist Türkis und fast schwarzes Marineblau. Ein blauer Farbverlauf kann jede Mischung von Blautönen sein.