Blueprint for Design

This week, I’d like to share a useful website with everyone, Color Scheme Designer.  I use this site with just about every project these days.  It’s quite simple.  First, decide a color to start with.  Plug the number in, and you are provided with a list of colors that relate and/or look good with your original.  The site is most useful when figuring out colors for a website project, but can be used for just about any graphic design project.  You may even be an interior designer looking to find some colors for your next project, this would work.  The site works with web based colors so you will be using a six-digit number referred to as a hex triplet of a hexadecimal number.

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The color white would be referred to as FFFFFF.

To begin, let’s take the blue color from the Blueprint for Design logo at the top left of this site.  The hexadecimal number is 558FAB.  On the Color Scheme Designer website, click the area I have highlighted with the red box in the below image.

A window will pop up to add your six digit color value.  Once you click OK, then the magic starts happening.  You are first introduced to the mono color scheme.  In our case, the colors are variations of blue.  (The image above shows this.)  Other viewing  options include; mono, complement, triad, tetrad, analogic, accented, and analogic.  Each one will give you a set of colors that, according to the color wheel, mathematically look good together.  For instance, after entering the color 558FAB, I then clicked on triad in the top left and this is the color chart I was given.

From here, there are a number of different things you can explore.  You can check the tick box in the bottom right to see what text looks like overlaid on the colors.  You can click ‘Color List’ on the bottom left to see what the numeric values of all the colors are.  You can even click on the links to the bottom right that say ‘Light Page Example’ or ‘Dark Page Example’ to see a mock up of a website with your selected color scheme.  Here is what my color choice looks like on a light page example.

Another great feature is the ability to export the color scheme you’ve created in various formats. A drop-down menu in the upper right contains all the export options.  I use Photoshop, and for most web designers, I suspect this is what you will use.  Here is how to do it.

A Quick Guide for Importing Color Palettes in Photoshop

1. Export your color palette from Color Scheme Designer and save to your computer.

2. Open Adobe Photoshop and open your Swatches tab. (Pictured below.)

3. Click on the drop down arrow at the right and choose Load Swatches.

4. Browse to the .ACO file that you saved from Color Scheme Designer and open it.

5. The selection of colors are now displayed.

---

There are quite a few resources on color theory on the web.  A recent article was written on Smashing Magazine’s website called “Color Theory for Designers, Part 1: The Meaning of Color.”  I found it to be quite interesting.  Near the bottom of that post are a few other links to useful color theory articles.

---

Do you have any websites or applications to recommend on choosing colors for designs? Is there a process that you use?