# Cyan Farbverlauf: klare elektrische Codes

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

Cyan ist die Farbe von Bildschirmen, Schwimmbädern und Eis: sauber, leuchtend und ein wenig futuristisch. Es ist auch viel heller, als es aussieht, was verändert, wie du Worte darauf setzt.

## The short version

- Ein Cyan Farbverlauf mischt die leuchtende Farbe auf halbem Weg zwischen Grün und Blau mit Weiß, Blau, Limette, Magenta oder tiefem Marineblau.
- Reines Bildschirm-Cyan ist `#00ffff`, das CSS auch Aqua nennt, und es ist heller und leuchtender als Petrol oder Türkis.
- Weißer Text auf reinem Cyan hat nur etwa 1,3 zu 1 Kontrast, Cyan braucht also dunkle Schrift oder einen viel tieferen Hintergrund hinter Worten.
- Cyan wirkt am elektrischsten auf fast schwarzem oder marineblauem Grund, wo schon wenig davon zu glühen scheint.
- Cyan mischt sich sauber in Blau und Limette, weil beide seine Nachbarn im Farbkreis sind.

Ein **Cyan Farbverlauf** mischt die leuchtende Farbe auf halbem Weg zwischen Grün und Blau mit einem ihrer Nachbarn: Weiß für Eis, Blau für einen elektrischen Tech-Look, Limette für Frische, Magenta für ein Cyber-Gefühl oder ein tiefes Marineblau, in dem Cyan zu glühen scheint. Reines Bildschirm-Cyan ist `#00ffff` und weit heller, als die meisten erwarten, die Hauptkunst ist also zu entscheiden, wohin die Worte kommen. Kopierbare Codes für jeden Look folgen, mit den Kontrastwerten, auf die es ankommt.

## Cyan, Petrol und Türkis sind nicht dasselbe

Diese drei werden ständig vertauscht, und der Unterschied zählt, wenn du eine Designerin briefst oder einen Code wählst. CSS benennt sogar alle drei, und sie sind klar verschieden. Cyan ist am leuchtendsten und am ausgewogensten zwischen Grün und Blau. Türkis ist weicher und etwas grüner, wie der Edelstein. Petrol ist viel dunkler und ruhiger.

| Farbe | CSS-Name und Hex | Charakter |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Am leuchtendsten, elektrisch, synthetisch |
| Elektrisches Cyan | `#00e5ff` | Cyan mit einem Hauch mehr Blau, augenfreundlicher |
| Türkis | `turquoise`, `#40e0d0` | Weicher und grüner, tropisch |
| Petrol | `teal`, `#008080` | Dunkel, ruhig, erwachsen |

Vier Nachbarn. Soll dein Verlauf ruhig statt leuchtend wirken, willst du wahrscheinlich Petrol, nicht Cyan.

