# Gelbverlauf: leuchtende Codes, die nicht ins Grüne kippen

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

Gelb ist die Farbe, die einen Verlauf am häufigsten verrät: ein falscher Stopp, und aus Sonnenschein wird Limette, aus Gold wird Khaki. Hier steht, warum das passiert, und eine Reihe von Codes, die durchgehend warm bleiben.

## The short version

- Ein Gelbverlauf wird grün, wenn er Richtung Cyan, Petrol oder Blau läuft, denn die Farben zwischen Gelb und Blau führen durch Grün.
- Dunkles Gelb driftet Richtung Oliv und Khaki, vertiefe Gelb deshalb mit Bernstein, Orange oder Braun statt mit Grau oder Schwarz.
- Gelb bleibt am sonnigsten, wenn seine anderen Stopps warm tendieren: Creme, Pfirsich, Orange, Rosa oder Gold.
- Weißer Text funktioniert auf Gelb fast nie, fast Schwarz oder tiefes Braun ist weit besser lesbar.
- Um Gelb und Blau in einer Mischung zu verbinden, setze Weiß, Rosa oder Violett dazwischen, damit der Mittelpunkt nie auf Grün landet.

Ein **Gelbverlauf** wirkt hell und fröhlich, wenn jeder Stopp warm tendiert: Creme, Butter, Zitrone, Gold, Orange. Er geht auf zwei vorhersehbare Arten schief. Mische ihn Richtung Blau oder Petrol, und die Mitte wird grün, dunkle ihn mit Grau ab, und er wird oliv. Halte den Farbton auf der warmen Seite von Gelb, vertiefe ihn mit Bernstein statt mit Schwarz, und er bleibt durchgehend Sonnenschein. Die Codes unten beruhen auf dieser Regel.

## Warum Gelbverläufe grün oder matschig werden

Gelb liegt im Farbkreis direkt neben Grün, viel näher, als die meisten erwarten. Das macht es in drei Situationen anfällig.

- **Mischen Richtung kühler Farben.** Zwischen Gelb und Cyan, Petrol oder Blau muss der Browser durch Grün hindurch. Eine Mischung aus sonnigem Gelb zu Himmelblau bekommt in der Mitte einen Limetten- oder Salbeistreifen.
- **Abdunkeln mit Schwarz oder Grau.** Unsere Augen lesen ein dunkles, wenig gesättigtes Gelb als Oliv oder Khaki statt als „dunkles Gelb“. Es gibt kein tiefes Gelb, das noch gelb aussieht.
- **Start bei einer Zitrone, die schon ins Grüne neigt.** Säuerliche Zitronentöne wie `#e4f04a` wirken allein frisch, ziehen aber jeden benachbarten Stopp Richtung Limette.

### Wird grün oder oliv

- Gelb direkt in Himmelblau oder Petrol
- Gelb mit Grau oder Schwarz abgedunkelt
- Eine kühle Zitrone als hellster Stopp
- Gelb zu Grün ohne warmen Stopp

### Bleibt sonnig

- Gelb in Creme, Pfirsich, Orange oder Rosa
- Gelb mit Bernstein und Braun vertieft
- Ein warmes Gelb wie `#facc15` als hellster Stopp
- Weiß oder Rosa zwischen Gelb und Blau gesetzt

