SVG with gradient fill on hover sightly darker

Question

I'm about to create a homepage with some SVG Logos on it. (Social Media Logos that turn with a smooth transition on hover from an universal color to their normal look). In the case of an Instagram logo this turn out to be a little more difficult, because of the gradient. I managed it by changing the gradient stop colors into the wanted one. But somehow this doesn't look right, how you can see the logo hasn't the same color like the other ones. (The The dark coloring also applies to the gradient) youtube and instagram logo, 2nd one tinted darker

CSS

#instagram_hover_gradient stop {
    stop-color: var(--socials-main-icon-color);
    transition: var(--socials-transition-time) cubic-bezier(var(--bez_animation));
}

#instagram_icon_svg:hover #instagram_hover_gardient_stop1 {
    stop-color: #fdf497; /*yellow but a light one*/
}

...

#instagram_icon_svg:hover #instagram_hover_gardient_stop5 {
    stop-color: #285AEB; /*blue or something like that*/
}

HTML (Instagram SVG)

<svg id="instagram_icon_svg" width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="instagram_hover_gradient" r="150%" cx="30%" cy="107%">
            <stop id="instagram_hover_gardient_stop1" stop-color="#fdf497" offset="0" />
            <stop id="instagram_hover_gardient_stop2" stop-color="#fdf497" offset="0.05" />
            <stop id="instagram_hover_gardient_stop3" stop-color="#fd5949" offset="0.45" />
            <stop id="instagram_hover_gardient_stop4" stop-color="#d6249f" offset="0.6" />
            <stop id="instagram_hover_gardient_stop5" stop-color="#285AEB" offset="0.8" />
        </radialGradient>
        <mask id="instagram-icon-mask" width="24" height="24" viewBox="0 0 24 24">
            <path id="instagram_icon_svg_path1" fill="#fff" fill-opacity="1" d="long path!" />
        </mask>
    </defs>
    <g mask="url(#instagram-icon-mask)">
        <rect width="24" height="24" viewBox="0 0 24 24" />
        <rect id="instagram-gradient" width="24" height="24" viewBox="0 0 24 24" fill="url(#instagram_hover_gradient)" />
    </g>
</svg>