The Autostylr

...or how to automagically style a webpage.

What you're looking at is not your typical web page. This page automatically styles itself.


What's happening is that there are ten random test album cover images above. Every time you the Call-to-Action above, a new random image is pulled from a folder, and the app re-processes the image, then automatically changes the page background color, h1, h2, and p colors. This methodology programmatically brings design consistency to any web page.

The significance here is that very few websites in the world have been able to achieve this without human intervention! Future applications include:

I came up with this approach after having styled over 200 mobile websites. To make any website visually "pop", your background color, h1, and h2 colors must be derived from the most popular colors in the logo or header image. Eventually I started experimenting with the programmatic approach to discovering the key colors of an image, and then automatically applying them to key page elements.

To do: