Hex to CSS Filter

About CSS Filter Generator

Two tools in one. Build sets brightness, contrast, saturation, hue, blur, grayscale, sepia, invert and opacity by eye on a sample picture and writes the filter declaration. Recolour finds the filter chain that turns a black icon or image into any colour you choose.

Recolouring is the common reason people search for CSS filters: an icon arrives as a black PNG or an SVG in an <img>, and there is no fill to change. No formula maps a colour to filter values, so the tool searches for them — a stochastic optimisation that converges on the target — and reports how close it got. For nearly every colour the result is exact to the eye.

Order matters in a filter: functions apply left to right, so grayscale(1) sepia(1) and sepia(1) grayscale(1) give different pictures. Only the functions that differ from their neutral value are written out.

Where it helps

• Finds the filter that recolours black to any colour, and says how accurate it is.
• Builds filters by eye with a before-and-after preview.
• Writes only the functions you changed, in a valid order.
• Deterministic: the same target always gives the same filter.

Limits

• Recolouring assumes a black source; for other colours, the CSS includes brightness(0) saturate(100%) first to make it black.
• For inline SVGs, setting fill or using currentColor is simpler and exact; filters are for images you cannot edit.
• Filters create a stacking context and can blur the whole element when combined with transforms.

Frequently asked questions

Why brightness(0) saturate(100%) at the start?

The recolour chain is calculated from black. Adding brightness(0) turns any icon into black first, so the chain works no matter what colour the icon started as.

Is there a better way to colour an icon?

Usually. An inline SVG can use fill or currentColor; an icon used as a CSS mask can take any background-color. A filter is the answer when you only have an <img> you cannot change.

Why is the result sometimes only 'very close'?

Some colours cannot be reached exactly by this filter chain from black. The search keeps the best result, and the difference is reported so you can judge it; it is rarely visible.

Related tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it