Hex to CSS Filter

Convert any Hex color to a pure CSS filter string. Perfect for coloring SVG icons that can't be modified directly.

Convert Hex color to CSS filter

The Problem

To color a black icon using only CSS, you need a complex combination ofbrightness,saturate,hue-rotate, etc. Calculating this manually is nearly impossible.

The Solution

We use a Least Squares solver to find the perfect combination of filters that minimizes the color difference (Loss). A loss of less than 1.0 is generally considered indistinguishable to the human eye.

How the CSS filter solver works

Input

Enter a target Hex color (e.g. #ff6a00).

Solve

The solver searches for a filter chain that best matches the target.

Verify

Use the loss score to judge accuracy before copying the CSS.