Image tint POC

Image tint POC

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<img class="icon red"></div>

CSS

.icon { 
    background-image: url("/img/logo.png");
    width: 45px;
    height: 32px;
 
}
 
.red {
      -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
      filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
    }
    
.blue {
      -webkit-filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
      filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
    }
    
.green {
      -webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
      filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
    }
.yellow {
      -webkit-filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
      filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
    }
.grey {
      -webkit-filter: grayscale(100%) brightness(110%) contrast(0.9);
      filter: grayscale(100%) brightness(110%) contrast(0.9);
    }
.black {
      -webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
      filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
    }