No, this post isn’t about the blog’s new (but not so different) color scheme. Well, kind of. My last spare times were spent on an online tool that could change stylesheet colors in a breeze. I’ve named it as CSS Color Shifter.
I need to mention that my decision to build this tool happened when I found CSS Color Changer, by Aditya Bhandari. After using it, I noticed that it had some bugs that made it unusable and the author doesn’t seemed to be updating very often. As I didn’t found other tools or apps like this one, and I also saw some room for improvement, I started creating the CSS Color Shifter. There’s not much more to be said about it. It’s a really simple tool, so I recommend that you try it out. There are, however, some curiosities about the development I would like to write about.
Firstly, I decided to not use jQuery. Given the long time since I last programmed in Javascript without using that library, it felt refreshing, different, but still powerful. It’s a PITA to handle simple browsers inconsistencies all over again, but I’m glad my older skills are all there waiting to be used 🙂
The other interesting bit is about the needed calculations. The idea was to transform all colors to HSL format and then apply the specified changes to each one, slightly following the idea behind Aditya’s Color Changer, but I wanted to have more control over the result. Wikipedia was my friend when converting RGB to HSL and back, but then, while chatting with some coworkers about the tool, a new idea came to mind: modify the contrast of the colors. I presumed that it would be a not so worthful challenge, but after digging in some Google results, an apparently old website gave me a simple but effective formula that nailed it. I don’t think it’s perfect, but it works surprisingly well. The odd thing is that the website doesn’t have the page with the formula anymore.
So, if you got any suggestions about how CSS Color Shifter can be improved, or if you find some problem, or even if you hate it and think it’s useless, just leave a message!
UPDATE (26/07/2017): The tool has been remade with React, open sourced and it is now hosted on GitHub 🙂
Neat. You might find HUSL interesting. It gives you a way to shift colors while preserving perceptual lightness, not just hsl lightness. Look at the first image under the “Lightness” heading to see why hsl lightness is not perceived as uniformly light.
It is, indeed, very interesting. I’ll see if I can integrate it with the tool. Thanks!