Meer Farbverlauf: Codes von der Untiefe bis zur Tiefsee

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.

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.

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.

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, bevor du exportierst.

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 erklärt, wie Stopp-Positionen funktionieren.

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.

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 behandelt die Syntax.

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; }

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 für weitere Techniken an.