CodePen

HTML

            
              <h1>DEMO: Cambio de color de una imagen a travez de puro CSS</h1>
<p>(por el momento solo en chrome) Haz click en un color y observa la magia</p>

<input type="radio" name="color" id="morado"/>
<input type="radio" name="color" id="azulcyan"/>
<input type="radio" name="color" id="verde"/>
<input type="radio" name="color" id="azul"/>
<input type="radio" name="color" id="fresa"/>
<input type="radio" name="color" id="cafe"/>
<input type="radio" name="color" id="gris"/>

<img src="http://i.imgur.com/rNYIEmf.jpg" alt="zapato" />

<label for="morado"></label>
<label for="azulcyan"></label>
<label for="verde"></label>
<label for="azul"></label>
<label for="fresa"></label>
<label for="cafe"></label>
<label for="gris"></label>

<div><pre>&#60;spam&#62;</pre><b>Diseñado por:</b> Edgar Gutiérrez, <b>G3Kdigital</b><pre>&#60;/spam&#62;</pre></div>

<h3>Créditos</h3>
<p><b>inspiración:</b> <a href="https://plus.google.com/104456917648169426042/posts/BhYrLUTn98f">este post</a> y a <b>@kseso</b> que me enseño a usar los filter de CSS y que además le encontro un <a href="http://ksesocss.blogspot.com/2014/07/cien-tonos-color-una-imagen-css.html">uso práctico</a></p>
            
          
!

CSS

            
              /*SOLO CON ESTOS ESTILOS SE LOGRA EL EFECTO*/

input {
  display: none
}

label::after {
  content: attr(for)
}

#morado:checked ~ img {
  filter: hue-rotate(45deg);
}

#azulcyan:checked ~ img {
  filter: hue-rotate(-54deg);
}

#verde:checked ~ img {
  filter: hue-rotate(280deg);
}

#azulcielo:checked ~ img {
  filter: hue-rotate(-10deg);
}

#fresa:checked ~ img {
  filter: hue-rotate(100deg);
}

#cafe:checked ~ img {
  filter: hue-rotate(180deg) saturate(1.8);
}

#gris:checked ~ img {
  filter: saturate(0);
}
/*ESTILOS SON MAS DECORATIVOS QUE FUNCIONALES*/

* {
  box-sizing: border-box;
  text-align: center;
}

html,
body {
  font: 16px arial;
  color: gray;
}

input[name="color"]:checked ~ img {
  animation-name: none;
}

label {
  display: inline-block;
  padding: 1rem;
  transition: all linear .3s;
  border: solid whitesmoke 0.1rem;
}

label::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 0.8rem;
  margin-right: 0.5rem;
}

label:hover {
  letter-spacing: 0.25rem;
}

pre {
  display: inline-block;
  padding: 0.5rem;
}

img {
  animation: color 10s linear infinite;
  display: block;
  margin: auto;
  max-width: 450px;
  height: auto
}

a,
a:link,
a:visited {
  color: darkcyan;
  text-decoration: none;
  border: 0.1rem solid;
  border-radius: 0.2rem;
  display: inline-block;
  padding: 0 0.5rem;
}

[for="morado"]::before {
  background: rgb(160, 50, 215);
}

[for="azulcyan"]::before {
  background: rgb(0, 150, 150);
}

[for="verde"]::before {
  background: rgb(0, 150, 50);
}

[for="azul"]::before {
  background: rgb(50, 100, 200);
}

[for="fresa"]::before {
  background: rgb(200, 50, 100);
}

[for="cafe"]::before {
  background: rgb(150, 100, 70);
}

[for="gris"]::before {
  background: rgb(100, 100, 100);
}

#morado:checked ~ [for="morado"],
#azulcyan:checked ~ [for="azulcyan"],
#verde:checked ~ [for="verde"],
#azul:checked ~ [for="azul"],
#fresa:checked ~ [for="fresa"],
#cafe:checked ~ [for="cafe"],
#gris:checked ~ [for="gris"] {
  border: solid lightgray 0.1rem;
}

@keyframes color {
  0% {
    filter: hue-rotate(0deg)
  }
  100% {
    filter: hue-rotate(360deg)
  }
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................