Dégradé Old Guava

Un dégradé CSS linéaire de 3 couleurs, de #8A362B à #AA97F2, interpolé en OKLCH pour que le milieu reste vif.

ChaudsRougesViolets

Étapes

HEXRGBOKLCHPosition
#8A362B rgb(138, 54, 43) oklch(44.8% 0.117 29.9) 0%
#EBA2D0 rgb(235, 162, 208) oklch(79.7% 0.104 341.5) 50%
#AA97F2 rgb(170, 151, 242) oklch(72.9% 0.131 292.4) 100%

CSS

La première déclaration est un dégradé sRGB simple, pour tous les navigateurs. La seconde interpole en OKLCH, ce qui garde le milieu aussi vif que les extrémités.

background: linear-gradient(0deg, #8A362B, #EBA2D0, #AA97F2);
background: linear-gradient(0deg in oklch, #8A362B, #EBA2D0, #AA97F2);

Tailwind CSS v4

bg-linear-0/oklch from-[#8A362B] via-[#EBA2D0] to-[#AA97F2]

Faites-la vôtre

Modifiez les étapes, l’angle et le type dans le Créateur de dégradés, ou transformez les étapes en palette.