CSS filter - color blue but keep white white

Question

I have an image of a floppy disk that I want to recolor blue whenever hovered. I was wondering if anyone knows how to apply a CSS filter like this to only color the already non-grey elements of the image?

Current CSS:

.saveIcon:hover {
    cursor: pointer;
    filter: grayscale(20%) brightness(70%) 
sepia(100%) hue-rotate(-180deg) saturate(300%) 
contrast(1);
}

Image (full-size):

Expected result(ish):

Answer 1

I think a simple hue-rotate() will do it. Simply adjust the degree to obtain the color you want:

 img { width: 200px; } img:hover { filter: hue-rotate(40deg); } 

 <img src="https://i.stack.imgur.com/2P1q3.png"> 

Answer 2

You can use hue-rotate() and grayscale() combination to get same color

 .saveIcon:hover { cursor: pointer; filter:hue-rotate(40deg) grayscale(30%); } 

 <img src="https://i.stack.imgur.com/2P1q3.png" class="saveIcon" width="200">