Farbverlauf Hazy Clover

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

OrangeTürkis

Stopps

HEXRGBOKLCHPosition
#00C4B5 rgb(0, 196, 181) oklch(73.8% 0.13 185.2) 0%
#B1C96E rgb(177, 201, 110) oklch(79.8% 0.12 121.3) 50%
#D27100 rgb(210, 113, 0) oklch(64.6% 0.155 57.6) 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(90deg, #00C4B5, #B1C96E, #D27100);
background: linear-gradient(90deg in oklch, #00C4B5, #B1C96E, #D27100);

Tailwind CSS v4

bg-linear-90/oklch from-[#00C4B5] via-[#B1C96E] to-[#D27100]

Mach sie zu deiner

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