# Türkis-Verlauf: tropische Codes mit Tiefe

[Canonical HTML page](https://gradiently.design/de/guide/turquoise-gradient)

Leuchtendes Türkis allein wirkt wie ein Schwimmbad-Icon. Gib ihm einen tiefen Grund, ein warmes Ufer und etwas Licht, und es wird zum Meer vor einer Insel. So geht es, mit Codes.

## The short version

- Ein Türkis-Verlauf mischt leuchtende grünliche Blautöne und wirkt am natürlichsten, wenn er auch ein tieferes Blau und ein helles, fast weißes Glanzlicht enthält.
- Türkis ist heller und leuchtender als Petrol und grüner als Cyan. Die benannte CSS-Farbe turquoise ist #40e0d0.
- Flache Türkis-Verläufe wirken künstlich, gib ihnen also Tiefe mit einem marineblauen Grund, einem blassen Glanzlicht oder einem warmen Sandton.
- Weißer Text fällt auf leuchtendem Türkis durch, nutze für Schrift stattdessen ein tiefes Marine wie #083344.
- Sand, Koralle und Weiß sind die natürlichsten Partner für Türkis, weil sie an einen Strand erinnern.

Ein **Türkis-Verlauf** mischt leuchtende, grünliche Blautöne, und die, die wirklich tropisch wirken, haben drei Dinge: ein blasses Glanzlicht, wo das Licht trifft, einen klaren Türkis-Körper und ein tieferes Blau darunter. Ohne diese Spanne wirkt Türkis flach und künstlich. Unten stehen Codes für leuchtende Lagunen, Türkis mit echter Tiefe und Türkis neben warmem Sand, gefolgt von CSS und den Textfarben, die alles lesbar halten.

## Türkis, Petrol, Cyan und Aqua im Vergleich

Diese vier werden austauschbar benutzt, sind aber verschiedene Farben, und die richtige Wahl verändert die Stimmung. Türkis ist die leuchtendste und urlaubshafteste der Gruppe.

| Farbe | Typischer Hex-Wert | Wie sie wirkt |
| --- | --- | --- |
| Türkis | `#40e0d0` | Leuchtend, grünlich, tropisch, Edelstein |
| Aqua | `#7fffd4` (Aquamarin) | Blass, minzig, leicht, wässrig |
| Cyan | `#00ffff` (CSS-Cyan) | Elektrisch, kühler, digital |
| Petrol | `#008080` (CSS-Teal) | Tiefer, gedämpft, ruhig, erwachsen |

Türkis ist heller als Petrol und grüner als Cyan. Für die tiefere Version siehe den Artikel zu Petrol.

Wenn deine Marke ruhig und seriös sein will, willst du wahrscheinlich eher [Petrol-Verläufe](https://gradiently.design/de/guide/teal-gradient). Wenn sie Urlaub, Energie und Wärme will, bleib hier.

## Leuchtende tropische Türkis-Verläufe

Das sind die Postkartenmischungen: flaches Wasser über weißem Sand. Jede enthält einen blassen Stopp, damit das Türkis etwas hat, wogegen es glühen kann, und keine läuft ins Graue.

- Flachwasser: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagune: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Sonnige Bucht: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Türkis zu Himmel: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Riffkante: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Aquamarin: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Sechs leuchtende Türkis-Mischungen. Ein blasser oder weißer Stopp lässt jede beleuchtet wirken.

## So gibst du einem Türkis-Verlauf Tiefe

Echtes tropisches Wasser hat nie nur eine Farbe. Es ist blass über Sand, türkis über flachem Riff und tiefblau, wo es abfällt. Kopiere diese Struktur, und dein Verlauf wirkt nicht mehr wie eine flache Füllung.

1. **Wähle einen Grund** Nimm ein tiefes Blau für den dunkelsten Teil, etwa `#0c4a6e` oder `#083344`. Es verankert das Türkis und gibt ihm etwas, wogegen es leuchten kann.
2. **Setze den Körper** Nutze dein Türkis, etwa `#2dd4bf` bis `#40e0d0`, über die größte Fläche, meist die Mitte oder oben.
3. **Füge ein Glanzlicht hinzu** Setze einen kleinen, fast weißen Stopp wie `#ecfeff` dorthin, wo das Licht treffen würde. Ein radialer Verlauf in einer Ecke funktioniert gut.
4. **Wärme einen Rand** Führe optional einen Sandton am unteren Rand oder in einer Ecke entlang, damit die kühle Mischung ein warmes Ufer hat.
5. **Vollende die Oberfläche** Füge leichtes Korn hinzu, damit die leuchtenden Farben kein Banding zeigen, wenn die Plattform dein Bild komprimiert. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) hat die Methode.

- Steilabfall: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Licht durchs Wasser: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Türkis zu Kobalt: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Leuchtende Tiefe: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Türkis mit tiefblauem Grund. Diese passen zu Reisen, Tauchen, Getränken und nächtlichen Strandevents.

## Türkis-Sand-Verläufe

Der natürlichste Partner für Türkis ist der Strand selbst: warmer Sand, Koralle und Weiß. Diese Farben liegen im Farbkreis gegenüber von Türkis, mische sie also nur dort, wo die Sättigung niedrig ist, über blasse Stopps, oder halte sie als getrennte Flächen. So bekommst du eine Uferlinie statt eines grauen Schmierers. [Sommer-Farbpaletten](https://gradiently.design/de/guide/summer-color-palettes) hat weitere Urlaubskombinationen.

- Uferlinie: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Sand zu Meer: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Koralle auf Türkis: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

Türkis trifft Sand über eine blasse Mitte, sodass die warme und die kühle Seite nie vergrauen.

- Gischt: #ecfeff
- Türkis: #40e0d0
- Riffblau: #0891b2
- Tiefes Wasser: #083344
- Sand: #f5deb3
- Koralle: #fb7185

Eine komplette tropische Palette: Gischt, zwei Blautöne, eine tiefe Tinte, Sand und ein Korallenakzent.

## Wo ein Türkis-Verlauf am besten wirkt

Türkis ist laut, es verdient seinen Platz also dort, wo Menschen ohnehin Urlaub, Wasser oder Spaß erwarten. Einige Einsätze, in denen es jede andere Farbe schlägt:

- **Reisen und Hotels:** eine Story im Format 1080×1920 mit „Steilabfall“ hinter einer einzelnen Zeile wie „Drei Nächte in Lissabon“.
- **Schwimmschulen und Pools:** ein blasser Hintergrund „Flachwasser“ für Stundenpläne, mit tiefmarineblauer Schrift.
- **Smoothie-Bars und Saftmarken:** „Lagune“ mit einem korallenfarbenen Preissticker, der auffällt, weil er Türkis gegenübersitzt.
- **Sommerkarten und Festivalplakate:** „Uferlinie“ auf einem A4-Plakat, Meer oben und Sand dort, wo die Details stehen.
- **Schmuck:** Türkis ist auch ein Stein, daher passt ein tiefes „Licht durchs Wasser“ hinter Produktfotos in Silber oder Gold.

Vermeide es für alles, was ruhig oder formell wirken soll. Eine Kanzlei oder ein Bestatter ist mit Petrol oder Marine besser bedient.

## Türkis-Verlauf in CSS mit Licht

Zwei radiale Glanzlichter über einer linearen Basis zu schichten erzeugt den Eindruck von Sonnenlicht durchs Wasser. Es ist leicht zu rendern und braucht kein Bild. Die Syntax wird in [radiale CSS-Verläufe](https://gradiently.design/de/guide/css-radial-gradient) erklärt.

```css
.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}
```

Gischtlicht oben links, Türkis in der Mitte und tiefes Wasser unten. Setze Überschriften in die obere Hälfte, in der Tinte des tiefen Wassers.

## Text auf einem Türkis-Verlauf

Türkis ist viel heller, als es aussieht. Weiß auf `#40e0d0` misst etwa 1,6 zu 1, was niemand bei Sonnenlicht auf dem Handy bequem lesen kann. Tiefes Wasser `#083344` auf demselben Türkis misst etwa 8 zu 1. Nutze dunkelmarineblaue Schrift über den leuchtenden Bereichen und wechsle nur dort zu Weiß, wo der Verlauf zu tiefem Blau abgefallen ist. Die vollständigen Regeln stehen in [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility).

Ein Wassersport-Event-Post, in dem blasser Text vor einem leuchtenden Türkis-Verlauf ausbleicht

Helle Worte auf leuchtendem Türkis bleichen aus, sobald jemand sie im Freien ansieht.

Derselbe Event-Post mit klarem, tief gefärbtem Text auf einer ruhigeren Fläche des Türkis-Verlaufs

Derselbe Post mit Schriftfarbe und ruhiger Zone, die für die Worte gewählt wurden.

Genau das macht ein Mark von Gradiently von selbst: Sein ruhigster Bereich wandert hinter die Worte, und Automatische Farbe wählt pro Zeile helle oder dunkle Schrift aus den eigenen Farben des Mark. Reise- und Gastgewerbe-Teams, die täglich posten, finden weitere Ideen in [Social Media für Reisebüros](https://gradiently.design/de/guide/travel-agency-social-media).

## FAQ

### Wie lautet der Hex-Code für Türkis?

Die benannte CSS-Farbe `turquoise` ist `#40e0d0`. Etwas tiefere Versionen wie `#2dd4bf` sind ebenfalls weit verbreitet.

### Welche Farben passen zu einem Türkis-Verlauf?

Tiefes Marine, Weiß, Sand und Koralle. Marine gibt Tiefe, Weiß gibt Licht, und Sand oder Koralle bringen Wärme, wenn sie aus der Hauptmischung herausgehalten werden.

### Ist Türkis dasselbe wie Petrol?

Nein. Türkis ist heller, leuchtender und tropischer, Petrol ist tiefer und gedämpfter. Beide liegen zwischen Blau und Grün.

### Kann ich weißen Text auf Türkis nutzen?

Nicht auf leuchtendem Türkis, wo Weiß beim Kontrast klar durchfällt. Nutze tiefmarineblaue Schrift oder verlege weißen Text in den dunkelsten Blauteil des Verlaufs.

### Wie lasse ich einen Türkis-Verlauf weniger flach wirken?

Füge einen tiefblauen Grund, ein fast weißes Glanzlicht und leichtes Korn hinzu. Diese drei Schritte lassen ihn wie Wasser statt wie eine flache Füllung wirken.