Color of the day

July 11th, 2010 - 4:59 pm

Cedric Kiefer

Color of the Day
When we started to work on our website, we came to the point where we had to decide which color to use to highlight links and active categories. As our corporate design intends not to use a specific color to stay as flexible as possible on one hand, it was on the other hand hard to pick one to be used on our website. So it was obvious that we would use some kind of generative approach to generate different colors. As picking random colors is apparently uninspired, we thought about using some user data like the IP address, the version of the browser or the operating system to generate colors, that would in this case relate to the user itself. Another idea was to make use of some publicly available APIs like the Yahoo weather API or Googles finance API for example. But as there is still no onformative share on the stock market, it didn’t make much sense to use these kind of data sources as we wanted to keep it somehow personal and related to us.
So what we did instead was to install a webcam at our office and use a custom written software to take pictures triggered by some motion detection algorithm whenever any kind of object is put in front of the camera. From these pictures we extracted different kinds of colors. We worked on different approaches to get a perfect color with every picture taken. Calculating the average color didn’t work as it mostly results in some grey/brownish color. We used the fantastic colorUtils from Karsten Schmidts toxiclibs that offers different approaches to generate color palettes and sort them according to various criteria. We also sorted the colors by frequency of occurrence but realized, that it tends to be a color with low saturation, that doesn’t make a good link color. So we focused to get the color from a small area in the center of the image and added the option to adjust the brightness and saturation to finally get some good results.

Colors

Now as we got the final color we had to create a new css file and upload it to our web server. We used a slightly edited version of seltars »Post to web« Library to upload not only the changed css file but also the used source image to add it to our gallery, where we keep all the previous colors and images we´ve taken. We are currently working on an iPhone app to change the colors not only at our office but wherever we are by using the inbuilt camera. By the way, todays color is #FFCC00                , if you want to see the rest, check out the gallery

Previous Colors of the Day