Cyan Farbverlauf: klare elektrische Codes

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.

Für die ruhigeren Verwandten sieh dir Petrol Farbverlauf und Türkis Farbverlauf an. Dieser Artikel bleibt am leuchtenden Ende.

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.

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.

Für komplette Schemata rund um diesen Look hat Tech-Farbpaletten mehrere, und Neon Farbverläufe 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 behandelt die andere Seite dieser Paarung.

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 erklärt die Verhältnisse und die Zielwerte.

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.

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

Weitere Techniken, einschließlich animierter Rahmen, stehen unter CSS-Verlaufsrahmen.

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 zeigt, wie du eine ganze Identität um eine leuchtende Farbe wie diese baust.