CSS滤镜-颜色为蓝色，但保持白色白色

Question

我有一张软盘的映像，我想将其悬停时重新着色为蓝色。我想知道是否有人知道如何应用这样的CSS过滤器来仅对图像中已经非灰色的元素进行着色？

当前CSS：

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

图片（全尺寸）：

预期结果：

Answer 1

我认为一个简单的hue-rotate()就可以做到。只需调整度数即可获得所需的颜色：

img {
  width: 200px;
}

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

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

Answer 2

您可以使用hue-rotate()和grayscale()组合来获得相同的颜色

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

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