Farbverlauf Vivid Iris

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

LebhaftViolettRosa

Stopps

HEXRGBOKLCHPosition
#FF7DBB rgb(255, 125, 187) oklch(75.6% 0.171 352.1) 0%
#7178FF rgb(113, 120, 255) oklch(63.7% 0.197 277) 50%
#00B3BD rgb(0, 179, 189) oklch(69.8% 0.119 201.9) 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, #FF7DBB, #7178FF, #00B3BD);
background: linear-gradient(200deg in oklch, #FF7DBB, #7178FF, #00B3BD);

Tailwind CSS v4

bg-linear-200/oklch from-[#FF7DBB] via-[#7178FF] to-[#00B3BD]

Mach sie zu deiner

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