Hex Color To CSS Filter Converter

Convert a color to a CSS filter. Use the code to color black images with transparent backgrounds.

Target color

Real pixel, color applied through CSS background-color:

Filtered pixel, color applied through CSS filter:

How To Use This Tool

Simply paste your color (as a hex code) into the text input, then click "compute filters".

This will convert your hex color into a css color, and compare it with the "real color".

Then, just copy and paste the CSS code as needed.

Why Convert Colors To CSS Filters?

If you have a black icon set, you can use CSS filters to color them into anything.

Use this tool to generate a stylesheet. For example, you can use this to make a black icon green, with the class of .icon-green and CSS filter color.

This goes for any image that has a transparent background and can be made into a single color.

It's a lot easier than generating a ton of different colored icons - all you need is a base black one!

Demo: Using CSS Filters To Color An Image

We will use the following css:
filter: invert(33%) sepia(100%) saturate(6230%) hue-rotate(331deg) brightness(101%) contrast(101%);

Black icon.

Recolored with CSS filter.

Credit Where Credit Is Due

This is an adapted fork of Barrett Sonntag's "CSS filter generator to convert from black to target hex color" Codepen Notebook. We changed a few things and made it easier to use.