# Regenbogen-Farbverläufe, die nicht nach Standard-Preset aussehen

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

Der Standard-Regenbogen hat einen grellen gelben Streifen und ein dunkelblaues Loch. Gleiche die Helligkeit an, wähle deinen Bogen, und das Spektrum wird zu einem der fröhlichsten Werkzeuge, die du hast.

## The short version

- Ein Regenbogen-Farbverlauf läuft durch die Farbtöne des Spektrums, und die Standardversion wirkt billig, weil ihre Farben sehr unterschiedlich hell sind.
- In OKLCH hat reines Gelb eine Helligkeit von etwa 97 %, reines Blau liegt bei rund 45 %, deshalb zeigt ein Standard-Regenbogen einen hellen Streifen und ein dunkles Band.
- Regenbogen-Farbverläufe wirken gestaltet, wenn jeder Stopp eine ähnliche Helligkeit hat, die Buntheit etwas sinkt und du nur den Teil des Spektrums nutzt, den du brauchst.
- CSS kann einen Regenbogen für dich mischen, mit `linear-gradient(in oklch longer hue, ...)`, das zwischen zwei Farben einmal ganz um den Farbkreis läuft.
- Text auf einem Regenbogen braucht eine ruhige Stelle oder ein Band dahinter, weil sich der Kontrast über den ganzen Verlauf ändert.

Ein **Regenbogen-Farbverlauf** läuft durch die Farbtöne des Spektrums, von Rot über Orange, Gelb, Grün und Blau bis Violett. Die Version, die die meisten Tools liefern, sieht nach Standard aus, weil sie in der Helligkeit springt: ein greller gelber Streifen, ein dunkelblaues Band und harte Kanten dazwischen. Ein Regenbogen, der gestaltet wirkt, hält jede Farbe auf ähnlicher Helligkeit, nutzt etwas weniger Sättigung und deckt oft nur einen Teil des Spektrums ab.

