Farbverlauf Old Guava

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #8A362B bis #AA97F2, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

WarmRotViolett

Stopps

HEXRGBOKLCHPosition
#8A362B rgb(138, 54, 43) oklch(44.8% 0.117 29.9) 0%
#EBA2D0 rgb(235, 162, 208) oklch(79.7% 0.104 341.5) 50%
#AA97F2 rgb(170, 151, 242) oklch(72.9% 0.131 292.4) 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(0deg, #8A362B, #EBA2D0, #AA97F2);
background: linear-gradient(0deg in oklch, #8A362B, #EBA2D0, #AA97F2);

Tailwind CSS v4

bg-linear-0/oklch from-[#8A362B] via-[#EBA2D0] to-[#AA97F2]

Mach sie zu deiner

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