wakelift / posts /

rapidly recolor websites by hand or automatically with colortater

Recently, someone asked me via the feedback form at the bottom of my blog whether I would be okay with them having their blog look similar to mine. I have no exclusive right to the template (it was made by someone else and provided to me for free by Viktor Persson) and I like the spirit of sharing, I gave them the go-ahead.

What I didn't expect was that the pages look so very similar, because there's not really much original design to my blog anyway like a title picture or something. I didn't want the pages to look so stunningly similar, so I decided to change my color scheme.

That's when my lazyness kicked in. I knew there were about five or six places where I'd put small variations of that tone of green that wasn't in the original template and I didn't feel I could just hack the hex codes and get a good-looking result immediately. Therefore I came up with the simplest plan that could possibly work: Create a tool that automatically classifies colors in css style sheets into groups and offer the user to interactively change them. What could go wrong?

This idea was the beginning of a quite fun late night coding session. I sat down with my code editor and the Qt assistant and started hacking. Soon I found out, that it wasn't too fun just to poke around the color values - even though I'd limited myself to just change the hues of colors - so I decided to put in a headless mode, that could be used completely without Qt. This mode is currently advancing the highlight color on my website by 11 degrees every day.

And this is the result of the hacking session:

In this picture I've taken a page from my zasim documentation, saved it to disk with my browser and let my tool loose on the css files.

On the left, there is the list of groups with all their colors, showing the original color and the transformed color side by side in the little icon. Next to that there are sliders to adjust the hue of each of the groups. The slider belonging to the group that's currently selected on the left is highlighted in blue. The little R buttons at the top reset each slider to their original position and the reset all button does exactly what it says on the box.

Additionally, there's two color pickers, that let you drag your mouse over the screen and select a color to search for a group in the tree. Either you drag from the left picker to match against original colors or you drag from the right picker to match against colors that were already transformed.

The save button is where most of the magic happens. The program creates a .src "backup" file for each css file as well as a colortater.dat file to store hue adjustment values for each group. This is necessary, because if you drag the hue sliders to the same position, all colors would suddenly end up in the same category and you'd end up losing the grouping altogether, as well as turning your website into a one-colored gooey thing.


Usage is pretty simple. You just have to run the colortater tool with any number of .css files as arguments. It isn't strictly limited to css files. Any file that would have #RRGGBB, #RGB or rgb(xxx, xxx, xxx) in them should work. Then, the GUI will pop up and you'll be able to change the colors and save it again.

You'll end up with copies of your files with a .src extension. Those will be read the next time you start the program, so if you make any modifications to the actual css, you should change the .src files instead of the .css files.

Headless mode

Now, in the middle of coding, I decided that there's real need for the tool to be runnable from a console without an X server attached or any kind of interactivity. In my case, I wanted to run a cronjob every day to change the color of my website (check back tomorrow or in a week to see the magic happen!). Thus, the -H flag was born.

Typically, you'd first call

colortater -H -g style.css [...]

to find out which groups colortater has found and what their representants are (they are the first color in each line). Then, you can add any number of -a arguments, for example to add 11 degrees to the light green group:

colortater -H -a 4bdc4b 11 style.css [...]

If successful, your files will have been backed up and overwritten with the new, adjusted colors. The changes will stack, so calling this same command over and over will move your colors around and around the hue circle.

If you want to set the adjustment value to a certain value, you can just prepend the number with an equals sign. Don't forget to escape it for your shell if you need to:

colortater -H -a 4bdc4b \=0 style.css [...]


If you want to give colortater a try, get the code from github. I will also soon upload it to the python package index.

Have fun, let me know what you think and feel free to open issues and pull requests on github.