Hexli 🪄 ▸

HEX to CSS Filter, in a single click. No Compromises.

Home / Hexli 🪄 HEX to CSS Filter, in a single click

September 23, 2020

In a nutshell...

The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮

Let’s get one thing straight: an “approximation” of a color is a failure. Hexli is a highly specialized front-end utility built to solve the maddening problem of coloring black SVGs via CSS.

Instead of nudging hue-rotate sliders like a peasant hoping for the best, Hexli weaponizes a sophisticated mathematical algorithm to instantly calculate the precise CSS filter matrix required to perfectly match your target HEX color. It turns you into a god of the DOM, rendering pixel-perfect colors in a single click.

The End of Chromatic Compromise

For too long, front-end developers have lived in the dark ages, accepting “close enough” when it comes to coloring external SVG libraries. Seeing a pure `#80ffc0` mint green degraded to a muddy, inaccurate CSS filter is nothing short of visual sacrilege. Hexli is the cure to this madness. It is not just a tool; it is a superpower that bridges the gap between uncompromising design precision and the harsh realities of the DOM. You demand the exact HEX? Hexli forces the browser to bend to your exact chromatic will.

Mathematical Purity at Light Speed

Underneath its dangerously sleek UI lies an engine of pure mathematical obsession. Hexli doesn’t guess. It deploys a Stochastic Perturbation Stochastic Approximation (SPSA) algorithm to test, refine, and ruthlessly optimize millions of CSS filter combinations—invert, sepia, saturate, hue-rotate, brightness, contrast. It calculates the microscopic variance between your target RGB and the filter output, delivering a single, copy-paste line of code that perfectly mimics your target. The era of trial and error is over. The era of absolute precision has begun.

About

Thinking about building something similar?

These estimates will give you a clear picture of the technical scope, development timeline, and investment required to turn the idea into an awesome reality.

Big results start with clear information and smart decisions.

Total Value

Value: ~ $520 to $1.100 USD

Details

Duration: ~ 3 to 1 Week

Details

Concept

Value: ~ $140 to $290 USD

Details

Duration: ~ 1 Day

Details

Design

Value: ~ $50 to $110 USD

Details

Duration: ~ 0 to 1 Day

Details

Coding

Value: ~ $180 to $360 USD

Details

Duration: ~ 1 Day

Details

Testing

Value: ~ $90 to $180 USD

Details

Duration: ~ 0 to 1 Day

Details

Polishing

Value: ~ $50 to $110 USD

Details

Duration: ~ 0 to 1 Day

Details

Don’t let the numbers scare you, let’s talk!

The Juicy Details!

All treats, no tricks, just the sweet facts! 🍭

If you care about UI design, you know the visceral, physical pain of seeing #427CFE when the brand guidelines clearly demand #427CFF. It keeps you up at night. You import a beautiful, lightweight external SVG icon, and the browser mocks you by rendering it in unchangeable, abyssal black. You can’t touch the fill property. You are trapped.

Enter Hexli.

Hexli is the superpower I built to eradicate this nightmare. I refuse to let CSS dictate my palette. By providing a ruthless, mathematically flawless translation from HEX to CSS filter, Hexli gives you absolute control. It empowers you to implement dynamic themes with the exactitude of a laser, so you can stop wrestling with the browser and start bending it to your will.

Instructions

Wielding this superpower is simple:

Demand Your Color: Paste your absolute, uncompromising HEX code into the input, or select it via the color swatch.
Witness the Calculation: Hexli’s engine instantly calculates the matrix, displaying the microscopic “Closeness” score (Aim for 0.0).
Claim Your Power: Copy the generated filter: invert(...) CSS code.
Command the DOM: Paste it onto your black SVG or image. Watch the browser obey.

Inspiration

To achieve this level of omnipotence, I had to delve into the arcane mathematics shared by developers like Barrett Sonnta and MultiplyByZer0 deep within the StackOverflow archives. Their work on mapping RGB values to CSS filter matrices was the catalyst.

Aesthetically, the dark, hyper-focused UI is inspired by the uncompromising standards of Awwwards and the sheer color discipline of the Pantone Color Institute. It is a shrine to focus.

“Color is the most relative medium in art.” — Josef Albers

“There is a logic of colors, and it is with this alone, and not with the logic of the brain, that the painter should conform.” — Paul Cézanne

“Color is a power which directly influences the soul.” — Wassily Kandinsky

Project Overview

Hexli is an engine of pure chromatic translation. You feed it a static, perfect HEX code, and it spits out a dynamic, complex set of CSS instructions that forces a black element to wear your color like a skin.

When you input a specific shade—say, a hyper-vibrant #80ffc0—Hexli doesn’t guess. Because CSS filters compound in chaotic, non-linear ways, finding the exact match requires extreme computational violence. Hexli handles this natively in the browser, presenting you with a copy-paste line of code that achieves perfect harmony. It’s raw logic wrapped in an elegant, glassmorphic UI.

The absolute rage of reading outdated CSS-Tricks articles while trying to dynamically theme a web app is what birthed this project. People were using bloated Webpack loaders or injecting inline SVGs just to change a simple icon color. It was barbaric.

