# Orangeverlauf: 25 warme Codes von Pfirsich bis Brandorange

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

Orange ist eine der wärmsten Farben auf dem Bildschirm und eine der am leichtesten verpatzten. Hier sind 25 kopierbare Verläufe nach Stimmung, dazu die Kombinationen und Schriftregeln, die sie funktionieren lassen.

## The short version

- Ein Orangeverlauf wirkt warm, freundlich und energiegeladen und ändert seine Stimmung deutlich, je nachdem, wie hell oder dunkel die Orangetöne sind.
- Orange geht sauber in seine Nachbarn über: Gelb, Bernstein, Rot, Rosa und Braun.
- Orange direkt in Blau oder Petrol zu mischen ergibt meist eine graue oder matschige Mitte, halte Komplementärfarben deshalb als separaten Akzent.
- Weißer Text fällt auf leuchtendem Orange wie #f97316 beim Kontrast durch. Nimm dort fast Schwarz oder tiefes Braun oder setze weißen Text auf Brandorange oder dunkler.
- Dunkle Gründe mit einem einzelnen orangen Licht wirken hochwertig, während blasse Pfirsichverläufe zu sanften Alltagsmarken passen.

Ein **Orangeverlauf** mischt zwei oder mehr Orangetöne, oft mit einem benachbarten Gelb, Rot oder Rosa, und kaum ein Verlauf wirkt wärmer. Helle Pfirsich- und Aprikosenversionen wirken sanft und einladend, leuchtende Mandarine laut und verspielt, Brandorange oder Rost erdig und erwachsen. Unten stehen 25 Codes, nach diesen Stimmungen gruppiert, danach folgt, was dazu passt und wie du Schrift darauf setzt, ohne deine Worte zu verlieren.

## Sanfte Orangeverläufe: Pfirsich und Aprikose

