Farbverlauf Wandering Iris

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #A43338 bis #50A0FF, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

RotBlau

Stopps

HEXRGBOKLCHPosition
#A43338 rgb(164, 51, 56) oklch(49.1% 0.148 22.1) 0%
#D69FE7 rgb(214, 159, 231) oklch(77.9% 0.116 318) 50%
#50A0FF rgb(80, 160, 255) oklch(69.9% 0.161 254.3) 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(180deg, #A43338, #D69FE7, #50A0FF);
background: linear-gradient(180deg in oklch, #A43338, #D69FE7, #50A0FF);

Tailwind CSS v4

bg-linear-180/oklch from-[#A43338] via-[#D69FE7] to-[#50A0FF]

Mach sie zu deiner

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