Farbverlauf Glowing Guava

Ein CSS-Farbverlauf (linear) aus 2 Farben, von #F68E2B bis #B12990, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

WarmLebhaftZweifarbigOrangeRosa

Stopps

HEXRGBOKLCHPosition
#F68E2B rgb(246, 142, 43) oklch(74.3% 0.163 58.2) 0%
#B12990 rgb(177, 41, 144) oklch(53.2% 0.2 339.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(0deg, #F68E2B, #B12990);
background: linear-gradient(0deg in oklch, #F68E2B, #B12990);

Tailwind CSS v4

bg-linear-0/oklch from-[#F68E2B] to-[#B12990]

Mach sie zu deiner

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