12

In this CodePen, a filter is used to turn a blue color into a grey color:

filter: grayscale(100%);

How can I change the color to blue/red/green using css filters?

https://codepen.io/wiseoldman/pen/RVRgyB

3 Answers 3

19

Nice & Simple With CSS Filters

Very easy when using the hue-rotate() filter.

Make your images red, which has a hue value of 0, then use a hue chart to grab the colours you require for the hue rotation.

Use the filter:grayscale(1) to set all images to grey, then on hover, set the grayscale to 0 and adjust the colour values.

enter image description here

.colorRed,.colorBlue, .colorGreen {filter:grayscale(1);}
.colorRed:hover,.colorBlue:hover, .colorGreen:hover {filter:grayscale(0);}
.colorRed img:hover {filter:hue-rotate(0deg);}
.colorBlue img:hover {filter:hue-rotate(215deg);}
.colorGreen img:hover {filter:hue-rotate(100deg);}
<span class="colorGreen"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorBlue"><img src="https://i.imgur.com/msjbI0M.png" width="100px";></span>
<span class="colorRed"><img src="https://i.imgur.com/tycbKyW.png" width="100px";></span>
<div class="colorRed"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorBlue"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorGreen"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>

2
  • My pleasure. If it answers your question, don't forget to flag it as an answer with the tick box. And if you need any other help, just let me know :)
    – Electron
    Commented Sep 9, 2018 at 9:15
  • And I should have mentioned, I decided not to change your oringal code, but rather show it used in another way, showing the technique of starting of with a red colour to help get your other colours values and how you can set all to grey before one is chosen. This could then be adapted to your current code.
    – Electron
    Commented Sep 9, 2018 at 9:21
3

you can use filter hue-rotate(*x*deg) to change the colors, here I have attached code.

body {
  align-items: center;
  display: flex;
  font-family: Helvetica, sans-serif;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
body div {
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}

form#smileys input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border .2s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 5px;
  transition: all .2s ease;
}
form#smileys input[type="radio"]:focus {
  
  outline: 0;
}
form#smileys input[type="radio"].happy:hover,form#smileys input[type="radio"].happy:checked{
  -webkit-filter: hue-rotate(300deg);
          filter: hue-rotate(300deg);
}
form#smileys input[type="radio"].happy {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].neutral:hover,form#smileys input[type="radio"].neutral:checked{
  -webkit-filter: hue-rotate(10deg);
          filter: hue-rotate(10deg);
}
form#smileys input[type="radio"].neutral {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].sad:hover,form#smileys input[type="radio"].sad:checked{
  -webkit-filter: hue-rotate(160deg);
          filter: hue-rotate(160deg);
}
form#smileys input[type="radio"].sad {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center;
  background-size: cover;
}

.mtt {
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #999;
  text-decoration: none;
}
.mtt span {
  color: #e74c3c;
}
.mtt:hover {
  color: #666;
}
.mtt:hover span {
  color: #c0392b;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="smileys">
	<input type="radio" name="smiley" value="sad" class="sad">
	<input type="radio" name="smiley" value="neutral" class="neutral">
	<input type="radio" name="smiley" value="happy" class="happy" checked="checked">
	<div>It looks like you're feeling <span id="result">happy</span> today..</div>
</form>

<a class="mtt" href="https://morningtrain.dk" target="_blank">
	With <span>♥</span> from Morning Train
</a>
</body>
</html>

2
  • Thank you so much, this is exactly what I've been looking for.
    – smolo
    Commented Sep 9, 2018 at 9:13
  • @toms You're welcome, please accept the solution, if this is exactly what you have been looking for. Commented Sep 9, 2018 at 9:26
0

there is a filter called hue-rotate for similar thing https://developer.mozilla.org/en-US/docs/Web/CSS/filter

why do you want to use filter for that you can directly use color or background-color properties for this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.