Farbverlauf Wandering Matcha

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

PastellGelbTürkis

Stopps

HEXRGBOKLCHPosition
#F4E7B2 rgb(244, 231, 178) oklch(92.6% 0.07 95.9) 0%
#93EDDD rgb(147, 237, 221) oklch(88.5% 0.09 181.6) 50%
#EEEDFF rgb(238, 237, 255) oklch(95.2% 0.024 288.5) 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(270deg, #F4E7B2, #93EDDD, #EEEDFF);
background: linear-gradient(270deg in oklch, #F4E7B2, #93EDDD, #EEEDFF);

Tailwind CSS v4

bg-linear-270/oklch from-[#F4E7B2] via-[#93EDDD] to-[#EEEDFF]

Mach sie zu deiner

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