Korall Farbverlauf: lebendige Codes zwischen Rosa und Orange

Ein Korall Farbverlauf mischt warme, rosige Orangetöne, die Farben, in denen Rosa zu Orange wird. Neigt er zu Rosé, wirkt er charmant und frisch; neigt er zu Mandarine, wirkt er sonnig und energiegeladen. Korall ist heiter und sehr auffällig, ein Liebling für Sommer, Essen, Beauty und Fitness. Zwei Fallen gibt es: einen grauen Streifen, wo es auf Petrol trifft, und Text, der darauf verschwindet. Beides lässt sich leicht vermeiden, wenn man es kennt.

Korall, Lachs, Pfirsich und Wassermelone

Warme, rosige Orangetöne teilen sich viele Namen. Es lohnt, sie zu trennen, denn das richtige Wort hilft dir, die richtigen Stopps zu wählen und zu beschreiben, was du willst, gegenüber einer Designerin oder dem Designer in Gradiently.

Leuchtende Korall Farbverläufe

Das ist Korall in Bestform. Sie halten die Aufmerksamkeit schon in Vorschaugröße, weshalb sie für Sale-Posts, Launches, Fitnesskurse und alles, was in einem vollen Feed auffallen soll, so gut funktionieren.

Ein paar Einsatzideen: „Klassisches Korall“ hinter einer einzelnen Zeile wie „Wir öffnen um zwölf“ auf einer Story in 1080×1920; „Tropischer Punsch“ als Cover einer Sommer-Getränkekarte; „Korallen-Sonnenuntergang“ als Verlauf auf einem Pinterest-Pin in 1000×1500 für einen Urlaubsführer. Korall ist stark, lass es also den Rahmen füllen und halte alles andere schlicht: eine Überschrift, ein Detail, viel Raum.

Korall Farbverläufe von Rosa bis Orange

Rosa geneigtes Korall

Schiebst du Korall Richtung Rose und Rosé, wird es weicher und romantischer, ideal für Beauty, Floristen, Hochzeiten und Lifestyle-Marken. Für die rosigere Seite der Familie sieh dir rosa Farbverläufe an.

Orange geneigtes Korall

Schiebst du es in die andere Richtung, zu Aprikose und Mandarine, wird Korall sonniger und lauter: Sommerkarten, Smoothie-Bars, Urlaub. Orange-rosa Farbverläufe deckt die ganze Spanne dazwischen ab.

Korall und Petrol ohne graue Mitte

Korall und Petrol sind eine der großen Paarungen: warm gegen kühl, Riff gegen Meer. Im Farbkreis liegen sie aber fast gegenüber, deshalb läuft eine direkte Mischung in der Mitte durch ein stumpfes Grau. Die Lösung: Halte sie auseinander. Nutze Petrol als Grund mit einem Korall-Licht, Korall als Grund mit einem Petrol-Akzent, oder führe zwischen ihnen über sehr helle Töne. Schlammige Farbverläufe erklärt, warum die Mitte grau wird.

Probiere auf einer Speisekarte oder einem Plakat ein sehr dunkles Petrol wie #042f2e mit korallfarbenen Überschriften und Buttons. Korall erreicht dort etwa 5,8 zu 1, weit besser als Weiß auf Korall, und es wirkt kräftig und sommerlich. Die Petrol-Seite behandeln die Petrol Farbverläufe.

Korall auf dunklem Grund

Korall leuchtet wunderschön vor tiefem Pflaumenviolett, Marineblau oder fast Schwarz. Ein einzelnes Korall-Licht auf dunklem Grund wirkt wie eine Neonreklame oder ein Sonnenuntergang über dem Meer und passt zu Bars, Musik, Nachtleben und Abendveranstaltungen. Halte das Korall-Licht dort fern, wo der Text steht, und setze ihn in blasses Muschelweiß oder Weiß auf die dunkle Fläche.

Text auf einem Korall Farbverlauf

Korall wirkt kräftig genug für weiße Schrift, und genau deshalb scheitern so viele Korall-Designs. Weiß auf #ff7f50 misst etwa 2,5 zu 1, weit unter den 4,5 zu 1, die für Fließtext verlangt werden. Ein tiefes Weinbraun wie #3b0d0c misst auf demselben Korall etwa 6,7 zu 1 und behält die Wärme. Willst du weiße Schrift, vertiefe das Korall zu einem Rot wie #e11d48, wo Weiß etwa 4,7 zu 1 erreicht. Die Methode steht unter Farbkontrast und Barrierefreiheit.

Ein Gradiently Mark nimmt diese Anpassung selbst vor: Er schiebt seine ruhigste, kontrastreichste Zone hinter deine Worte, und Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks. Keine Kästen oder Schlagschatten nötig.

Korall Farbverlauf CSS für einen Button

Korall ergibt einen freundlichen Call-to-Action. Halte den Verlauf hell genug, dass eine dunkle Beschriftung lesbar bleibt, und verschiebe bei Hover seine Position, statt Farben zu tauschen. CSS-Verlaufs-Buttons zeigt weitere Muster.

.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}