Farbverlauf Little Lavender

Ein CSS-Farbverlauf (radial) aus 3 Farben, von #FFB2E5 bis #002F40, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

Mesh-OptikViolettRosa

Stopps

HEXRGBOKLCHPosition
#FFB2E5 rgb(255, 178, 229) oklch(85.1% 0.11 339.9) 0%
#7471BA rgb(116, 113, 186) oklch(58.3% 0.11 284.3) 50%
#002F40 rgb(0, 47, 64) oklch(28.5% 0.056 228.7) 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: radial-gradient(circle at 70% 25%, #FFB2E5, #7471BA, #002F40);
background: radial-gradient(circle at 70% 25% in oklch, #FFB2E5, #7471BA, #002F40);

Tailwind CSS v4

bg-radial-[at_70%_25%]/oklch from-[#FFB2E5] via-[#7471BA] to-[#002F40]

Mach sie zu deiner

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