JSFiddle - React, Tailwind, and code Playground

HTML

<h3>CSS filters (webkit only)</h3>
<div class="original">
  No filter (194)
</div>
<div class="hue-1 original"></div>
<div class="hue-2 original"></div>
<div class="hue-3 original"></div>
<div class="hue-4 original"></div>
<div class="hue-5 original"></div>
<div class="hue-6 original"></div>
<div class="hue-7 original"></div>
<div class="hue-8 original"></div>
<div class="hue-9 original"></div>
<div class="hue-10 original"></div>
<div class="hue-11 original"></div>
<div class="hue-12 original"></div>
<div class="hue-13 original"></div>
<div class="hue-14 original"></div>
<div class="hue-15 original"></div>
<div class="hue-16 original"></div>

CSS

.original {
  width: 150px;
  height: 50px;
  background-color: #0096c5;
  margin-bottom: 0px;
}

.hue-1 {-webkit-filter: hue-rotate(22.5deg);}
.hue-2 {-webkit-filter: hue-rotate(45deg);}
.hue-3 {-webkit-filter: hue-rotate(67.5deg);}
.hue-4 {-webkit-filter: hue-rotate(90deg);}
.hue-5 {-webkit-filter: hue-rotate(112.5deg);}
.hue-6 {-webkit-filter: hue-rotate(135deg);}
.hue-7 {-webkit-filter: hue-rotate(157.5deg);}
.hue-8 {-webkit-filter: hue-rotate(180deg);}
.hue-9 {-webkit-filter: hue-rotate(202.5deg);}
.hue-10 {-webkit-filter: hue-rotate(225deg);}
.hue-11 {-webkit-filter: hue-rotate(247.5deg);}
.hue-12 {-webkit-filter: hue-rotate(270deg);}
.hue-13 {-webkit-filter: hue-rotate(292.5deg);}
.hue-14 {-webkit-filter: hue-rotate(315deg);}
.hue-15 {-webkit-filter: hue-rotate(337.5deg);}
.hue-16 {-webkit-filter: hue-rotate(360deg);}