Farbverlauf Easy Sandbar

Ein CSS-Farbverlauf (linear) aus 4 Farben, von #002839 bis #6AF5C2, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

OzeanKühlTürkis

Stopps

HEXRGBOKLCHPosition
#002839 rgb(0, 40, 57) oklch(26% 0.053 231.9) 0%
#005D65 rgb(0, 93, 101) oklch(43.6% 0.075 205) 33%
#00B29E rgb(0, 178, 158) oklch(68.5% 0.123 181) 67%
#6AF5C2 rgb(106, 245, 194) oklch(88% 0.142 166.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(0deg, #002839, #005D65, #00B29E, #6AF5C2);
background: linear-gradient(0deg in oklch, #002839, #005D65, #00B29E, #6AF5C2);

Tailwind CSS v4

bg-linear-[0deg_in_oklch,#002839,#005D65,#00B29E,#6AF5C2]

Mach sie zu deiner

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