Farbverlauf Inky Guava

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #5F5373 bis #2F001C, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

DunkelViolettRosa

Stopps

HEXRGBOKLCHPosition
#5F5373 rgb(95, 83, 115) oklch(46.7% 0.053 301.6) 0%
#572D5A rgb(87, 45, 90) oklch(37% 0.09 324.7) 50%
#2F001C rgb(47, 0, 28) oklch(20.1% 0.084 349.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, #5F5373, #572D5A, #2F001C);
background: linear-gradient(180deg in oklch, #5F5373, #572D5A, #2F001C);

Tailwind CSS v4

bg-linear-180/oklch from-[#5F5373] via-[#572D5A] to-[#2F001C]

Mach sie zu deiner

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