Farbverlauf Secret Matcha

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #100F00 bis #2C6C5A, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

DunkelGrünTürkis

Stopps

HEXRGBOKLCHPosition
#100F00 rgb(16, 15, 0) oklch(16.4% 0.035 107) 0%
#0A3400 rgb(10, 52, 0) oklch(28.5% 0.091 139.8) 50%
#2C6C5A rgb(44, 108, 90) oklch(48.4% 0.072 172) 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(0deg, #100F00, #0A3400, #2C6C5A);
background: linear-gradient(0deg in oklch, #100F00, #0A3400, #2C6C5A);

Tailwind CSS v4

bg-linear-0/oklch from-[#100F00] via-[#0A3400] to-[#2C6C5A]

Mach sie zu deiner

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