Change color of an image with css

Question

Change color of an image with css

Navigation

#1 by (6 votes)

5

I am using the icons of jquery ui on a page, however I was doubtful if you can change the color of the icons only with css , that is: to change the color of the icons of jquery ui it is necessary to change the image that contains all the icons, for example:

So to avoid this I thought I could change the color of the icon to green or the necessary color. Because if I change the image the color of all the icons is changed, and I just need to change some.

I've read that you can use filter in css , but I do not know how to change the color in the way I mentioned earlier.

img { display: block; width: 50%; }

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

<img src="https://i.stack.imgur.com/fXKdt.png" alt="test">

How could I change the color of these images using CSS ?

css3 color jquery-ui

asked by Juan Pinzón 17.07.2017 в 22:41

source

1 answer

Perform INSERT INTO query with SELECT DISTINCT with data from 2 tables Queries with hours in SQL Server?

score 6 · Accepted Answer

1. Direct answer to your question

If you're interested in playing with the filters, you can, although I recommend the 2nd method (below).

To change the hue of colors using filters, it is a good idea to start with a solid color. For example, let's use 100% red as the original image .

We are used to managing with RGB but, for filters, we have to move on HSL (hue, saturation, luminosity). For example:

Red: HSL( 0°, 100%, 50%)
Green: HSL( 120°, 100%, 50%)

And for the CSS properties filter and backdrop-filter , the functions are used hue-rotate () , saturate () and brightness () respectively.

Code

To change from red to green, it is only necessary to rotate the angle of the color shade 120 °.

filter: hue-rotate(120deg);

Another example, for yellow we have to modify hue and luminosity.

filter: hue-rotate(60deg) brightness(500%);

For other colors, I would recommend that you use online tools such as link ( or the one you prefer).

.verde {
  filter: hue-rotate(120deg);
}
.amarillo {
  filter: hue-rotate(60deg) brightness(500%);
}
html {
  width: 800px;
}

<img title="Original rojo"
     class="iconos"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro verde"
     class="verde"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro marillo"
     class="amarillo"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>

2. A class to define the color

As you mentioned in your question, you can change the color of all the icons by obtaining the resource from:

https://download.jqueryui.com/themeroller/images/ui-icons_<<<color>>>_256x240.png

For example for a 100% green

https://download.jqueryui.com/themeroller/images/ui-icons_00ff00_256x240.png

And this we can set it in a class, which only applies to the icons you want.

Code

We define the class .verde , and only apply it in the second case:

.ui-icon.verde {
    background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_00a000_256x240.png);
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- body -->
<div>
  <span class="ui-icon ui-icon-circle-check"></span>
  <span class="text">ui-icon-circle-check</span>
</div>
<div>
  <!-- 2do caso, con clase "verde" -->
  <span class="ui-icon ui-icon-circle-check verde"></span>
  <span class="text">ui-icon-circle-check verde</span>
</div>

I would prefer to do it this way, and load only 1 extra image of 4.4KB, rather than applying a filter on each icon, depending on the rendering on the client side. The filters are extremely expensive. I think it's better to have the color calculated as an image available on your server.