I have the need to highlight a color/tone in images to leave the rest in black and white, for example in the following trying to highlight blue. I don't know to what extent this can be done with css or even working with the canvas. I've been looking at MDN for mix-blend-mode .
.resaltado {
mix-blend-mode: normal;
filter: grayscale(100%);
}
.azul {
background-color: blue;
}
<div class="azul">
<img class="resaltado" src="https://media.istockphoto.com/photos/diesel-generator-for-emergency-power-supply-at-the-wall-of-a-medical-picture-id1202591741?b=1&k=6&m=1202591741&s=170667a&w=0&h=aa91rX5JDdVH2plVczpYnWFNMiswXb2N8kL3oueBqxo=" >
</div>
I can't think of how to do it with pure CSS, but with Javascript on a canvas you could process the image, changing the color pixel by pixel: if the predominant color of a pixel is not blue, you change it to gray (taking the average brightness of each color):