My Favorite Sites: Kuler
When designing anything – websites, pamphlets, a ‘Lost Dog’ poster – color is one of your major considerations. I’m fond of saying that I never took a Color Theory course in college, and that’s absolutely true. When faced with a choice between one shade of purple and another, or to select brown or black to go with a particular shade of green, I immediately freeze up. So, I need resources.
The website Kuler from Adobe (pronounced ‘color’, if you can believe that) is a very powerful tool for the forces of beauty and useability. Try out this link to see what I’m talking about: Awesome Color Picker. You’ll need the latest version of Flash Player to get it to function for you. Let me walk you around some of the possibilities:
First, at the very top – do you want to register on this site? That’s a good question. The short answer is ‘not yet’. You can use the functionality of Kuler without a registration. If you’d like to save color schemes for later use, or to throw them out to the community, you’ll need an account. Let’s not get ahead of ourselves.
Next, what is the color scheme that I see in front of me? It happens to be one of the more popular saved schemes that a user has created recently. If you look at the list of schemes directly below it, you can see that clicking one of your options on the list changes the scheme above. Pretty nice, to be able to use color schemes that others have created and still others have voted in.
Finally, you have the bottom-left corner. You can see that you’re currently in the Themes section and browsing some Highly Rated schemes; you can also search by key terms for a scheme that does what you need it to do. Anytime you like, click the button that looks like color sliders (see inset), and you can get the number values (HSV, RGB, CMYK, HEX) that represent the scheme you like. Then use those number values to input into the program of your choice (Photoshop, Dreamweaver, the like). One of my favorite features, though, is the button that says ‘Create’. I’ll click there and dive into more possibilities.
As you can see, you’re currently creating a color scheme that adheres to a color theory rule called ‘Analogous’. This means that the colors within the scheme are all on the same part of the color wheel, and all have the same base color. As you can see, this results in a scheme that works, but is very one-note. This can be perfect for deciding which colors to use in addition to white, black, or brown.
If you change rules, you’ll see that the markers on the color wheel slide around, giving you greens with reds, or even yellows and blues with your reds (Superman color scheme!). Then, when you think you’ve seen enough from the red end of the spectrum, feel free to grab the markers on the wheel and begin pulling them around the wheel, or in and out. A color from the outside part of the wheel is very ’saturated’, or has a lot of pigment, whereas the ones from the center of the wheel are washed out, or ‘desaturated’.
Between these two possibilities (using someone else’s scheme or creating your own), you should be pretty well set on colors for most of your designs. However, there are times when you need a little something more. For example, if you’d like a design that feels ‘beachy’ or one that reminds you of a warm autumn afternoon in the Northeast, you may not be able to find the exact colors that ring true. For that purpose, you have the option to Create your color scheme From an Image. Simply click that option on the left, then upload the photo of your choice. Kuler automatically pulls complementary colors from the photograph. It’s a beautiful thing.
Learn iT! offers courses that use these tools regularly. You may want to check out our Adobe Illustrator line, or perhaps come into our Guided Web Design Lab. This will give you ample opportunity to select complementary colors and see if they work for your designs!
