Color Schemes

Good use of color can really make your app stand out, but color can be tricky. The best color schemes often come from other people or real world objects. These sites have collections of color schemes created by people who work with color every day. They let you search by color, theme, and popularity.

COLOURlovers

COLOURlovers is a creative community where people from around the world create
and share colors, palettes and patterns, discuss the latest trends and explore colorful
articles… All in the spirit of love. (yes, they wrote that part)

Kuler

Kuler at Adobe is a Flash based color searching site.

For more on the topic of color see my Color 101 article.

Icons

Every great app needs great icons. Not only for the app itself but also within the application for buttons and indicators.

The great FXExperience blog has several free PNG icon collections that are generic and useful for lots of things. Most are small so they work well on mobile devices. Free icons for your JavaFX applications @ FX Experience

The Crystal Clear icon set by Everaldo is licensed under LGPL and includes icons for apps, actions, devices and mimetypes.

The Nuvola icon set contains 600 icons with a cute cartoon feel to them.

Icon sets for Gnome, under various licenses

Tango Icon Library: another very complete set of desktop icons.

Sounds

FreeSound.org

Free Sound has a huge collection of user contributed effects, clips, and just plain weird sounds. Great for building sampled music and effects in your games

Jamendo

Jamendo is a music site containing only Creative Commons licensed works. The perfect place to find your next soundtrack.

Imagery & Textures

Lost Garden

Lost Garden focuses on video game design. The author, Danc, has literally decades of experience in the field. You can easily lose hours reading through amazing essays on the site. Today, however, we are here for the free game graphics. Spanning both vector and bitmap, retro and modern styles, Lost Garden has game graphics for many uses

Open Graphic Design and Think Design blog

OpenGraphicDesign.com has tons of cool shapes and vector artwork. They are great as starting points in Illustrator

ThinkDesignBlog.com has free textures and vector shapes. Good for backgrounds and skinning. Plus tons of inspiration articles.

Photos

For photos your best source is images licensed under Creative Commons at Flickr. Conveniently they have a search option for just such photos.

Inspiration

Well Placed Pixels is a blog containing only one thing: screenshots of beautiful software.

Color is important. We see in color. Different colors make us feel different ways, or remember different things. Most companies take their colors very seriously. Coca-Cola red is trademarked color. Pantone has copyrighted their color sets. The Brits feel it necessary to add an extra letter to their colours. Color is powerful but also dangerous. One false step and your carefully crafted website could look like this.

Okay, so maybe it won’t be that bad, but your choice of color has a huge effect on your designs. Still, color doesn’t have to be scary. In this article I’m going to cover the basics of color, how colors works from a physics and technical perspective, and some quick tips on choosing great colors. In a future article I’ll come back and cover the emotional aspects of color, and how to integrate color with other elements of design. This article will definitely not be exhaustive. Many PhDs have been earned exploring the expansive topic of color. Fortunately we just need to know the basics to begin using well balanced colors.

The Eye

The first thing to remember is that color doesn’t really exist. Color is simply the sensation in the brain caused by our eyes responding to different frequencies of light. You may have taken a physics class in high school where your teacher talked about the visible spectrum of light, which is the set of frequencies the human eye can see. You probably saw diagrams like this:

the rainbow represents the visible spectrum of light

Human eye response to light.

Our human eyeballs contain three kinds of color receptors that each respond to different ranges of light. These three ranges roughly correspond to red, green, and blue frequencies of light, (though only roughly). It’s this correspondence that makes the Red/Green/Blue (RGB) color model so convenient for electronic displays. By combining red, green and blue a monitor can simulate most colors in the visible spectrum. Note that this is only a rough correspondence. There are colors our eyes can see which monitors cannot reproduce, as well as colors screens can show that our eyes can’t really see. However, it’s close enough to work pretty well in practice. (see this Wikipedia article for more on color vision).

Subtractive and Additive Color Models

In order to represent color on a computer screen we need to have a model for color. There are roughly two kinds of color models: subtractive and additive. With subtractive the colors combine to equal black. Additive means the primary colors combine to equal white.