Dasselbe Problem mit der grauen Mitte betrifft alle gegenüberliegenden Farben, und [matschige Verläufe](https://gradiently.design/de/guide/muddy-gradients) behandelt es allgemein. Gelb zeigt es nur zuerst, weil Grün so nah ist.

## Leuchtende Gelbverlauf-Codes

Das sind die lauten: Sommer, Sale-Banner, Kindermarken, Festivals, Warnschilder, schön gemacht. Jeder kombiniert Gelb mit einem wärmeren Partner, damit Bewegung entsteht, ohne ins Grüne zu driften.

- Zitronensorbet: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Sonnenblume: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Gelb zu Mandarine: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Rosa Limonade: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Mittagssonne: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Hitzewelle: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Sechs leuchtende Gelbverläufe. Jede Partnerfarbe ist wärmer als das Gelb, und das hält sie sauber.

Leuchtendes Gelb ermüdet in großen Mengen, nutze diese also auf Posts und Bannern statt auf einer ganzen Website. Auf einer Story mit 1080×1920 gibt eine Gelbmischung, die unten zu Orange ausblendet, dem Auge einen Landeplatz und hält den hellsten Teil nahe dem Überschriftenbereich oben.

## Helle Gelbverläufe: Butter und Creme

Blasses Gelb verhält sich wie warmes Papier. Es ergibt hervorragende Hintergründe für Speisekarten, Einladungen, Newsletter und alles mit viel Lesestoff, weil dunkle Schrift darauf bequem sitzt. Halte mindestens einen Stopp nahe Weiß, damit das Gelb wie Licht wirkt, nicht wie eine Tönung über allem.

- Cremepapier: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Butter: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Vanillecreme und Pfirsich: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Fensterlicht: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Sanfte Gelbtöne für lange Texte und sanfte Marken. Sie passen gut zu Schrift in Anthrazit, Braun und tiefem Grün.

## Goldene und dunkle Gelbverläufe ohne Oliv

Damit Gelb satt wirkt, dunkle es nicht ab. Verschiebe es. Bewege die tieferen Stopps Richtung Bernstein, Ocker und Braun, und Gelb wird zu Gold, Honig und Senf statt zu Khaki. Speziell für metallische Finishs zeigt [Goldverläufe](https://gradiently.design/de/guide/gold-gradient-design), wie du den Glanz vortäuschst.

- Honig: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Senf: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Gebürstetes Gold: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Gold auf Dunkel: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Jeder tiefe Stopp bewegt sich Richtung Bernstein oder Braun. Das Ergebnis wirkt wie Gold statt wie Oliv.

> **Achte auf die Schattenfarbe** Wenn du ein gelbes Objekt in einem Design mit einer grauen oder schwarzen Überlagerung beschattest, sieht es oliv aus. Beschatte Gelb stattdessen mit durchscheinendem Bernstein oder Braun.

## Gelb-Blau-Verläufe ohne grüne Mitte

Gelb und Blau sind eine klassische Paarung, aber eine direkte Mischung dazwischen erzeugt ein grünes Band. Du hast drei gute Optionen: einen hellen Stopp dazwischensetzen, die Mischung über Rosa und Violett führen oder die beiden Farben als Flächen statt als Mischung getrennt halten.

- Vermeiden: Limettenmitte: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Über Creme: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Über Rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Gelbes Licht auf Marine: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Die erste Mischung zeigt das Problem. Die anderen drei verbinden Gelb und Blau, ohne je durch Grün zu laufen.

Im modernen CSS kannst du den Browser auch bitten, den langen Weg um den Farbkreis zu nehmen. Die Interpolation in OKLCH mit `longer hue` schickt Gelb über Orange, Rosa und Violett zu Blau statt über Grün. Unterstützung und Syntax behandelt [CSS-Verläufe in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

Der lange Weg um den Farbtonkreis vermeidet Grün. Behalte den handgebauten Ersatz für Browser ohne Farbraum-Interpolation.

## Text auf einem Gelbverlauf

Gelb ist die hellste gesättigte Farbe überhaupt, deshalb verschwindet weiße Schrift darauf. Weiß auf `#facc15` misst etwa 1,5 zu 1, während ein tiefes Braun wie `#422006` auf demselben Gelb über 9 zu 1 misst. Nutze fast überall dunkle Schrift und spare Weiß für die tiefsten Goldtöne. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) hat die Schwellenwerte.

| Hintergrund | Weißer Text | Brauner Text #422006 |
| --- | --- | --- |
| Zitrone `#fde047` | Fällt klar durch | Etwa 11:1 |
| Sonnenblume `#facc15` | Etwa 1,5:1, fällt durch | Etwa 9,5:1 |
| Dunkles Gold `#ca8a04` | Etwa 2,9:1, fällt durch | Besteht |
| Ocker `#a16207` | Etwa 4,9:1, besteht | Schwach |
| Bronze `#854d0e` | Etwa 6,9:1, besteht | Fällt durch |

Messwerte für flache Farbe. Prüfe bei einem Verlauf den hellsten Teil hinter jeder Textzeile.

Ein Hofladen-Post mit dunkelbrauner Überschrift auf einem warmen Gelb-Orange-Verlauf als Hintergrund

Dunkle, warme Schrift auf sonnigem Gelb. Sie ist sofort lesbar und bewahrt die fröhliche Stimmung.

In Gradiently trifft Automatische Farbe diese Entscheidung für dich und wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass ein gelbes Design nicht bei jeder Größenänderung eine manuelle Kontrollprüfung braucht. Wenn Gelb Teil deiner Identität ist, behandelt [Bedeutung der Farbe Gelb](https://gradiently.design/de/guide/yellow-color-meaning), was es signalisiert, und [Orangeverläufe](https://gradiently.design/de/guide/orange-gradient) sind sein natürlicher Nachbar.

## FAQ

### Warum sieht mein Gelbverlauf grün aus?

Entweder läuft er Richtung einer kühlen Farbe wie Blau oder Petrol, oder das Gelb selbst neigt zu Zitrone. Nutze wärmere Partnerstopps wie Orange, Rosa oder Creme.

### Wie mache ich einen dunklen Gelbverlauf, der nicht oliv ist?

Vertiefe Gelb mit Bernstein, Ocker und Braun statt mit Grau oder Schwarz. Dadurch wird es zu Gold oder Honig statt zu Khaki.

### Welche Textfarbe passt auf einen gelben Hintergrund?

Fast Schwarz, Anthrazit oder tiefes Braun. Weißer Text fällt auf fast jedem leuchtenden Gelb beim Kontrast durch.

### Wie mische ich Gelb und Blau in einem Verlauf?

Setze Creme, Weiß oder Rosa dazwischen oder interpoliere in OKLCH mit `longer hue`, damit die Mischung durch warme Farben statt durch Grün läuft.

### Was ist ein guter Gelbverlauf-CSS-Code?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` ist ein verlässliches warmes Gelb, das nie ins Grüne driftet.