Design Tool
Transform black to any color

CSS Filter
Generator

Convert black images and SVG icons to any color using CSS filters.Perfect for dynamic icon coloring without editing source files.

Color Target

Choose the color you want to transform black images to

Target Color

Fine-tune Filters

Preview & Export

See the transformation and copy the CSS

Live Preview

Before (Black)
After (Filtered)
More Examples

CSS Output

filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1%) contrast(1%);

Usage Examples

SVG Icons
.icon { filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1%) contrast(1%); }
Images
img.recolor { filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1%) contrast(1%); }
CSS Variables
:root { --color-filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1%) contrast(1%); }

Pro Tips

  • • Works best with black or very dark images
  • • Perfect for SVG icons and simple graphics
  • • Fine-tune manually for better color matching
  • • Use CSS variables for theme switching

Features

Color Conversion

Transform black elements to any color using CSS filters

Live Preview

See changes in real-time with interactive examples

Multiple Formats

Copy CSS in different formats including variables

Smart Presets

Quick access to common colors and configurations

Use Cases

SVG Icons

Dynamically color SVG icons without modifying source files

Dark Mode

Create color variations for dark/light theme switching

Brand Colors

Match icons and images to your brand color scheme

UI Components

Style interface elements consistently across your app

Tips & Tricks

Start with Black

Use pure black (#000000) source images for best results

Fine-tune Values

Adjust individual filters for precise color matching

Performance

Use CSS variables for efficient theme switching

Accessibility

Test contrast and visibility across different backgrounds

SyrupBuilt by Syrup

Need custom UI development?

We build beautiful user interfaces with modern design systems and attention to detail.

Start a Project
Learn More