Farbverlauf Winter Rosewater

Ein CSS-Farbverlauf (linear) aus 4 Farben, von #F69AFD bis #8ECBFF, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

RegenbogenViolett

Stopps

HEXRGBOKLCHPosition
#F69AFD rgb(246, 154, 253) oklch(81.3% 0.166 324.4) 0%
#E88E40 rgb(232, 142, 64) oklch(72.7% 0.142 58.3) 33%
#6CDC8E rgb(108, 220, 142) oklch(80.9% 0.151 151.5) 67%
#8ECBFF rgb(142, 203, 255) oklch(82% 0.097 245.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(120deg, #F69AFD, #E88E40, #6CDC8E, #8ECBFF);
background: linear-gradient(120deg in oklch, #F69AFD, #E88E40, #6CDC8E, #8ECBFF);

Tailwind CSS v4

bg-linear-[120deg_in_oklch,#F69AFD,#E88E40,#6CDC8E,#8ECBFF]

Mach sie zu deiner

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