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

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

So wirkt ein Regenbogen-Farbverlauf gestaltet

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

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.

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.

.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));
}

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.

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 geht die Möglichkeiten durch.

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
• Pride-Kampagnen, bei denen die Regenbogenflagge ihre eigene Bedeutung und ihre eigenen sechs Streifen hat, also setz sie bewusst ein und nicht als Dekoration

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.