Color Scheme Designer Explained

As I’ve talked about in my last article,  choosing the right colors for your template is one of the major components in making your website design successful. And as I’ve promised, here’s an article explaining how to use the Color Scheme Designer 3.

CSD overview

Type of Color Coordination (1.): You can choose between six different color coordinations or settings. For ever color you choose, under any setting, you will get five different color settings. Two of lighter shade, two of darker shade, and the original color

• The first is Monochromatic which will give you appropriate lighter and darker versions of the original color
• The second is Complement which will show you two monochromatic interpretations. One for the original color and the second for its complement color, the color on the opposite side of the color wheel.
• The third is Triad where you will have an option to choose the main color, and two more colors. Imagine the complementary colors, if you connect the two dots, they will make a cross section of the color wheel. The two other colors are always away from each other at the same angle in respect to the cross-section line. The angle is adjustable from 90 to 180 degrees away from the original color.
• The fourth option is Tetrad which basically features two Complementary pairs of colors.
• The fifth is Analogic, which works similar to the Triad except now you can choose colors 0 – 90 degrees away from the original color
• The last one is Accented Analogic which is the same as analogic except it features a fourth color which is the Complementary color to the original color.

The Color Wheel (2.): The Color Wheel is the most essential part of this website. Here you have a range of hues that you can choose from and set the first color and the others.  Here are its features:

• In the upper left corner is the Hue number which can be used in photoshop when color picking
• In the upper right corner is the Angle in degrees. This number is invisible in Mono and Complement color options
• In the center is the actual color wheel with the signs “cold” and “warm” to indicate the type of color present. You’ll be able to move the grey dot on the slider around the circle to choose the hue you want
• In the bottom left corner is the RGB breakdown of the color you’ve chosen. It’s set to percent and you’ll be able to plug these number into photoshop and other application to get the color you’ve chosen
• In the bottom right corner is the Hex value of the number.

Color Wheel Options (3.): This part of the website will let you choose to adjust the scheme and/or get the color list of the colors you’ve chosen.

• Adjusting the scheme:

Adjusting the scheme

I won’t go into much detail about this section because I rarely ever use it but for you creative minds, I will enlighten you about some of the basics. This part of the website lets you adjust the colors, both the original and the rest. As you can see, there’s a preset drop-down menu. Here you have an option to choose the contrast you want among the color variants you chose. Play around with it and see what you can come up with. On the left side here, you can see the Saturation/Brightness graphing plane. As you shift around the grey dot, you will add or subtract brightness of the colors, or you can shift around the saturation from super-saturated to black and white, and everything in between. On the right is the Scheme Contrast graphing plane. Here, you’ll be able to adjust the color variants (the darks and lights of the original color). If you click on the “adjust variants” tab, you’ll see that you can adjust the saturation/brightness for each individual color of the scheme you’ve created so far. But that’s it, the best way to learn your way around this part of the website is just to play around. There is no way to really say what’s the best way to adjust your colors or what to do.

• Color List:

Color List

Here’s the color list. I used the Tetrad option for the color-picking. Each color variant has its hex number present as well as its little square preview. The colors correspond directly to the scheme preview.

Scheme Preview (4.): The Scheme Preview will show you the original colors you’ve chosen through any Color Coordination option. On the left side are the light variants and on the right side are the darker variants. This is not true for all color options though. If you choose anything other than the Monochromatic option, the lighter and darker variants will switch and/or cycle. Sometimes, you’ll see the dark on the right, and sometimes there will be a light and a dark color on the left. The Color List (shown above) will give you all the hex color values shown here. The first color is the upper left, the second is bottom left, then the middle, then the upper right, and lower right for each Main Color that is set. If you hover over the individual colors, you’ll see the hex value as well. One more thing, there’s a check button on the bottom right corner which will let you preview what white, grey, and black text would look like against all the color variants

Examples (5.): I love this feature. If you click on the light example, a preview webpage will pop-up that uses the colors you’ve just spent all that time setting. This example will feature lighter colors and white while the dark example will show you the version featuring the darker colors and more black. You can preview this any time you want during the process. It’ll also give you an inspiration on how to use the colors.

These are the most important parts of the website. But let’s take a quick over-view of the rest. Right above the “Scheme Preview” are five boxes once again showing the colors but more importantly, they’ll show you the scheme ID. Here’s how you use it, when you type in http://colorschemedesigner.com/ add a “#” and the scheme ID, and here you go, you can favorite this scheme or bookmark it and you’ll have all your settings saved. For example, the ID for a scheme I just put together is “#2m127w0w0w0w0″ the URL address for that would be http://colorschemedesigner.com/#2m127w0w0w0w0 or you can just click on the link that shows your ID and it’ll take you to the URL address that you can favorite or bookmark.

Above that are more options such as “Undo” and “Redo” which are pretty self-explanatory. There’s a “Random” option which will process a random color scheme. There’s also a “vision simulation”, use that only if you have a vision problem such as colorblindness. You can also “Export” your colors and settings into an HTML+CSS format, a text file, and other. Finally, there’s a help button. And don’t forget about the “Instant Designer Shop” which is an online store for Website Templates, Logos, and other services.

Anyways, that’s it, that’s all you need to know about the Color Scheme Designer 3 and I hope you start using it as soon as possible, it’s an amazing tool!