Farbverlauf Painted Brick

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

OrangeTürkis

Stopps

HEXRGBOKLCHPosition
#C29FFF rgb(194, 159, 255) oklch(77% 0.138 300) 0%
#00CBAF rgb(0, 203, 175) oklch(75.3% 0.139 178) 50%
#CC6B00 rgb(204, 107, 0) oklch(62.8% 0.153 56.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(160deg, #C29FFF, #00CBAF, #CC6B00);
background: linear-gradient(160deg in oklch, #C29FFF, #00CBAF, #CC6B00);

Tailwind CSS v4

bg-linear-160/oklch from-[#C29FFF] via-[#00CBAF] to-[#CC6B00]

Mach sie zu deiner

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