Farbverlauf Frosted Brick

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

PastellViolett

Stopps

HEXRGBOKLCHPosition
#F2C8FF rgb(242, 200, 255) oklch(88.6% 0.087 318.1) 0%
#FFD4BB rgb(255, 212, 187) oklch(90% 0.059 51.9) 50%
#CBD2A7 rgb(203, 210, 167) oklch(84.7% 0.058 115.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: linear-gradient(225deg, #F2C8FF, #FFD4BB, #CBD2A7);
background: linear-gradient(225deg in oklch, #F2C8FF, #FFD4BB, #CBD2A7);

Tailwind CSS v4

bg-linear-225/oklch from-[#F2C8FF] via-[#FFD4BB] to-[#CBD2A7]

Mach sie zu deiner

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