O.L. Design

There has been some talk about the color palette I use on this site, and I’ve gotten both positive and negative responses on it since I released the redesign a couple of days ago. Since it seems to interest people, I thought I’d write a little bit about how I chose the colors for the new looks of this site.

Those of you who have been visiting this site for some time, and have seen its previous looks, have probably noticed that I often keep it pretty simple when it comes to colors. Just take a look at my portfolio, and you’ll see what I mean. Since I don’t really consider myself a color expert, I often take the easy way out, choosing one main color and leave the rest in shades of grey, black or white. While this often results in a pretty clean and minimalistic looking design — which I like — I was becoming a bit fed up with the constant lack of color. So, I started to look for things which could hopefully inspire me to create a more diverse palette for the redesign.

And here comes the secret. The color palette is essentially a rip-off! Following in the footsteps of Picasso, and probably more relevant here, Cameron Moll, I shamelessly stole some colors from the absolutely jaw-dropping Burberry Prorsum Fall 2006 collection for men (which I would never afford even a single pair of socks from anyway, so stealing felt more appropriate). Take a look at this photo, and you’ll see what I mean. So, depending on how you look at it, either blame or thank Christopher Bailey for the new colors of Lonnroth.info.

Applying the colors

I felt like I had a solid start with that Burberry photo, and I started to think about how I could apply the colors to the design I had started to work on. Although I did at one point experiment with using dark brown as the main background color, I knew I wanted a light background, since I often prefer that myself when reading text on web sites, so I used the darker browns for the header, footer and text instead.

I soon realized that the pretty intense blues (used on the logo in the header) wouldn’t work if used too much, so I needed one more color which could be used for links. The solution was simple — I basically just inverted the blue color, tweaked it a bit, and out came the orange, which I think works really well. Inverting colors is a technique I use often, I think contrasting colors often work great together. Recommended! To keep the blue to a minimum, and since I had come up with the idea that the orange color should symbolize something that lead outside the current page as opposed to the blue color which would then mean “this page’s unique content” or something like that, I also used the orange for the lines above the headings in the right-most column, which content is more related to stuff not in the current page (i.e. links to other entries, links to other sites).

So, all-in-all, finding a great color combination somewhere, and a bit of planning, testing and inverting colors, was the key to how it looks now. I will definitely continue to explore the world of colors for future works.