LESS Color Converter is basically a tool that generates new color in hex by using LESS's lighten or darken mixins JS function.

Problem:  While working with the design team, I realized that while we had our base colours set defined (e.g. @blue, @green, @tomato), there were times when we needed variations of these colours. Initially the designers were handing off hex codes of the colours they had chosen.

This became a bit of a nuisance to the engineers as we had tried to set a practice of not using hex codes directly in our CSS, but rather LESS variables so as to limit the overuse of different shades of each colour. This method was chosen in order maintain consistency in colours throughout our platform. However, now with new hex codes coming in through design, it didn't make sense to create variables for every shade of blue/green/tomato.

So, we decided to use LESS's lighten/darken mixin to store the colours. Instead of using #b7b6fb directly or creating another variable called @light_purple, we would instead refer to the colour as lighten(@purple, 10). But this also became a problem, as now we would have to guess the combo of mixin values (lighten vs darken, percent value) to get the hex code the designers had given us.

Solution: Basically I ended up building a small tool in our Style Guide to give our designers a way to generate variations of our colour system. And the tool would give out not only the hex code but also the less mixin to generate that colour. This mixin is what the designers would hand off to the engineers.

It would/does make our work a little less painful now that we can directly use that mixin in another class/id and not waste time figuring out ourselves.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a918e7c3-d0cd-469d-86a0-40406362abd9/color_converter.mp4