Color to CSS Filter
Convert a HEX color to a CSS filter string for tinting SVGs and images.
filter: invert(1) sepia(1) saturate(455) hue-rotate(217deg) brightness(120);
This is an approximation — exact pixel matching requires an iterative solver. The filter works best for solid-color SVG icons.
A black circle with the CSS filter applied, shown on white and dark backgrounds.
How CSS filter color tinting works
CSS filters were designed for visual effects, but they also work as a workaround to tint monochrome SVGs and PNG images when you can't change the fill color directly (e.g., third-party icons, img tags). The algorithm first drives the element to a known starting state — fully inverted — then applies sepia, saturate, hue-rotate, and brightness transforms to shift the hue toward the target. Because each filter function has non-linear interactions, an exact match requires iterative minimisation; this tool uses a fast heuristic approximation based on the HSL representation of the target color. For production use, consider the feColorMatrix SVG filter for pixel-perfect results.
Related tools: Color Converter · CSS Filter Generator · Color Palette Generator
Private & free — this tool runs entirely in your browser.