# Orange-Rosa-Farbverlauf: warme Codes ohne Sonnenuntergang

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

Orange und Rosa liegen im Farbkreis direkt nebeneinander, deshalb gehört der **Orange-Rosa-Farbverlauf** zu den wärmsten und unkompliziertesten Mischungen überhaupt. Schwierig ist nicht das Mischen, sondern nicht wie jede Sonnenuntergangs-Vorlage auszusehen.

## The short version

- Ein Orange-Rosa-Farbverlauf mischt benachbarte warme Töne wie Mandarine #f97316, Koralle #fb7185 und Pink #ec4899, sodass der Übergang ohne Brückenfarbe leuchtend bleibt.
- Das Paar ist so eng mit Sonnenuntergängen verbunden, dass eine schlichte Diagonale von Orange zu Rosa wie eine Vorlage wirkt; ein anderer Grund oder eine andere Helligkeit vermeidet das.
- Leuchtendes Orange und knalliges Pink sind beide zu hell für kleine weiße Schrift, während ein tiefes Rost oder Brandbraun auf den weicheren Varianten gut lesbar ist.
- Erdige Varianten mit Terrakotta und Altrosa wirken ruhig und erwachsen, dunkle Varianten mit Glut und Himbeere warm und nächtlich.
- Orange und Rosa passen zu Essen, Getränken, Beauty, Sommerkampagnen, Reisen und jeder Marke, die warm und einladend wirken will.

Ein **Orange-Rosa-Farbverlauf** mischt zwei warme Nachbarn: auf der einen Seite Mandarine wie `#f97316` oder Pfirsich wie `#fed7aa`, auf der anderen Pink wie `#ec4899` oder Blush wie `#fda4af`, meist mit Koralle dazwischen. Weil die Töne nebeneinander liegen, wird die Mischung nie schlammig. Vorhersehbar ist dagegen, wonach sie aussieht: Die Kombination ist die Kurzform für Sonnenuntergang. Die Codes unten sind nach Stimmung geordnet, von sanftem Pfirsich bis dunkler Glut, damit du eine Version findest, die nach dir aussieht und nicht nach Handy-Hintergrund.

## Farben zwischen Orange und Rosa

Wer von Orange zu Rosa geht, kommt an Koralle, Lachs und Wassermelone vorbei, alle satt und warm. Heller wird daraus Aprikose, Pfirsich und Blush. Dunkler werden Rost, Terrakotta und Himbeere. Die meisten guten Orange-Rosa-Verläufe nutzen drei Stopps aus demselben Helligkeitsbereich, statt von blassem Pfirsich auf knalliges Pink zu springen.

- Creme: #fff7ed
- Pfirsich: #fed7aa
- Blush: #fda4af
- Aprikose: #fb923c
- Koralle: #fb7185
- Mandarine: #f97316
- Knallpink: #ec4899
- Rost: #9a3412
- Brandumbra: #431407

Die Spanne von Orange zu Rosa, mit einer Creme und zwei dunklen Brauntönen für Gründe und Schrift.

## Sanfte Pfirsich- und Blush-Verläufe

Helles Orange und Rosa zusammen wirken wie Haut, Leinen und frühes Morgenlicht. Damit passen sie natürlich zu Hautpflege, Hochzeit, Wellness und Bäckereien. Hinter Produkten fotografieren sie sich auch gut, weil sie warme Töne schmeicheln. Setze Schrift in tiefem Rost statt in Schwarz; so bleibt die Wärme.

