# Korall Farbverlauf: lebendige Codes zwischen Rosa und Orange

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

Korall liegt genau dort, wo Rosa in Orange übergeht, und hat die Wärme des einen und den Charme des anderen. Es ist lebendig, freundlich und überraschend schwer mit Text zu setzen. Hier sind Codes und Lösungen.

## The short version

- Ein Korall Farbverlauf mischt warme, rosige Orangetöne, meist an einem Ende zu Rosé und am anderen zu Mandarine oder Pfirsich geneigt.
- Die CSS-Farbe coral ist #ff7f50, ein leuchtendes, zu Orange neigendes Korall.
- Korall und Petrol sind fast Gegenfarben, eine direkte Mischung wird deshalb grau; nutze Petrol stattdessen als eigene Fläche oder als Akzent.
- Weißer Text scheitert auf leuchtendem Korall; nimm ein tiefes Weinrot oder Braun wie #3b0d0c, oder setze Weiß auf ein tiefes Rotkorall.
- Korall passt zu Sommerkampagnen, Essen und Trinken, Beauty, Fitness und freundlichen Verbraucher-Apps.

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.

| Farbe | Typischer Hex | Charakter |
| --- | --- | --- |
| Korall | `#ff7f50` | Leuchtend und warm, zu Orange geneigt |
| Living Coral | `#ff6f61` | Rosigeres, weicheres Korall |
| Lachs | `#fa8072` | Blasser und rosiger, leicht gedämpft |
| Pfirsich | `#ffcba4` | Viel heller, orangener, sanft |
| Wassermelone | `#fb7185` | Rosiger und kühler, verspielt |

Korall ist die leuchtendste dieser Farben. Ihre Nachbarn sind nützliche Stopps in einem Korall Farbverlauf.

## 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.

- Klassisches Korall: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living Coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Tropischer Punsch: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Korallenblüte: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Korallen-Sonnenuntergang: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Fünf leuchtende Korallmischungen. Jede Partnerfarbe ist ein enger Nachbar, deshalb bleiben die Verläufe gesättigt.

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](https://gradiently.design/de/guide/pink-gradient) an.

- Rosenkorall: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Lachsrosé: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Wassermelonenkorall: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Rosa geneigte Korallen wirken weicher und passen zu Beauty- und Lifestyle-Marken.

### 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](https://gradiently.design/de/guide/orange-pink-gradient) deckt die ganze Spanne dazwischen ab.

- Aprikosenkorall: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Korall zu Mandarine: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Strandbar: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Orange geneigte Korallen sind sonniger, energiegeladener und für den Sommer gemacht.

## 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](https://gradiently.design/de/guide/muddy-gradients) erklärt, warum die Mitte grau wird.

- Vermeiden: graue Mitte: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Korallensonne auf Petrol: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Über Muschelweiß: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

Die erste Mischung wird in der Mitte grau. Die anderen beiden halten Korall und Petrol als getrennte Farben oder verbinden sie über einen hellen Ton.

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](https://gradiently.design/de/guide/teal-gradient).

## 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.

- Korall auf Wein: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Sonnenuntergang über der Bucht: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Kohle und Korall: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Ein Korall-Licht, viel Dunkel. Das Korall wirkt heller als auf Weiß.

## 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](https://gradiently.design/de/guide/color-contrast-accessibility).

Ein Sale-Post eines Pilates-Studios mit heller Schrift quer über der hellsten Stelle eines Korall Farbverlaufs

Helle Worte quer über leuchtendem Korall wirken kräftig, sind auf dem Handy bei Tageslicht aber schwer zu lesen.

Derselbe Pilates-Post mit klarem Text auf einer ruhigeren, tieferen Stelle des Korall Farbverlaufs

Derselbe Post mit einer ruhigeren Zone und einer Schriftfarbe, die dazu passt.

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](https://gradiently.design/de/guide/css-gradient-button) zeigt weitere Muster.

```css
.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%;
}
```

Eine Korall-Pille mit tiefem Weintext. Der Verlauf gleitet bei Hover, statt die Farbe zu wechseln.

## FAQ

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

Die CSS-Farbe `coral` ist `#ff7f50`. Pantones Living Coral wird oft als `#ff6f61` angenähert.

### Welche Farben passen zu einem Korall Farbverlauf?

Pfirsich, Rose, Mandarine und Gold mischen sich gut hinein. Tiefes Petrol, Marineblau und Pflaume sind starke Partner, wenn sie als getrennte Flächen bleiben.

### Warum sieht mein Korall-Petrol-Verlauf grau aus?

Korall und Petrol liegen im Farbkreis fast gegenüber, deshalb verlieren die Farben dazwischen Sättigung. Halte sie auseinander oder verbinde sie über einen hellen Ton.

### Kann ich weißen Text auf Korall verwenden?

Nicht auf leuchtendem Korall, wo Weiß beim Kontrast durchfällt. Nimm ein tiefes Weinrot oder Braun, oder vertiefe das Korall zu einem Rot, bevor du Weiß nutzt.

### Was ist der Unterschied zwischen Korall und Lachs?

Lachs ist blasser, rosiger und leicht gedämpfter. Korall ist leuchtender, gesättigter und neigt stärker zu Orange.