Farbverlauf Little High Noon

Ein CSS-Farbverlauf (linear) aus 4 Farben, von #9D7F71 bis #DFF2FF, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

HimmelViolettRosa

Stopps

HEXRGBOKLCHPosition
#9D7F71 rgb(157, 127, 113) oklch(62.1% 0.043 46.4) 0%
#D699B7 rgb(214, 153, 183) oklch(75% 0.082 348.3) 33%
#C9B3FC rgb(201, 179, 252) oklch(81.1% 0.104 297.9) 67%
#DFF2FF rgb(223, 242, 255) oklch(95.1% 0.027 237.6) 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(315deg, #9D7F71, #D699B7, #C9B3FC, #DFF2FF);
background: linear-gradient(315deg in oklch, #9D7F71, #D699B7, #C9B3FC, #DFF2FF);

Tailwind CSS v4

bg-linear-[315deg_in_oklch,#9D7F71,#D699B7,#C9B3FC,#DFF2FF]

Mach sie zu deiner

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