Farbverlauf Painted Sandbar

Ein CSS-Farbverlauf (linear) aus 4 Farben, von #55F4E4 bis #26238A, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

OzeanKühlTürkisBlau

Stopps

HEXRGBOKLCHPosition
#55F4E4 rgb(85, 244, 228) oklch(88.1% 0.133 185.5) 0%
#00B9C9 rgb(0, 185, 201) oklch(71.7% 0.123 205.8) 33%
#3A6ECE rgb(58, 110, 206) oklch(55.4% 0.159 261.4) 67%
#26238A rgb(38, 35, 138) oklch(34.1% 0.164 274.7) 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(200deg, #55F4E4, #00B9C9, #3A6ECE, #26238A);
background: linear-gradient(200deg in oklch, #55F4E4, #00B9C9, #3A6ECE, #26238A);

Tailwind CSS v4

bg-linear-[200deg_in_oklch,#55F4E4,#00B9C9,#3A6ECE,#26238A]

Mach sie zu deiner

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