Color to CSS Filter

Convert any target color to a CSS filter property — perfect for recoloring SVG icons in img tags without changing the source file.

What Does This Tool Do?

Calculates the CSS filter values (invert, sepia, saturate, hue-rotate, brightness, contrast) needed to transform a black SVG/PNG into your target color. Useful when you can't modify the SVG source.

Key Features

🎨

Any Target Color

Enter any HEX color to get the CSS filter.

📋

Copy Ready

Copy the filter property string directly.

🖼️

SVG Icons

Primary use case: recoloring black SVG icons.

⚡

Instant

Filter values computed immediately.

How to Use This Tool

Enter your target HEX color.
Click Convert to get the CSS filter string.
Apply the filter to your img or svg element in CSS.

How It Works

Converts the target color to HSL, then computes a series of CSS filter steps (invert → sepia → saturate → hue-rotate → brightness → contrast) that approximates the target color when applied to a black image.

Common Use Cases

💡 Icon Libraries

Recolor icon sets without modifying source SVGs.

💡 Dynamic Theming

Change icon colors based on theme using CSS only.

💡 Dark Mode

Invert icon colors for dark mode without editing assets.

Frequently Asked Questions

Does it work perfectly on all colors?

The result is an approximation. Very saturated or very dark colors may have a small error. The algorithm optimizes for visual accuracy.

Related Tools

Link to This Tool

Copy and paste the code below to link to this tool from your website: