Change color of PNG image via CSS?
You can use filters with -webkit-filter
and filter
:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters
You can change an image to grayscale, sepia and lot more (look at the example).
So you can now change the color of a PNG file with filters.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
How to replace color of PNG image using CSS?
Your icon is a png
image, so each pixel is defined separately to have its own color. There are no whole shapes that you can target with css and define a color, as you would for regular HTML elements.
However, there I a few things I would say:
I would have thought that it should be possible to change the color of this shape in photoshop without making it look any more grainy or pixelated than before.
I would suggest making this into an
svg
. This is a vector file format, so it generally has a smaller file size compared to pixel images, has completely sharp and defined edges, and can be scaled up to any size without reducing its quality. And, most importantly for you, it's very easy to change its color with CSS.You could try using CSS filters to change the appearance of your
png
. Check out this stackoverflow question to see if it helps: Change color of PNG image via CSS?
As I've said, an svg
would be my recommended option. I've created a code snippet below of what that would look like – you'll find your color #2a4f6c
in the code, so just change that if you want the image to have a different color again..
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1360.6 1077.2" style="enable-background:new 0 0 1360.6 1077.2;" xml:space="preserve"><style type="text/css"> .st0{fill:#2a4f6c;}</style><path class="st0" d="M356.4,460l260.4-109.3l-21.8-51.8L334.6,408.1c-13,5.5-19.2,20.5-13.7,33.5l1.9,4.6 C328.3,459.3,343.3,465.5,356.4,460z"/><rect x="614.5" y="239" transform="matrix(0.9059 -0.4236 0.4236 0.9059 -61.7804 311.7127)" class="st0" width="111.8" height="111.8"/><path class="st0" d="M706.2,197.3l-131.4,61.4c-3.7,1.7-8.1,0.1-9.9-3.6l-14.1-30.2c-1.7-3.7-0.1-8.1,3.6-9.9l131.4-61.4 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C711.5,191.1,709.9,195.5,706.2,197.3z"/><path class="st0" d="M786.4,375.5L655,436.9c-3.7,1.7-8.1,0.1-9.9-3.6L631,403.1c-1.7-3.7-0.1-8.1,3.6-9.9L766,331.8 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C791.7,369.3,790.1,373.8,786.4,375.5z"/><path class="st0" d="M907.2,521.7c1-2,1.5-4.2,1.5-6.5v-18.7c0-8.2-6.6-14.8-14.8-14.8H547.4c-8.2,0-14.8,6.6-14.8,14.8v18.7 c0,2.3,0.6,4.5,1.5,6.5H907.2z"/><path class="st0" d="M941.8,589.8H499.5c-13.3,0-24.1-10.8-24.1-24.1v0c0-13.3,10.8-24.1,24.1-24.1h442.3 c13.3,0,24.1,10.8,24.1,24.1v0C966,579,955.1,589.8,941.8,589.8z"/></svg>
Change color of image via CSS
you need to combine two filters saturate
and hue
, below is a possible combination to get a "red" (if you use a color picker it will generate the default web "red" - #FF0000
or just #F00
, because you can choose your red, stronger or lighter.
img {
webkit-filter: saturate(100) hue-rotate(-140deg);
filter: saturate(100) hue-rotate(-140deg)
}
<img class="screencap" src="https://i.stack.imgur.com/speoA.png">
UPDATE
In the first snippet had, allegedly, a bug (after a chat with @kaiido), that was just making red in FF using Windows in tag img
- while keeping pink in other browsers in other OSs, (therefore I'm going to file the bug in bugzilla)
So there is a way to do this working cross browser, using mixed filters
img { -webkit-filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9); filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);}
<img class="screencap" src="https://i.stack.imgur.com/speoA.png">
Is there any way to colorize a white PNG image with CSS only?
This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).
http://jsfiddle.net/uw1mu81k/1/
-webkit-mask-box-image: url(http://yourimagehere);
Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.
EDIT:
You can also get this to work in FireFox with slight help from svg
.
http://jsfiddle.net/uw1mu81k/4/
div { width: 50px; height: 50px; mask: url(#mymask); -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);}
<div style="background-color: red;"></div><div style="background-color: blue;"></div><div style="background-color: green;"></div><div style="background-color: orange;"></div><div style="background-color: purple;"></div>
<svg height="0" width="0"> <mask id="mymask"> <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" /> </mask></svg>
Change png image background color
Use background-color:#05adef
alternatively you can use hue-rotate(deg)
but the catch is that you have to search for the perfect angle to match the desired color. Also use invert and contrast in conjunction for more control over the color.
img{ width: 120px;}
img:hover{filter:invert(100%) hue-rotate(24deg); }
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="Sample Image">
is it possible to change color of png image in svg element by css or javascript?
You can change the color of an image by using an feColorMatrix filter.
.icon { display: inline-block; width: 80px; height: 80px; overflow: hidden;}.icon-del { background: url("http://i1.piimg.com/567571/220defbd8306acf8.png") no-repeat center;}.icon > .icon { position: relative; left: -80px; border-right: 80px solid transparent; -webkit-filter: drop-shadow(80px 0); filter: drop-shadow(rgb(204, 51, 255) 80px 0);}
.imgicon1 { -webkit-filter: drop-shadow(80px 0); filter: drop-shadow(rgb(204, 51, 255) 80px 0);}
.imgicon2 { -webkit-filter: url(#f2); filter: url(#f2);}
<p><strong>origin icon</strong></p><i class="icon icon-del"></i><p><strong>after change icon color</strong></p><i class="icon"><i class="icon icon-del"></i></i><br /><br /><p>can i use the same way to change the icon color in svg image below</p><svg x=200 y=200 width=500 height=500 color-interpolation-filters="sRGB"> <defs> <filter id="f1" x="0" y="0" width="100%" height="100%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> <filter id="f2" x="0" y="0" width="100%" height="100%"> <feColorMatrix type="matrix" values="0 0 0 0 0.82 0 0 0 0 0.21 0 0 0 0 1 0 0 0 1 0" /> </filter> </defs>
<image filter="url(#f1)" class="imgicon1" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" x="0" y="0" height="100" width="100"/> <image class="imgicon2" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" class="testicon" x="200" y="0" height="100" width="100" /> </svg>
Related Topics
How to Align Checkboxes and Their Labels Consistently Cross-Browsers
Putting ≪Div≫ Inside ≪P≫ Is Adding an Extra ≪P≫
Using External Images For CSS Custom Cursors
Is There a Limit to the Length of HTML Attributes
Default Select Option as Blank
How to Animate Underline from Left to Right
White Space At Bottom of Anchor Tag
Properly Sizing and Aligning the Flex Item(S) on the Last Row
How to Link to Part of a Page - Hash
Is There a Float Input Type in Html5
How to Keep Origin in Center of Image in Scale Animation
How to Escape Hash Character in Url
How to Target a Specific Column or Row in CSS Grid Layout
Do You Put Schema Microdata Meta Tags in the HTML Body
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do