Hot on HuffPost Tech:

See More Stories
Engadget for the iPhone: download the app now
AOL Tech

Screenshot Tour: Color Scheme Designer

Color Scheme Designer

Ahhh, color...you can't live with it, can't live without it. At least, that often seems to be the case for me; my color vision isn't exactly perfect, and sometimes I do need to pick colors for a design. I've been known to make some very odd "matches" (well, I thought they matched very well, while others begged to differ). I then found Adobe's Kuler, which is a great tool for browsing ready-made color schemes.

However, sometimes you need (or want to) create something completely new; a color scheme made from scratch that somehow works and fits well together. This is where the free Web application Color Scheme Designer comes in. Its deceptively simple, one-page interface packs a wealth of powerful features that let you create and test color schemes, and even have fun while doing so (the real test of a good application, in my opinion).

Since the interface is so jam-packed, I decided to break it down into a blow-by-blow screenshot tour. While the tour is extensive it doesn't contain everything, so if the feature you need isn't shown, don't hesitate to explore. After all, it's free.

This is the main interface. It's well laid-out, so it seems simple at first. However, if you look closely you can see how many tabs and menus are packed away to the sides. Let's explore ...

These wheels let you select what type of color-matching (or "harmony") your template should feature. The "slices" represent color sampling points on the pallet. Note that I selected a four-point harmony type called "tetrad."

Here you can see what that tetrad looks like on the main color wheel. You see those four circles? That's the harmony. When you grab one and drag it around the wheel, the others go with it and your whole pallete shifts. The colors change, but still match. On the upper-left side you see the "Hue" parameter, which is specified as a degree (0-360) and sets the position of the main color of the pallete on the wheel.


When you click the hue number, you get a small dialog which lets you specify it manually.

The Adjust Scheme tab lets you change the scheme without directly changing the hues you've selected. You can easily change the brightness or saturation of the whole scheme. So, you can find a scheme that you like and then make it more subdued, or louder, as needed for your design.

The Adjust Scheme tab also features a nice list of hue/saturation presets, letting you change your scheme apperance with a single click.

The Color List tab displays hex values of all the colors in the scheme. There are a lot of colors here because of the harmony type that I selected; you get only four colors when you select "mono." Of course, you don't have to use them all in your design.

On the right side of the window, you see what your scheme looks like. Again, many colors here, and of course, you won't use them all in the final design. You can see how it matches, though. When you check the "show text" box, it overlays some sample white/grey/black text over each swatch of color, so that you can see if it's readable.

The page example tools are very handy. Below you can see a light page example that shows you how your design works on a dummy Web page. You can click on the sample itself to change the secondary colors.

This is what a dark page, using the same color scheme, looks like.


You can see the five main swatches of your scheme on the top-right corner, and read their hex values when you hover over them. Another useful feature is the scheme permalink; you can see it right below the swatches, and when you click on it, you go back to your scheme again. You can email this link or bookmark it, so that you can collaborate on a scheme with others or show it to a client.

Another cool feature lets you select a color-blindness type from an extensive list, and see what your scheme supposedly looks like to a person suffering that type of color blindness. I actually am color blind, but obviously, there is no easy way to test this feature.

Once you're done designing your scheme, it's time to export and use it. One of the only downsides to this tool is that it doesn't export Illustrator or CorelDraw palettes. It does, however, export Photoshop palettes, so you might be able to import them. Linux users might also like the GIMP palette option.

Bottom line: This tool is a nice surprise. It's great to stumble upon something so powerful and slick amidst the sea of mediocre and cluttered "design tools." It's very, very nice.

Share StumbleUpon.com

Tags: color, css, design, tools, webapps, webdesign

Comments

3