Subtractive color is how objects in the real world reflect light (it is often called reflective color for this reason). If you shine a white light on a red ball you will see only the red because the ball’s paint absorbs all of the frequencies of light other than red. The other colors have been subtracted from the white, leaving only red.

Additive color is used whenever something generates light rather than reflecting it, such as the phosphors in a traditional CRT, or the LCD segments in a modern flatscreen display. Red, green and blue are added in various amounts to create different colors, ultimately adding up to white.

In subtractive color the primaries are red, blue, and yellow, which you may remember from art class as a child. That’s because paint is subtractive, (and why mixing all of the colors together resulted in a dark brown mush). In additive color the primary colors are red green and blue.

This is the last I will discuss subtractive color, at least until we come back to printing technologies (which reflect light and are therefore subtractive). Additive color is used in virtually all interactive computer displays (the reflective electronic paper display made by eInk for Amazon’s Kindle is a notable exception). Since at least 99% of my likely audience is working additive color displays, that’s all I’ll cover here.

Basic Additive Color Models

So that’s it for theory of light. Now let’s talk about how computers actually put colors on screen. If you’ve worked with computer graphics at all you are probably familiar with the RGB color model. In this model a color is described by equal parts red green and blue. Virtually all computer systems use this model internally because it fits the hardware well and can be easily represented with a 32bit integer, using 8 bits for each color plus another for transparency (called the alpha channel for historical reasons). You can think of RGB as a cube with the value of each axis coming from one of the three colors. RGB is the most efficient format for the modern computer to use but it may not be the best for you, the programmer, to use. There is another common color model which you are likely to run across.

The RGB Color Cube

HSV / HSB Color Model

Hue, Saturation and Value (HSV) is the color model you are most likely to run into. It is sometimes called HSB, where the B stands for brightness instead of value. This model works hand in hand with the RGB color model, giving you a new way to specify colors which can then be converted into RGB for display.

Think of HSV as a cylinder where the hue is an angle (0 to 360) representing the pure color (red, magenta, yellow, etc). The distance to the center is the saturation going from the pure color (1.0 == fully saturated) to white (0.0 == no saturation). The height within the cylinder represents the value or brightness of the color, going from completely bright (1.0) to no brightness (black, 0.0).

The HSV Color Cylinder

There is also a related color model HSL/HSI where the third component is lightness or intensity. HSL is similar to HSV except that saturation and brightness are arranged differently, represented as a double cone with the pure colors at the center.

In practice all of the various computer color models convert into RGB for display, so which one you use is largely a matter of convenience for the particular task you are doing.

That’s enough theory for today. Here are a few quick tips that will help you pick and use color in your software designs.

Steal Someone Else’s Colors

The easiest way to pick colors is to let someone else do it. Go to one of these sites and search for something which matches your needs. For example, if I’m working on a design that feels like harvest or fall colors I could search for ‘autumn’.

ColourLovers.com search for ‘autumn’

Kuler.adobe.com search for ‘autumn’

Steal Some*thing* Else’s Colors

Pick colors from some existing source, such as a photo or object that you think is pretty. For example, Ken Orr and Kathryn Huxtable
started building a very nice Swing theme based on a photo of sea glass. If something looks pretty then it probably already has a good balanced color scheme; so steal it!

Sea Glass look and feel

DeGraeve.com has a simple webapp which will turn a photo into a color palette. I used it to on the photo below to create a nice tropical sea palette.

Color palette produced by DeGraeve.com

Pick a Color and Change One Thing

Monochromatic designs are easy to do and usually look good. Take one color and change one thing, such as its brightness or saturation. This is especially good for creating gradients.

That’s all for this week. Please let me know if there are any particular topics you’d like me to cover.

Links

• “Creating Consistently Colorful User Experiences” at UXBooth.com. Parts 1, 2, and 3.
• Color Theory, Wikipedia
• RGB Color Model, RGB
• HSL and HSV Color Models, HSV

All diagrams above are from Wikipedia.