Farbverlauf Mellow Sapphire

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

KühlBlauViolett

Stopps

HEXRGBOKLCHPosition
#C0A5FF rgb(192, 165, 255) oklch(77.9% 0.128 297.1) 0%
#2A93FF rgb(42, 147, 255) oklch(66.1% 0.185 253.3) 50%
#006E7C rgb(0, 110, 124) oklch(49.3% 0.085 210.1) 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(200deg, #C0A5FF, #2A93FF, #006E7C);
background: linear-gradient(200deg in oklch, #C0A5FF, #2A93FF, #006E7C);

Tailwind CSS v4

bg-linear-200/oklch from-[#C0A5FF] via-[#2A93FF] to-[#006E7C]

Mach sie zu deiner

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