Farbverlauf Lazy Spruce

Ein CSS-Farbverlauf (konisch) aus 3 Farben, von #10B062 bis #C1CCFF, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

GrünTürkis

Stopps

HEXRGBOKLCHPosition
#10B062 rgb(16, 176, 98) oklch(66.6% 0.165 153.8) 0%
#00B9D6 rgb(0, 185, 214) oklch(72.3% 0.127 214.2) 50%
#C1CCFF rgb(193, 204, 255) oklch(85.4% 0.072 275.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: conic-gradient(from 0deg at center, #10B062, #00B9D6, #C1CCFF, #10B062);
background: conic-gradient(from 0deg at center in oklch, #10B062, #00B9D6, #C1CCFF, #10B062);

Tailwind CSS v4

bg-conic-[from_0deg_at_center_in_oklch,#10B062,#00B9D6,#C1CCFF,#10B062]

Mach sie zu deiner

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