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

Improve this question

3 Answers 3

Reset to default
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>

Improve this answer
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
2

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>

Improve this answer
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.
    – chintuyadavsara
    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.

Improve this answer

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