Color Shader
Brief
I found myself needing an easier way to generate tints and shades designs and none of the tools I found online quite had what I wanted. There are plenty of great online tools for generating colors, but they all just fell short for my particular needs. So, I decided to use this as an opportunity to learn how it could be done.
Process
I started by getting a basic outline of what exactly I wanted from the tool. Mainly, to generate tints and shades in hex, rgb, and hsl. I also wanted a way to format these for css variables so I could easily implement them in web design. From there, I looked into how to do the conversions between each color format. I found a great resource here and used that as the base for the conversions.
I then began working on how to actually generate all of the tints and shades. I landed on having one function for tints, and one for shades. They do the same thing, take the luminosity value from the hsl color and increment it, just in different directions. Once these are generated, they're then inserted into the DOM as elements.
There was a lot of work after this to get the rest of the functions to all play nice together and to get the layout looking good on desktop and mobile, but I'm fairly happy with how it turned out. That being said, there is a lot I want to improve on and I've been working on a new version of the website off and on when I have time. Hopefully I'll be able to get the next version up and running in the not-to-distant future!