Using Color Scheme Designer

What We Did- Color Scheme Designer

We wanted our site to look professional and subtle, but with a hint of youthful forwardness and fun. For a professional look, lots of white space is always a good way to go. We decided that the primary color scheme for our site should be lots of white with gray scale and highlighted with a few bright colors for contrast and energy. Emily noted that magenta was a good color to achieve this goal, so we headed over to the Color Scheme Designer to find another shade that would work well with magenta. We only wanted two "highlight" colors at most, so we selected the designer's complementary color scheme option:

Umm…. Okay. No. So, sometimes, complementary colors only look good together in theory. That blinding alien green color just won't do. This is why the human element is important in design! Let's try another combination, and analogic color scheme:

That's a lot less glaring. We can use magenta with a rich purple or orange tone to draw the eye to the important parts of our blog's layout. The colors are close enough together that they don't clash, but far enough apart that they're interesting to look at. It's still a bit bright for what we're going for though.

In the end, we decided on a color scheme completely independently of the designer's algorithms: purple highlights for our logo and turquoise for our links. Emilie and Verena toned down the saturation of the colors to go with the more understated grayscale tones, making our site more consistent. The design process involves a lot of tinkering, and fortunately it's fairly easy to tinker with colors up to the final stages of the design process.  

Remember: As with most principals of design, LESS IS MORE. Have fun playing with colors, but don't go overboard! Keep in mind our examples of professionally done websites above; The idea is to frame and highlight the content of your blog, and too many colors can be very distracting.

Exporting Your Work In Color Scheme Designer

In the far right hand corner, CSD's export tab gives you a number of options for exporting your color scheme. If you are manually entering the hex codes for your colors in a program such as Dreamweaver or Blogger, you can get the exact shades you want by exporting them using the HTML/CSS option. This will give you a grid of the hex codes representing the colors in your scheme, under various shades and saturations:

You're probably not going to use all of the colors in the palette. For instance, you could use colors in the first column for elements that stand out in your design, such as page titles and links, and colors from the third column for elements that stand back, such as page backgrounds or header bars. The HTML/CSS option also gives you a PURL to your palette, so you can link back to it or visit it another day.

The XML option will export your palette colors as an XML document. If you wanted to, you could use this option to create a database of different palettes and use XSLT to display them. This function won't help you add color to your webpage, however.

The text option merely generates a list of hex codes and RGB values for all of your colors. The ACO and GIMP options are for importing your palette into a graphics editor such as Photoshop or the GIMP.