- Pfirsichleinen: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Aprikosen-Blush: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Erstes Licht: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Sanftes Orange und Rosa. Rost oder Brandumbra liest sich auf allen dreien gut. [Pfirsich-Verläufe](https://gradiently.design/de/guide/peach-gradient) zeigt mehr aus dieser Familie.

## Koralle, Grapefruit und Wassermelone

Gesättigtes Orange und Rosa ist purer Sommer: Grapefruitsaft, Strandtücher, Festivalplakate. Diese Verläufe sind laut genug, um das Scrollen zu stoppen, und freundlich genug, um nicht aggressiv zu wirken. Halte sie von sehr kleiner Schrift fern und lass ihnen eine ruhige Ecke.

- Mandarine zu Pink: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Grapefruit: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Wassermelone: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Mango-Smoothie: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Leuchtende Orange-Rosa-Verläufe. Jeder Stopp ist ein enger Nachbar des nächsten, deshalb bleibt die Mitte lebendig. [Korallen-Verläufe](https://gradiently.design/de/guide/coral-gradient) geht tiefer.

## Erdiges Terrakotta und Altrosa

Dämpfe beide Farben, und das Paar wird ruhig und geerdet, die Palette von Tontöpfen, Trockenblumen und sonnengebackenen Wänden. Das ist die am wenigsten genutzte Variante und oft die eleganteste. Sie verträgt sich gut mit Olive, Sand und Creme und passt wunderbar zu [Erdtönen als Farbpaletten](https://gradiently.design/de/guide/earth-tone-colors).

- Ton und Rose: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Terrakotta-Dämmerung: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Getrocknete Blüten: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Gedämpftes Orange und Rosa. Diese Verläufe wirken handgemacht und ruhig und passen zu Interior, Keramik, Floristik und Slow-Living-Marken.

> **Hinter Produktfotos** Warme, gedämpfte Verläufe schmeicheln Haut, Holz, Brot und Keramik, weil sie deren Farben aufgreifen. Nimm einen Stopp vom Produkt selbst und baue den Verlauf von dort nach außen auf. [Hintergründe für Produktfotos](https://gradiently.design/de/guide/product-photo-backgrounds) zeigt, wie.

## Dunkle Glut- und Himbeer-Verläufe

Beginne mit einem tiefen Braun oder Pflaume als Grund und lass Orange und Rosa daraus glühen, dann ist das Paar nicht mehr fröhlich, sondern intim: Kerzenlicht, Glut, eine Cocktailkarte. Diese Verläufe tragen helle Schrift mühelos, was sie praktisch für Eventplakate und Abendangebote macht.

- Glut: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Rost zu Himbeere: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Letztes Licht: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Dunkle Orange-Rosa-Verläufe. Füge Körnung hinzu, denn dunkle warme Verläufe bekommen schnell Streifen.

## So vermeidest du das Sonnenuntergangs-Klischee

Orange zu Rosa auf einer 45-Grad-Diagonale ist überall, von Handy-Hintergründen bis zu App-Icons, und wirkt deshalb wie eine Voreinstellung. Willst du die Wärme ohne die Vorlage, ändere mindestens eines der Dinge unten. [Sonnenuntergangs-Verläufe](https://gradiently.design/de/guide/sunset-gradient) behandelt die wörtliche Version, falls du genau die willst.

### Vorlage

- Knalliges Orange zu knalligem Pink, zwei Stopps
- Gerade 45-Grad-Diagonale
- Farbe gleichmäßig über den Rahmen verteilt
- Weiße Schrift auf der hellsten Stelle

### Durchdacht

- Zuerst ein Grund: Creme, Ton oder Glut
- Licht aus einer Ecke mit radialem Verlauf
- Ungleiche Stopps, eine Farbe führt
- Rostschrift auf sanften Versionen, Cremeschrift auf dunklen

## Schriftfarben auf Orange und Rosa

Orange gehört zu den hellsten gesättigten Farben, deshalb ist weiße Schrift auf Mandarine oder Aprikose schwächer, als sie aussieht. Tiefes Rost oder Brandumbra ist die verlässliche Schriftfarbe auf sanften und leuchtenden Versionen; Creme passt zu dunklen. Die Verhältnisse folgen der WCAG-Formel, bei der 4,5:1 das übliche Minimum für Fließtext ist; [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt den Rest.

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Aprikose `#fb923c` | Weiß | 2,3:1 | Fällt durch |
| Mandarine `#f97316` | Weiß | 2,8:1 | Für die meisten Texte ungeeignet |
| Pfirsich `#fed7aa` | Brandumbra `#431407` | 11,6:1 | Ausgezeichnet |
| Koralle `#fb7185` | Brandumbra `#431407` | 5,8:1 | Gut |
| Tiefes Orange `#c2410c` | Weiß | 5,2:1 | Gut |
| Himbeere `#be185d` | Weiß | 6,0:1 | Gut |

Wenn weiße Schrift für dein Design wichtig ist, dunkle die Stopps dahinter zu tiefem Orange oder Himbeere ab.

Eine Bar-Aktion im Hochformat mit cremefarbener Schrift auf einem dunklen Verlauf, der in Orange und Himbeere glüht

Eine Bar-Aktion in Glut bis Himbeere, mit Cremeschrift auf der dunklen Seite.

Ein quadratischer Hautpflege-Post mit dunkelbrauner Schrift auf einem sanften Pfirsich-Blush-Verlauf

Ein Hautpflege-Post in Pfirsich und Blush mit Brandumbra-Schrift.

## CSS für Orange-Rosa-Verläufe

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

Ein cremefarbener Grund mit korallenfarbenem Licht oben rechts und Aprikose unten links, dazu Text in Brandumbra.

Zwei sanfte radiale Lichter über einer blassen Basis ergeben eine viel natürlichere Wärme als eine einzelne Diagonale. Wenn du eine Wärme willst, die unverkennbar deine ist, lässt dich der Markt von Gradiently Marks nach Farbwörtern wie „Koralle“ oder „Pfirsich“ durchsuchen. Jeder Mark ist ein Unikat mit genau einem Besitzer zur Zeit, und sobald du ihn dir sicherst, kannst nur du mit ihm exportieren.

## FAQ

### Was ist ein guter Code für einen Orange-Rosa-Farbverlauf?

Ein leuchtender Klassiker ist `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Für eine sanftere Version probiere `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Passen Orange und Rosa zusammen?

Ja. Sie sind Nachbarn im Farbkreis mit Koralle dazwischen, deshalb mischen sie sich sauber und wirken warm.

### Welche Schriftfarbe passt auf einen Orange-Rosa-Farbverlauf?

Ein tiefes Rost oder Brandumbra wie `#431407` liest sich auf sanften und leuchtenden Versionen gut. Weiß funktioniert nur auf den tieferen Stopps, etwa `#c2410c` oder `#be185d`.

### Wie sieht ein Orange-Rosa-Farbverlauf weniger nach Sonnenuntergang aus?

Beginne mit einem Grund wie Creme, Ton oder dunkler Glut, belichte ihn aus einer Ecke statt diagonal und lass eine Farbe führen.

### Welche Farbe liegt zwischen Orange und Rosa?

Koralle, etwa `#fb7185`, mit Lachs und Wassermelone als nahen Verwandten.