I needed a tool so precise and so fast that it felt like an extension of my own mind. Hexli had to be the ultimate source of truth for color conversion.

Theory

If you want to understand the spell, you must understand the RGB Color Space and the MDN Canvas API / CSS Filters. When you apply sepia() or hue-rotate() to #000000, the browser executes a massive matrix multiplication on the pixels.

Because these filters stack, reversing them algebraically to find a specific color is a mathematical impossibility.

To break this lock, Hexli weaponizes the Simultaneous Perturbation Stochastic Approximation (SPSA) algorithm. This is an optimization method that iteratively mutates the six filter parameters, minimizing a “loss function” (the deviation between the target’s HSL/RGB and the current filter output). It literally evolves the CSS until it becomes the color.

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

Challenges

The Chaos of Non-Linear Math: CSS filters do not map cleanly. A 10% increase in brightness might completely shatter the hue if saturate is too high.
The Threat of Latency: Running an algorithm that tests millions of iterations in vanilla JS threatens to block the main thread. I will not tolerate a sluggish UI.
The Human Eye: Calculating strict RGB loss is not enough. The human eye perceives color non-linearly, meaning a mathematically close RGB might look totally wrong.

Solutions

SPSA Dominance: Instead of brute force, SPSA intelligently navigates the math, sensing the gradient of the loss function and accelerating toward the exact color.
The Two-Pass Solver: To guarantee instantaneous execution, I engineered a solveWide() pass to make massive, rapid leaps toward the color, immediately followed by a solveNarrow() pass to mercilessly hunt down the exact sub-pixel hue.
HSL Calibration: The loss function was rewritten to evaluate both RGB deltas and HSL (Hue, Saturation, Lightness) deltas, forcing the machine to see color the way I do.

Impact

With Hexli, design systems become bulletproof. No more bloated asset folders filled with different colored SVGs. No more inline code muddying your HTML. You upload one pitch-black icon set and wield Hexli to theme it infinitely, perfectly, dynamically. It guarantees absolute brand compliance across the entire viewport.

Scope

Hexli does one thing, and it does it with terrifying perfection: it converts HEX values to CSS filters based on a pure black (#000000) origin. It does not waste computational resources on gray origins, and it does not dilute its speed with alpha-channel calculations. Pure black in. Absolute color out.

Credits

MDN Web Docs: The sacred texts of CSS filter matrices.
Google Fonts (Inter): For the clinical, hyper-legible typography.
Lorem Picsum: For feeding the dynamic background.
Barrett Sonnta & MultiplyByZer0: The architects of the original RGB-to-Filter proofs.

The Nerd Stuff!

I think we are going to need a bigger boat... ahem, I meant cauldron! ✨

JavaScript, CSS, HTML5

Hexli is built on unadulterated Vanilla JavaScript. Frameworks are too slow; they introduce unnecessary abstractions. The core logic is locked inside strict ES6 classes (Color and Solver). The Color class simulates the browser’s exact rendering engine, mutating values sequentially. The Solver class is the SPSA orchestrator, executing iterations faster than the display’s refresh rate. The DOM updates are reactive, bound tightly to the input for a zero-latency experience.

Improvements

White Origin Targeting: Retuning the SPSA algorithm to calculate optimal filters for pure white (#FFFFFF) base elements.
Sub-Pixel Alpha Injection: Integrating RGBA support to force opacity rules into the filter matrix without breaking the hue.
Mass Matrix Generation: A bulk-processing pipeline to convert entire arrays of brand guidelines into a JSON object of perfect CSS filters.

Known Bugs

The Local Minimum Trap: The SPSA algorithm relies on stochastic probability. On exceptionally rare occasions, the chaos of the math matrix traps the solver in a “local minimum,” resulting in a sub-optimal output that falls short of a 0.0 Closeness score.
The Forced Recalculation: Do not accept the flaw. Simply strike the Recalculate Filter button. A secondary calculation will forcefully bypass the anomaly, shattering the mathematical roadblock and returning your absolute chromatic perfection.

* Pricing, timelines, content, and designs are subject to change without prior notice.
Certain projects or aspects displayed are presented for demonstration purposes only and may include partial or placeholder content, conceptual work and/or early-stage ideas, and may not reflect the final delivered product.

* All values provided are preliminary estimates based on the scope that similar projects may present.
These are intended for general reference only and should not be considered final or binding figures.

HEX to CSS Filter, in a single click. No Compromises.

In a nutshell...

The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮

The End of Chromatic Compromise

Mathematical Purity at Light Speed

About

Thinking about building something similar?

Total Value

Concept

Design

Coding

Testing

Polishing

The Juicy Details!

All treats, no tricks, just the sweet facts! 🍭

Instructions

Inspiration

Project Overview

Theory

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

Challenges

Solutions

Impact

Scope

Credits

The Nerd Stuff!

I think we are going to need a bigger boat... ahem, I meant cauldron! ✨

Improvements

Known Bugs

More spooktastic codes ready to ignite your curiosity!