Farbverlauf Mellow Arctic

Ein CSS-Farbverlauf (konisch) aus 3 Farben, von #00BCA6 bis #BD72A0, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

TürkisBlau

Stopps

HEXRGBOKLCHPosition
#00BCA6 rgb(0, 188, 166) oklch(71.3% 0.129 180.4) 0%
#608DE0 rgb(96, 141, 224) oklch(64.8% 0.134 261.8) 50%
#BD72A0 rgb(189, 114, 160) oklch(64.8% 0.111 343.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: conic-gradient(from 270deg at center, #00BCA6, #608DE0, #BD72A0, #00BCA6);
background: conic-gradient(from 270deg at center in oklch, #00BCA6, #608DE0, #BD72A0, #00BCA6);

Tailwind CSS v4

bg-conic-[from_270deg_at_center_in_oklch,#00BCA6,#608DE0,#BD72A0,#00BCA6]

Mach sie zu deiner

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