Adjusting my Design Approach

This week, while continuing work on the makahiki-rui project, I had an epiphany.  Rather than trying to "create" a decent color palette from scratch, I decided to try another approach.  When creating a palette from scratch, you have to think creatively about how different colors work together, contrast, juxtaposition, etc.  I haven't studied color theory in well over 10 years, so I did not want to go that route.  Instead, I was thinking about how awesome nature looks and the colors out there seem to complement each other very well.  So, if nature's color palette is so darn perfect, why should I try to redesign the wheel?

That's when I decided to pick a series of different Hawai'i and beach related images to work with.  Although the images I found did not have explicit copyright information, they're not all that great.  I plan to take a trip out to the beach to get some pictures with a better camera.  For now, I decided to go with an ocean cliff theme.  Something that would represent the goal of sustainable energy and friendliness to our environment, which the Kukui Cup represents.  I really liked the colors represented in the ocean.  There are lots of blues and greens, which all work well together.  Beaches are particularly interesting, as they have some nice muted browns and yellows to add to the blue sky and ocean.  I will be doing some beach themes next, but for now I decided to stick with an image of the ocean next to a cliff.  This was the base from which I implemented my test of extracting a color palette from a nature scene.

The first step towards integrating a color scheme from nature is to figure out which colors you feel represent the image.  I used a color-picker tool to sample different colors from various parts of the image.  Oddly enough, many of the colors in an image are darker than I would expect them to be.  This prompted me to be deliberate about light versus dark colors, and to get a good sampling of both.  You want some colors to be darker, so that you can use them as shadows for page objects, text, borders, or as part of a gradient effect.  You also want lighter colors to use a backgrounds for your text, and to lighten the page so that people do not feel as though they're in a dark closet when they look at your site.  Once you find colors that you like, most graphics editors have the option to add those colors to a palette, for use later in editing.  From there, you can see the RGB values of each color.  RGB stands for Red, Green, and Blue.  Those are the colors of light which your computer screen uses to mix together for each pixel to produce all the colors you see on the screen.

Now, I realize that you can use RGB values when editing colors in CSS files.  But I am a coder at heart, and I randomly felt like writing a short java app to translate a string of integer values, separated by commas, into a hexadecimal representation.

That can be found here: https://gist.github.com/1900814

After getting the color scheme figured out, I made some changes to the navigation bar, and the header area to homogenize the look and feel.  I borrowed some style inspiration from Gregory Burgess with regards to the header area.

Here's a link to what he did: http://code.google.com/p/kukuicup-rui/source/browse/trunk/CSS-Refactor/theme-2.png

All-in-all, this was a good test.  I learned how to take a better approach to color palette creation and I have some inspiration with which I can move forward to create new themes.