Farbverlauf Hazy Sunflower

Ein CSS-Farbverlauf (linear) aus 4 Farben, von #E87BA7 bis #00A7DB, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

RegenbogenOrange

Stopps

HEXRGBOKLCHPosition
#E87BA7 rgb(232, 123, 167) oklch(71.7% 0.142 355.7) 0%
#D79000 rgb(215, 144, 0) oklch(70.7% 0.15 74.1) 33%
#48A867 rgb(72, 168, 103) oklch(65.7% 0.133 151.6) 67%
#00A7DB rgb(0, 167, 219) oklch(68.2% 0.135 229.5) 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(270deg, #E87BA7, #D79000, #48A867, #00A7DB);
background: linear-gradient(270deg in oklch, #E87BA7, #D79000, #48A867, #00A7DB);

Tailwind CSS v4

bg-linear-[270deg_in_oklch,#E87BA7,#D79000,#48A867,#00A7DB]

Mach sie zu deiner

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