Color to CSS Filter
Convert a HEX color into an approximate CSS filter string, preview it on a black swatch, and copy the result. The fit is heuristic, not pixel-perfect.
Approximate heuristic; tune for your actual source element.
A QUICK WALKTHROUGH
How to use this tool
- Enter a six-digit HEX color or choose one with the picker.
- Review the generated filter, target swatch, and filtered black swatch.
- Copy the declaration and tune it if your source element differs.
Heuristic approximation
CSS filters are fitted against a black source swatch with a bounded heuristic. Different source colors, backgrounds, browsers, and filter order can produce different results. Use the output as a starting point and tune it in your target layout.
Local and transparent
Parsing, fitting, preview, and copying happen in this browser. No color or CSS is uploaded.
GOOD TO KNOW
Common questions
Is this an exact conversion?
CSS filters are fitted against a black source swatch with a bounded heuristic. Different source colors, backgrounds, browsers, and filter order can produce different results. Use the output as a starting point and tune it in your target layout.
Can I use the filter on any element?
The declaration is standard CSS, but the result depends on the source pixels and background. Check it on the actual element.