Dieser Leitfaden zeigt, warum das Preset falsch aussieht, drei Wege, es zu beheben, Regenbogen-Codes zum Kopieren und das CSS, das in modernen Browsern weiche Regenbögen erzeugt. Sind dir Farbton, Helligkeit und Buntheit neu, erklärt [Farbcodes erklärt](https://gradiently.design/de/guide/color-codes-explained) sie zuerst.

## Warum der Standard-Regenbogen billig wirkt

Der klassische Regenbogen entsteht in HSL, indem man den Farbton weiterschiebt und Sättigung und Helligkeit festhält. Die Helligkeit in HSL ist eine Formel, kein Maß dafür, wie hell Farben wirken. Für dein Auge ist reines Gelb weit heller als reines Blau, obwohl HSL beide 50 % nennt. OKLCH misst die wahrgenommene Helligkeit, und die Zahlen zeigen das Problem deutlich.

| Farbe | Hex | HSL-Helligkeit | OKLCH-Helligkeit |
| --- | --- | --- | --- |
| Rot | `#ff0000` | 50 % | 62,8 % |
| Gelb | `#ffff00` | 50 % | 96,8 % |
| Grün | `#00ff00` | 50 % | 86,6 % |
| Cyan | `#00ffff` | 50 % | 90,5 % |
| Blau | `#0000ff` | 50 % | 45,2 % |
| Magenta | `#ff00ff` | 50 % | 70,2 % |

HSL nennt sie gleich hell. Die wahrgenommene Helligkeit reicht von 45 % bis 97 %, deshalb sieht der Standard-Regenbogen gestreift aus.

- Standard-Regenbogen in HSL: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Regenbogen mit gleicher Helligkeit: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Dieselbe Reise um den Farbkreis. Der zweite hält jeden Stopp nahe 72 % OKLCH-Helligkeit, also springt keine Farbe heraus oder versinkt.

## So wirkt ein Regenbogen-Farbverlauf gestaltet

1. **Gleiche die Helligkeit an** Wähle eine einzige wahrgenommene Helligkeit, etwa 72 % in OKLCH, und halte jeden Stopp dort. Diese eine Änderung entfernt den gelben Streifen und das blaue Loch.
2. **Senke die Buntheit etwas** Voll gesättigte Bildschirmfarben kämpfen gegeneinander. Eine Buntheit um 0,12 in OKLCH hält jeden Farbton lebendig und trotzdem innerhalb dessen, was normale Bildschirme zeigen können.
3. **Nimm einen Bogen, nicht den ganzen Kreis** Drei oder vier benachbarte Farbtöne, etwa Koralle bis Gold oder Petrol bis Violett, wirken wie eine bewusste Wahl. Das volle Spektrum wirkt wie ein Testbild, außer genau das ist gewollt.
4. **Gib ihm einen Grund** Ein Regenbogen auf Weiß wirkt wie Kinderspielzeug, derselbe Regenbogen aus Fast-Schwarz aufsteigend wirkt wie Licht durch ein Prisma. Entscheide, was du willst.
5. **Füge Textur oder Weichheit hinzu** Körnung, Unschärfe oder ein langsamer radialer Abfall machen aus Farbbändern Licht. Zur Körnung siehe [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients).

## Regenbogen-Farbverläufe zum Kopieren

Die ersten drei decken das ganze Spektrum in verschiedenen Helligkeiten ab. Die übrigen sind Bögen: ein Teil des Regenbogens, gewählt für eine Stimmung, und so funktionieren die meisten Regenbogen-Identitäten tatsächlich.

- Ausgewogenes Spektrum: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Pastell-Regenbogen: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Spektralkreis: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Bogen Sonnenaufgang: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Bogen Lagune: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Bogen Dämmerung: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisma auf Schwarz: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Perlmuttschimmer: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Acht Regenbogen-Farbverläufe. Ausgewogen und Pastell halten jeden Stopp auf einer Helligkeit, die Bögen wählen eine Ecke des Kreises, die letzten beiden nutzen das Spektrum als Licht.

## Weiche Regenbögen in CSS mit OKLCH-Farbtoninterpolation

Modernes CSS kann für dich um den Farbkreis laufen. Setzt du die Interpolation auf `oklch` und die Farbtonmethode auf `longer hue`, nimmt der Browser zwischen zwei Farben den langen Weg, also ergeben zwei Stopps mit demselben Farbton einen vollen, gleichmäßigen Regenbogen. Das funktioniert in aktuellen Versionen von Chrome, Edge, Safari und Firefox, prüfe für dein Publikum die [Kompatibilitätstabelle bei MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

```css
.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}
```

Die erste Regel zeichnet einen vollen Regenbogen aus einer einzigen Farbe. Die zweite zeichnet einen Bogen und nimmt den kürzeren Weg zwischen zwei Farbtönen.

Halte die Buntheit dabei moderat. Bei hoher Buntheit fallen manche Farbtöne, vor allem Blau und Violett, aus dem heraus, was ein normaler sRGB-Bildschirm zeigen kann, und der Browser muss sie zurückdrücken, was wieder ungleichmäßige Bänder bringt. Mehr dazu unter [weichere CSS-Farbverläufe mit OKLCH](https://gradiently.design/de/guide/css-gradient-oklch).

## Text auf einem Regenbogen-Farbverlauf

Ein Regenbogen ist der schwierigste Hintergrund für Text, weil sich der Kontrast über seine ganze Länge ändert. Dunkler Text, der über Petrol gut lesbar ist, kann über Violett verschwinden. Setz Worte auf den ruhigsten Teil, auf ein ruhiges Band oder eine Karte, oder nutze einen Pastell-Regenbogen mit dunkler Schrift und prüfe den hellsten und dunkelsten Punkt hinter jeder Zeile. [Text auf Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) geht die Möglichkeiten durch.

Ein quadratischer Post, auf dem die Worte Hallo Farbe direkt über einen Regenbogen-Farbverlauf laufen, manche Buchstaben schwerer lesbar

Ohne Hilfe kreuzen die Worte jeden Farbton, und ihr Kontrast ändert sich ständig.

Derselbe quadratische Post, bei dem der Farbverlauf hinter den Worten Hallo Farbe weicher wird, sodass der Text klar lesbar ist

Wird die Fläche hinter den Worten ruhiger, bleibt der Regenbogen fröhlich und die Zeile lesbar.

## Wo Regenbogen-Farbverläufe passen

- **Kreativ-Tools und Farbprodukte**, bei denen das Spektrum Vielfalt zeigt
- **Kindermarken und Bildung**, meist in der Pastellversion
- **Musik, Festivals und Nachtleben**, als Prisma auf dunklem Grund
- **Holografische und schillernde Looks**, als blasser Perlmuttschimmer, siehe [holografische Farbverläufe](https://gradiently.design/de/guide/holographic-gradients)
- **Pride-Kampagnen**, bei denen die Regenbogenflagge ihre eigene Bedeutung und ihre eigenen sechs Streifen hat, also setz sie bewusst ein und nicht als Dekoration

> **Wähle zuerst den Bogen** Bevor du zum vollen Spektrum greifst, frag dich, welche drei oder vier Farbtöne die Stimmung tragen. Die meisten Regenbogen-Designs, die hochwertig wirken, sind eigentlich Bögen.

Ein Gradiently Mark kann bis zu acht Farben halten, genug für einen vollen, gleichmäßigen Regenbogen mit Material und Körnung darüber. In der Forge baust du ihn Regler für Regler.

## FAQ

### Wie erstelle ich einen Regenbogen-Farbverlauf in CSS?

Nutze `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` für einen weichen, gleichmäßigen Regenbogen, mit einem Verlauf aus Hex-Stopps davor als Fallback.

### Warum hat mein Regenbogen-Farbverlauf einen hellen gelben Streifen?

Gelb wird bei gleicher HSL-Helligkeit als viel heller wahrgenommen als Blau oder Rot. Halte jeden Stopp auf einer wahrgenommenen Helligkeit, etwa 72 % in OKLCH, um den Streifen zu entfernen.

### Welche Hex-Codes hat ein Pastell-Regenbogen-Farbverlauf?

Probier `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` und `#e6c3ee`, die alle auf ähnlich hoher Helligkeit liegen.

### Kann man Text auf einen Regenbogen-Farbverlauf setzen?

Ja, aber der Kontrast ändert sich über den Verlauf. Setz Text über die ruhigste Stelle, auf ein Band oder eine Karte, oder nutze einen Pastell-Regenbogen mit dunklem Text und prüfe jeden Punkt hinter den Worten.