Change image color with CSS

Question

Is it possible to change the color of an image with CSS? By applying a filter maybe, or something like that. Is there a way? For example, an image like this: https://cdn.pixabay.com/photo/2016/06/02/16/14/tablet-1431399_960_720.png

Answer 1

There are 3 ways (or 4~5):

CSS filters

CSS has the property filter supported by all modern browsers, see kennel, however Edge does not support the value with url() and Opera mini and Internet Explorer 11 has no support, examples that help to color:

Values	Description
filter: url("filters.svg#filter-id");	Adds a filter based on an SVG, in firefox before this was the only one supported, so possible I will edit with details on this specifically
filter: brightness(.4);	Changes the brightness
filter: contrast(200%);	Change the contrast
filter: grayscale(50%);	Change the gray level
filter: invert(75%);	Inverts colors, based on percentage
filter: opacity(25%);	Changes the opacity
filter: saturate(30%);	Change the saturation
filter: sepia(60%);	Change the sepia "tone"

They can be combined:

filter: contrast(175%) brightness(3%);

There are other filters, but they are usually shade.

Percentage values can be used with %, the equivalent: .5 will be the same 50% and 100% will be the same 1 (1.0)

They can be combined:

filter: contrast(1.75) brightness(.3);

Change the background-image

Creating two images can toggle using CSS

For example with Hover:

<style>
.bg {
     background: url(../images/foto-vermelha.jpg) no-repeat;
     width: 300px;
     height: 300px;
}
.bg:hover {
     background-image: url(../images/foto-azul.jpg);
}
</style>

<div class="bg"></div>

Or with extra class (to use things like Element.classList.toggle javascript):

<style>
.bg {
     background: url(../images/foto-vermelha.jpg) no-repeat;
     width: 300px;
     height: 300px;
}
.bg-azul {
     background-image: url(../images/foto-azul.jpg);
}
</style>

<div class="bg"></div> <!-- mostra a foto em cores vermelhas -->
<div class="bg bg-azul"></div> <!-- mostra a foto em cores azuis -->

Swap background-position (CSS Sprite)

CSS Sprite is a technique that can combine multiple images to change the photo by changing the position of the image in the background, the image should be similar to star, checked and some others use (this image is by Sopt himself):

An example:

.css-sprite {
    background:  url(https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79) -5px -120px no-repeat;
    width: 25px;
    height: 25px;
}

.css-sprite:hover {
    background-position: -45px -120px;
}

<div class="css-sprite"></div>

Has 2 more, both with SVG, one uses #target and the other uses fill (since the image would be a vector), as soon as possible add an example.

Answer 2

you have two options, using CSS (but with little support from browsers) or applying a filter over SVG.

CSS filter:

img {
  width: 300px;
  filter: grayscale(1)
}

<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg" />

SVG filter:

img {
  width: 300px;
  filter: url(svg#grayscale)
}

<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg" />
<svg>
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

Now I’ll change the channels in the filter.:

img {
  float: left;
  width: 300px;
}

#img0 {
  filter: url(svg#normal)
}

#img1 {
  filter: url(svg#grayscale)
}

#img2 {
  filter: url(svg#redscale)
}

#img3 {
  filter: url(svg#greenscale)
}

#img4 {
  filter: url(svg#bluescale)
}

#img5 {
  filter: url(svg#inverter_canais)
}

<img id="img0" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img1" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img2" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img3" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img4" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img5" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<svg>
  <filter id="normal">
    <feColorMatrix 
      values="1 0 0 0 0     
              0 1 0 0 0      
              0 0 1 0 0      
              0 0 0 1 0"/>
  </filter>
</svg>

<svg>
  <filter id="grayscale">
    <feColorMatrix 
      values="0.33 0.33 0.33 0 0     
              0.33 0.33 0.33 0 0      
              0.33 0.33 0.33 0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="redscale">
    <feColorMatrix 
      values="0.33 0.33 0.33 0 0
              0    0    0    0 0      
              0    0    0    0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="greenscale">
    <feColorMatrix 
      values="0    0    0    0 0  
              0.33 0.33 0.33 0 0
              0    0    0    0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="bluescale">
    <feColorMatrix 
      values="0    0    0    0 0  
              0    0    0    0 0  
              0.33 0.33 0.33 0 0
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="inverter_canais">
    <feColorMatrix 
      values="0   0.5 0.5 0 0  
              0.5 0   0.5 0 0  
              0.5 0.5 0   0 0
              0   0   0   1 0"/>
  </filter>
</svg>

Answer 3

I was able to, using the filter: invert(100%) the image reverses the color, in the case of black, goes to white. I left the answer to help more people who need.