Für die ruhigeren Verwandten sieh dir [Petrol Farbverlauf](https://gradiently.design/de/guide/teal-gradient) und [Türkis Farbverlauf](https://gradiently.design/de/guide/turquoise-gradient) an. Dieser Artikel bleibt am leuchtenden Ende.

- Eis: #f0fdff
- Poollicht: #a5f3fc
- Reines Cyan: #00ffff
- Elektrisches Cyan: #00e5ff
- Tiefes Cyan: #0891b2
- Lagune: #0e7490
- Nachtmarine: #082f49
- Limettenakzent: #b6f73a

Eine Cyan-Familie von Eis bis Marine, dazu Limette als Partner, der es frisch hält.

## Eis- und Pool-Cyan Farbverlauf Codes

Das helle Ende von Cyan fühlt sich an wie kaltes Wasser und saubere Luft. Eis ist fast weiß mit einem Hauch Farbe; Gletscher und Pool laufen tiefer, durch leuchtendes Cyan in ein Blaugrün, das unten weiße Schrift tragen kann. Sie passen zu Sommerangeboten, Hautpflege mit kühlender Geschichte, Getränken und allem, das erfrischend wirken soll.

- Eis: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Gletscher: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Schwimmbad: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Helle Cyans. Setze dunkle Schrift auf den oberen Teil jedes Verlaufs; nur der tiefste Stopp unten bei Gletscher und Pool verträgt Weiß.

## Elektrisches Cyan auf dunklen Hintergründen

Cyan wird elektrisch, wenn es auf Dunkelheit sitzt. Ein kleines Cyan-Licht auf fast schwarzem oder marineblauem Grund sieht aus wie ein Bildschirm, ein Laser oder eine Datenvisualisierung, weshalb es in Software, Gaming und Wissenschaft überall zu finden ist. Halte den größten Teil des Bildes dunkel und lass Cyan eine Ecke oder einen Rand einnehmen. Der **Cyanblau Farbverlauf** in dieser Auswahl ist der vielseitigste von allen, an einem Ende leuchtend und am anderen satt blau.

- Cyan zu Elektroblau: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Cyan-Licht auf Schwarz: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Schaltkreisnacht: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Dunkle Gründe mit Cyan-Licht. Schaltkreisnacht steigt von Schwarz zu Cyan auf, perfekt für einen Hero, bei dem die Überschrift in der dunklen oberen Hälfte sitzt.

Für komplette Schemata rund um diesen Look hat [Tech-Farbpaletten](https://gradiently.design/de/guide/tech-color-palettes) mehrere, und [Neon Farbverläufe](https://gradiently.design/de/guide/neon-gradients) treibt ihn weiter Richtung Nachtleben.

## Cyan mit Limette und mit Magenta

Cyan zu Limette läuft durch Mint und wirkt sportlich, frisch und optimistisch. Cyan mit Magenta ist die Cyberpunk-Paarung: zwei der drei Druckprimärfarben, beide in voller Lautstärke. Lass sie durch eine dunkle Indigo-Mitte laufen, und sie wirkt wie eine Neonstraße bei Nacht statt wie Kinderspielzeug. Der Artikel zum [Magenta Farbverlauf](https://gradiently.design/de/guide/magenta-gradient) behandelt die andere Seite dieser Paarung.

- Cyan zu Limette: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Zwei kräftige Paarungen. Beide sind laut, gib ihnen also kurze Worte und viel Raum.

## Die Kontrastfalle: Worte auf Cyan

Cyan ist eine der hellsten gesättigten Farben, die ein Bildschirm zeigen kann. Weiße Schrift auf reinem `#00ffff` hat nur etwa 1,3 zu 1 Kontrast, also unlesbar, während Schwarz auf demselben Cyan etwa 16,7 zu 1 erreicht. Weiß beginnt zu funktionieren, sobald das Cyan auf etwa `#0e7490` vertieft ist, wo es ungefähr 5,4 zu 1 erreicht. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Verhältnisse und die Zielwerte.

### Schwer lesbar

- Weiße Schrift auf leuchtendem Cyan
- Cyanfarbene Schrift auf einer weißen Seite
- Kleiner Text über der leuchtenden Mitte eines Verlaufs
- Hellblaue Schrift auf Eis

### Leicht lesbar

- Marineblaue oder fast schwarze Schrift auf leuchtendem Cyan
- Cyanfarbene Schrift auf einer marineblauen oder schwarzen Seite
- Kleiner Text nur auf dem tiefsten Stopp
- Weiße Schrift auf Lagune #0e7490 oder dunkler

Diese Art von Urteil trifft Gradiently für dich. Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, und der Mark schiebt seine ruhigste, kontrastreichste Zone hinter die Worte, sodass ein leuchtender Cyan-Hintergrund weißen Text nie im Stich lässt.

## Ein Cyan Farbverlauf als Rahmen in CSS

Auf dunklen Oberflächen funktioniert Cyan wunderbar als Rand statt als Füllung. Ein Verlaufsrahmen hält die Karte lesbar und fügt das elektrische Gefühl hinzu. Das nutzt zwei Hintergründe, einen aufs Padding und einen auf den Rand beschnitten, und behält so abgerundete Ecken.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Eine dunkle Karte mit einem Rahmen von Cyan zu Blau. Tausche den zweiten Verlauf gegen Cyan zu Limette für ein frischeres Gefühl.

Weitere Techniken, einschließlich animierter Rahmen, stehen unter [CSS-Verlaufsrahmen](https://gradiently.design/de/guide/css-gradient-border).

## Wo ein Cyan Farbverlauf passt

Cyan ist eine natürliche Wahl für Software-Launches, Entwicklertools, Gaming, Bademode, Getränke und alles, das schnell oder kalt wirken soll. Halte am Launch-Tag einen Cyan-Look über Ankündigungspost, Linkvorschau und Changelog-Banner, damit man ihn in jedem Feed erkennt. [Branding für SaaS-Startups](https://gradiently.design/de/guide/saas-startup-branding) zeigt, wie du eine ganze Identität um eine leuchtende Farbe wie diese baust.

Ein breiter Social-Post mit dunkelmarineblauem Hintergrund, einem leuchtenden Cyan-Licht an einem Rand und den Worten Deployt in Sekunden in Weiß

Ein Launch-Post für X in 1600×900. Weiße Schrift auf der dunklen Seite, das Cyan-Licht bleibt von den Worten fern.

## FAQ

### Wie lautet der Hex-Code für Cyan?

Reines Bildschirm-Cyan ist #00ffff, in CSS auch Aqua genannt. Ein etwas blaueres, angenehmeres elektrisches Cyan ist #00e5ff.

### Was ist der Unterschied zwischen Cyan und Petrol?

Cyan ist leuchtend und hell, auf halbem Weg zwischen Grün und Blau. Petrol, in CSS #008080, ist ein viel dunkleres und ruhigeres Blaugrün.

### Welche Textfarbe funktioniert auf einem Cyan Hintergrund?

Marineblau oder fast Schwarz auf leuchtendem Cyan. Weiß funktioniert nur auf tiefen Cyans wie #0e7490 oder dunkler.

### Welche Farben passen gut zu einem Cyan Farbverlauf?

Blau und Limette mischen sich sauber, weil sie Cyans Nachbarn sind. Magenta ergibt eine kräftige Cyberpunk-Paarung, und Marineblau oder Schwarz lässt Cyan glühen.