Dégradé Hazy Lighthouse

Un dégradé CSS linéaire de 3 couleurs, de #00386B à #9BECC2, interpolé en OKLCH pour que le milieu reste vif.

OcéanFroidsBleu-vertBleus

Étapes

HEXRGBOKLCHPosition
#00386B rgb(0, 56, 107) oklch(34% 0.103 252.5) 0%
#008C9E rgb(0, 140, 158) oklch(58.7% 0.102 210.6) 50%
#9BECC2 rgb(155, 236, 194) oklch(87.9% 0.099 160.8) 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, #00386B, #008C9E, #9BECC2);
background: linear-gradient(0deg in oklch, #00386B, #008C9E, #9BECC2);

Tailwind CSS v4

bg-linear-0/oklch from-[#00386B] via-[#008C9E] to-[#9BECC2]

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.