Farbverlauf Slow Sunset Strip

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #342F94 bis #D9D722, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

SonnenuntergangLebhaftRotGelb

Stopps

HEXRGBOKLCHPosition
#342F94 rgb(52, 47, 148) oklch(38% 0.16 277.8) 0%
#EA594A rgb(234, 89, 74) oklch(65.2% 0.182 28.9) 50%
#D9D722 rgb(217, 215, 34) oklch(85.3% 0.178 108.9) 100%

CSS

Die erste Deklaration ist ein einfacher sRGB-Farbverlauf für jeden Browser. Die zweite interpoliert in OKLCH, wodurch die Mitte so lebendig bleibt wie die Enden.

background: linear-gradient(120deg, #342F94, #EA594A, #D9D722);
background: linear-gradient(120deg in oklch, #342F94, #EA594A, #D9D722);

Tailwind CSS v4

bg-linear-120/oklch from-[#342F94] via-[#EA594A] to-[#D9D722]

Mach sie zu deiner

Ändere Stopps, Winkel und Typ im Farbverlauf-Generator oder mach aus den Stopps eine Palette.