Color from image css

How to colorize an image in CSS?

Is there a cross-browser way to use CSS to change the shade of an image. For example, if I have a grayscale icon (an img element), I’d like it to change the colors to sepia on hover. It would have to work on browsers other than IE, so I can’t use filter. Is there some CSS 3 trick that would allow that?

don’t think it can be done css only. you might want to try a js library like paintbrushjs mezzoblue.github.com/PaintbrushJS/demo/index.html or pixastic pixastic.com/lib

5 Answers 5

if you want to modify an image in css, it isn’t possible to do that. but you can play with the opacity property. yeah that only set the image opacity, but it will be a nice effect. here is an example :

that snippet will give a nice transition effect of fade-in and out image into transparent.

in other case, you can use image sprite to do what you want 🙂

There is no accurate way to do this in CSS, as mentioned already you can utilize other technologies to do so — namely Javascript.

In the very basic sense, you could attempt to mimic a sepia style by overlaying a div on top of an image with a sepia like color and an opacity rgba(94, 38, 18, 0.2) — but this method is rather crude. You could even overlay using a transparent image, which might be better than this option (but still pretty rubbish).

Update many years later: yes, you can colorize an image in CSS

I’ve asked for this question to be closed since it’s a duplicate, but that probably won’t happen because it’s very old. Anyway, the currently accepted:

«if you want to modify an image in css, it isn’t possible to do that.»

from the other answer was correct at the time, but has been incorrect for many years now.

filter: grayscale(100%) sepia(100%) hue-rotate(90deg); 

I can’t even remember why I originally needed this, wow twelve years ago, but knowing that it’s now possible makes me glad. Thanks for the answer!

There is no cross-browser standardized syntax for this that I know of. You can, however, use HTML5 Canvas and do this effect yourself. Using SVG may also work, but I’m not sure about how well all browsers, in particular internet exploder, support SVG .

I know I’m really late for answering this topic, but I’ve been wanting to do the same thing as you and could not find an answer. But the first guy here gave me a enlightenment.

What I needed: An image that was fairly colorized by some color and when I hover it, it would be normal again. So what did I do, I set the background color to the color I wanted the image to be and then I reduced its opacity. So I got the colorized image. And when I hover it, I set background to be transparent again and image in its full opacity. So it’s kinda possible to color an image usign backgorund-color and opacity with CSS.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to Change the Color of PNG Image With CSS

In this tutorial, we’ll change the PNG image color with the help of CSS.

The easiest way of changing the color of png image is to use the filter property, which applies visual effects to the element (image). It has the following values:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

With these values, we can change the color of the image.

Filters are new to browsers and are only supported in modern browsers. You can use -webkit-filter for Safari, Google Chrome, and Opera.

Let’s change an image color step by step.

Create HTML

body> img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> body>

Add CSS

Now, we add styles to the «image-1» and «image-2» classes.

• Use the width property to set the width of both images.
• Set the filter property with its «invert» value on the «image-1″class. We set 100% to make the image fully inverted.
• Use the filter property with its «sepia» value (100%) on the «image-2» class.

img < width: 40%; float: left; > .image-1 < filter: invert(100%); -webkit-filter: invert(100%); > .image-2 < filter: sepia(100%); -webkit-filter: sepia(100%); >

So, let’s see the outcome of our code.

Example of changing a PNG image color:

html> html> head> title>Convert image into different color title> style> img < width: 40%; float: left; > .image-1 < filter: invert(100%); -webkit-filter: invert(100%); > .image-2 < filter: sepia(100%); -webkit-filter: sepia(100%); > style> head> body> h2>Change PNG image color h2> img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> body> html>

Result

Next, let’s see another example with eight values of the filter property.

Example of changing the color of a PNG image with some filter styles:

html> html> head> title>Title of the document title> style> body < background-color: #03030a; min-width: 800px; min-height: 400px > img < width: 20%; float: left; margin: 0; > /*Filter styles*/ .saturate < filter: saturate(3); -webkit-filter: saturate(3); > .grayscale < filter: grayscale(100%); -webkit-filter: grayscale(100%); > .contrast < filter: contrast(160%); -webkit-filter: contrast(160%); > .brightness < filter: brightness(0.25); -webkit-filter: brightness(0.25); > .blur < filter: blur(3px); -webkit-filter: blur(3px); > .invert < filter: invert(100%); -webkit-filter: invert(100%); > .sepia < filter: sepia(100%); -webkit-filter: sepia(100%); > .huerotate < filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); > .opacity < filter: opacity(50%); -webkit-filter: opacity(50%); > style> head> body> h2>Change PNG image color h2> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> body> html>

You can also apply another technique. In the next example, we set id attributes («original» and «changed») for our elements. Then, we set filter: hue-rotate; on the «changed» id.

Example of changing the color of PNG image:

html> html> head> title>Convert image into different color title> style> #original, #changed < background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; > #changed < -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); > style> head> body> h2>Change PNG image color h2> div id="original"> div> div id="changed"> div> body> html>

Источник

How to replace color of PNG image using CSS? [duplicate]

I’m trying to replace the black in this image with the color: #2a4f6c using CSS only. I tried to replace the black with this color using Photoshop, and it looks awful and grainy. Is a solution possible using pure CSS? Image in question below.

3 Answers 3

Use the image as mask and you can do it:

You can’t change the image color directly in css. (svg, icons can be possible) Use various filter to change color, change hue-rotate value in code to get various color;

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:

1. 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.
2. 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.
3. 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..

Источник