Check out the amazing library known as gradientmaps.js* that handles this task flawlessly.
<img id="myimage" src="photo.jpg">
<script src="gradientmaps.min.js"></script>
<script>
var target = document.getElementById('myimage');
var gradientMap = "blue, green, yellow";
GradientMaps.applyGradientMap(target, gradientMap);
</script>
This code snippet translates your color list into SVG filter code, creates an <svg> element, gives a unique id to the <filter> element, and then applies the filter to your HTML element.
After running the example above, the structure of the DOM will transform to appear like this....
<svg version="1.1" width="0" height="0">
<filter id="filter-1489690359932">
<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="table" tableValues="0 0 1"></feFuncR>
<feFuncG type="table" tableValues="0 0.5019607843137255 1"></feFuncG>
<feFuncB type="table" tableValues="1 0 0"></feFuncB>
<feFuncA type="table" tableValues="1 1 1"></feFuncA>
</feComponentTransfer>
</filter>
</svg>
<img id="myimage" src="photo.jpg"
data-gradientmap-filter="filter-1489690359932"
style="filter: url("#filter-1489690359932");">
* The link provided is for my enhanced version of the project which includes compatibility with IE / Edge browsers.