Farbverlauf Little Blueprint

Ein CSS-Farbverlauf (linear) aus 3 Farben, von #3993C7 bis #EAC8FF, in OKLCH interpoliert, damit die Mitte lebendig bleibt.

PastellKühlBlauViolett

Stopps

HEXRGBOKLCHPosition
#3993C7 rgb(57, 147, 199) oklch(63.3% 0.115 238) 0%
#F4F6FF rgb(244, 246, 255) oklch(97.4% 0.012 276.1) 50%
#EAC8FF rgb(234, 200, 255) oklch(87.9% 0.083 312.4) 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, #3993C7, #F4F6FF, #EAC8FF);
background: linear-gradient(0deg in oklch, #3993C7, #F4F6FF, #EAC8FF);

Tailwind CSS v4

bg-linear-0/oklch from-[#3993C7] via-[#F4F6FF] to-[#EAC8FF]

Mach sie zu deiner

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