Farbverlauf Lazy Plum

Ein CSS-Farbverlauf (radial) aus 3 Farben, von #FF8CCE bis #00457B, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

Mesh-OptikViolettRosa

Stopps

HEXRGBOKLCHPosition
#FF8CCE rgb(255, 140, 206) oklch(78.4% 0.158 345.9) 0%
#8268B6 rgb(130, 104, 182) oklch(57.6% 0.119 297.9) 50%
#00457B rgb(0, 69, 123) oklch(38.5% 0.109 250.2) 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 50% 100%, #FF8CCE, #8268B6, #00457B);
background: radial-gradient(circle at 50% 100% in oklch, #FF8CCE, #8268B6, #00457B);

Tailwind CSS v4

bg-radial-[at_50%_100%]/oklch from-[#FF8CCE] via-[#8268B6] to-[#00457B]

Mach sie zu deiner

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