Dégradé Mellow Sapphire

Un dégradé CSS linéaire de 3 couleurs, de #C0A5FF à #006E7C, interpolé en OKLCH pour que le milieu reste vif.

FroidsBleusViolets

Étapes

HEXRGBOKLCHPosition
#C0A5FF rgb(192, 165, 255) oklch(77.9% 0.128 297.1) 0%
#2A93FF rgb(42, 147, 255) oklch(66.1% 0.185 253.3) 50%
#006E7C rgb(0, 110, 124) oklch(49.3% 0.085 210.1) 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(200deg, #C0A5FF, #2A93FF, #006E7C);
background: linear-gradient(200deg in oklch, #C0A5FF, #2A93FF, #006E7C);

Tailwind CSS v4

bg-linear-200/oklch from-[#C0A5FF] via-[#2A93FF] to-[#006E7C]

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.