Blasse Orangetöne sind der freundlichste Einstieg in die Farbe. Sie liegen nah an Haut, Brot und dem Licht später Nachmittage, weshalb Bäckereien, Hautpflege und Kindermarken auf sie setzen. Halte den hellsten Stopp fast cremefarben, damit die Mischung einen ruhigen Ort zum Ausruhen hat. Einen ganzen Artikel zum blassesten Ende findest du unter [Pfirsichverläufe](https://gradiently.design/de/guide/peach-gradient).

- Creme zu Aprikose: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Sanfte Aprikose: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Pfirsichhaut: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Morgenglühen: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Butter zu Melone: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Fünf blasse Orangeverläufe. Jeder beginnt nahe Creme, sodass es immer eine ruhige Fläche für dunklen Text gibt.

## Leuchtende Orangeverläufe: Mandarine und Zitrus

Gesättigtes Orange ist pure Energie. Es passt zu Sales, Essenslieferung, Sport, Festivals und allem, was in Vorschaugröße auffallen muss. Das Risiko ist, dass leuchtendes Orange zu einem einzigen lauten Block verflacht, gib ihm also einen helleren Stopp Richtung Gelb oder einen tieferen Richtung Rot. Diese kleine Verschiebung lässt es wie Licht statt wie Farbe wirken.

- Mandarine: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Zitrusexplosion: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Orange zu Wassermelone: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Brennpunkt: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Orange zu Zitrone: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Leuchtende Orangetöne wirken am besten mit einem Stopp, der zu Gelb oder Rosa neigt. Die Mischung wirkt dann wie Licht, nicht wie eine flache Füllung.

## Sonnenuntergangs- und Bernstein-Orangeverläufe

Orange senkrecht von Gold oben zu Rot oder Pflaume unten laufen zu lassen ergibt einen Sonnenuntergang, vermutlich den vertrautesten Verlauf überhaupt. Bernsteinmischungen sind der leisere Cousin: Honig-, Marmeladen- und Whiskytöne, die reich wirken, ohne zu schreien. Für die volle Himmelsbehandlung geht [Sonnenuntergangsverläufe](https://gradiently.design/de/guide/sunset-gradient) weiter.

- Klassischer Sonnenuntergang: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Abenddämmerung: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Honigbernstein: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmelade: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Letztes Licht: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Senkrechte Mischungen wirken wie Himmel. Setze die hellste Farbe nach oben und die Horizontfarbe weit nach unten.

## Brandorange- und Rost-Verläufe

Schiebst du Orange Richtung Braun, wird es zu Terrakotta, Rost und Kupfer: Farben von Tontöpfen, Herbstlaub und altem Leder. Sie wirken handwerklich und durchdacht, daher passen sie zu Interieurs, Kaffee, Keramik, Outdoor-Marken und allem mit handgemachter Geschichte. Sie tragen auch weißen Text weit besser als leuchtendes Orange.

- Brandorange: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terrakotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Kupfer: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Rost: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Ton zu Rinde: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Brandorange liegt nah am Braun. Es ist ruhiger, wärmer und besser hinter weißer Schrift.

## Oranges Licht auf dunklem Grund

Die hochwertigste Art, Orange zu nutzen, ist sparsam. Beginne bei fast Schwarz, tiefem Braun oder Marine und lass ein Orange aus einer Ecke glühen wie Glut oder eine Straßenlaterne. Das ist die Behandlung für späte Events, Restaurants, Musik und alles, was nach Einbruch der Dunkelheit warm wirken soll. Dunkle Mischungen zeigen leicht Banding, lies also [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) vor dem Export.

- Glut: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Kaminfeuer: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Straßenlaterne auf Marine: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Kohle und Kupfer: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Horizontglühen: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Ein oranges Licht, viel Dunkel. Der Grund macht die Stimmung, das Orange muss nur glühen.

## Farben, die zu einem Orangeverlauf passen

Orange hat zwei Arten guter Partner. Nachbarn wie Gelb, Rosa und Rot gehen direkt in es über. Gegenspieler wie tiefes Blau und Petrol lassen es vibrieren, sollten aber als Akzent neben dem Orange stehen, nicht in derselben Mischung, weil der Mittelpunkt zwischen ihnen grau wird. [Matschige Verläufe](https://gradiently.design/de/guide/muddy-gradients) erklärt, warum, und [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors) zeigt, wie du den Sog sicher nutzt.

- Creme: #fff7ed
- Aprikose: #fdba74
- Mandarine: #f97316
- Rost: #9a3412
- Rindentinte: #431407
- Tiefblauer Akzent: #1e3a8a
- Petrol-Akzent: #0f766e

Eine funktionierende Orange-Palette: ein Cremegrund, drei Orangetöne, ein dunkles Braun für Schrift und zwei kühle Akzente, getrennt von der Mischung gehalten.

## Text auf Orangeverläufen

Hier scheitern die meisten Orange-Designs. Weiß auf leuchtender Mandarine wirkt kräftig, hat aber ein Kontrastverhältnis von etwa 2,8 zu 1, weit unter den 4,5 zu 1, die WCAG für Fließtext verlangt. Fast Schwarz auf demselben Orange erreicht über 6 zu 1. Die Regel ist einfach: dunkle Schrift auf hellen und leuchtenden Orangetönen, weiße Schrift erst ab Brandorange abwärts. Die vollständige Methode steht in [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility).

| Hintergrund | Weißer Text | Dunkler Text #1c1917 |
| --- | --- | --- |
| Aprikose `#fdba74` | Fällt durch | Besteht locker |
| Mandarine `#f97316` | Etwa 2,8:1, fällt durch | Etwa 6,2:1, besteht |
| Tiefes Orange `#ea580c` | Etwa 3,6:1, nur für großen Text | Besteht |
| Brandorange `#c2410c` | Etwa 5,2:1, besteht | Schwach |
| Rost `#9a3412` | Etwa 7,3:1, besteht | Fällt durch |

Kontrast gemessen an flacher Farbe. Teste bei einem Verlauf den hellsten Punkt hinter deinen Worten.

Ein Bäckerei-Sale-Post mit warmem Orangeverlauf direkt hinter der Überschrift, die schwer zu lesen ist

Wenn das hellste Orange direkt hinter der Überschrift läuft, beginnen die Worte mit der Farbe zu kämpfen.

Derselbe Bäckerei-Sale-Post mit einer ruhigeren, tieferen Fläche des Verlaufs hinter klar lesbarer Überschrift

Derselbe Post mit einer ruhigeren Fläche hinter den Worten und dafür gewählter Schriftfarbe.

Gradiently übernimmt diesen Teil für dich. Ein Mark weiß, wo die Worte stehen: Er verschiebt seinen ruhigsten Bereich dahinter, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass ein oranges Design in jeder Größe lesbar bleibt, ohne Kästen oder Schatten.

## Orangeverlauf in CSS

Jeder Code oben ist ein einzelner CSS-Wert, den du in `background` einfügen kannst. Für einen Abschnitt, der Wärme und Tiefe braucht, schichte ein radiales Licht über eine lineare Basis und setze immer eine einfarbige Ersatzfarbe. Lies [lineare CSS-Verläufe](https://gradiently.design/de/guide/css-linear-gradient) für die vollständige Syntax.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Ein helles Aprikosenlicht über einer Basis von Mandarine zu Rost. Setze die Überschrift tief und links, wo die Farbe am tiefsten ist.

Wenn du einen Orange-Look willst, den sonst niemand postet, stöbere im Markt nach warmen Marks: Suche Wörter wie „Brandorange“ oder „Aprikose“, gestalte kostenlos mit jedem freien und sichere ihn dir, wenn er zu deiner Marke wird.

## FAQ

### Welche Farben passen gut zu einem Orangeverlauf?

Gelb, Rosa, Rot und Braun gehen direkt in Orange über. Tiefes Blau und Petrol sind starke Akzente, halte sie aber neben dem Orange statt in derselben Mischung.

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

Es gibt keinen einzigen offiziellen Code, aber `#c2410c` und `#cc5500` sind beide weit verbreitet. Ein Brandorange-Verlauf wie `linear-gradient(135deg, #ea580c, #9a3412)` gibt ihm Tiefe.

### Kann ich weißen Text auf einen Orangeverlauf setzen?

Nur auf die dunkleren Orangetöne. Weiß auf leuchtender Mandarine fällt beim Kontrast durch, nimm dort also fast Schwarz und spare weiße Schrift für Brandorange, Rost und dunkler auf.

### Warum sieht mein Orange-Blau-Verlauf in der Mitte grau aus?

Orange und Blau liegen sich im Farbkreis gegenüber, daher verlieren die Farben dazwischen Sättigung. Füge zwischen ihnen einen Stopp in Rosa oder Lila hinzu oder halte sie als getrennte Flächen.

### Was sagt ein Orangeverlauf über eine Marke aus?

Orange wirkt meist warm, freundlich, verspielt und erschwinglich. Dunklere Brandorange-Versionen verschieben das Richtung Handwerk und Selbstsicherheit.