Changing the Color of a PNG Image Using only 1-line CSS in WordPress

Ivan Oung


Use nothing but CSS to change the color of a PNG image.


Targeted Style
Current Style

The challenge would be easier if I can just use toosl like Photoshop to change the source image into white.

However, all pages have a top navigation bar with a white background, and WordPress only accept one logo at a time, so changing the color of the logo with a photo editing tools would not be a feasible idea.

Which left me with nothing else but CSS.


After a bit of searching, CSS Filter seems to be the best way to go.

Definition from MDN web docs
.header-image {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
            hue-rotate(149deg) brightness(103%) contrast(101%);

I also used this color filter generator to come up with the code that I need, which in my case is just pure white.

After applying CSS Filter

Perfect result!

Navigation Menu


Stay In Touch!

I'll only send the good stuff, no spam, no bs, I promise!

More Readings

WordPress for schools and educations

There are numerous benefits to using WordPress for schools and educational institutions. One of the key advantages is its user-friendly interface, which allows administrators, teachers, and students to easily update ... Read more

WordPress for growing NGOs

One real-life example of how WordPress has helped a nonprofit expand its reach is the case of a wildlife conservation organization. Prior to using WordPress, the organization had a static ... Read more

Expanding Your Hong Kong WordPress Site: Strategies for International Growth

One compelling case study of successful international expansion is the Hong Kong-based WordPress site “HKFashionTrends.” Originally focused on catering to the local fashion scene in Hong Kong, the site recognized ... Read more

A WordPress Developer Who You Can Trust.

I always build my relationships with my clients based on trust. I want to see you grow as much as I myself. Let's work together to grow your business.

Get A Free Quote
Share to...