Creating a Color Palette

Tweet

So without delay let’s continue our series on color. Having last week looked at color schemes, let’s continue now with palettes, and how to create them. We’ll also finish by examining a few useful tools that are near indispensable to anyone working with color on the web.

“A palette?” you might ask. “Isn’t that the same as a color scheme?” Well, yes and no. A color scheme will only give you two, three, or four colors to work with. Although a limited palette can be beautiful, you’re probably going to need a few more colors to design your website. It’s better to nail down this process while you’re thinking in the language of color, rather than pick ancillary colors at random as you need them for your layout. The number of colors you’ll need will depend on the complexity of your design. I like to start off with at least five or six solid color choices before I even think about applying them to my layout.

Hexadecimal Notation

Since this is the stage in which we become specific about each color we’re choosing, we’re going to need a standard way to refer to the colors in our palette. You probably already know about hexadecimal RGB color values, but if you don’t, here’s the quick drive-through version of the theory.

The hexadecimal counting system is much like the decimal counting system you’re used to, except that instead of being based on multiples of ten, it’s based on multiples of sixteen, and has six additional digits: A (which is the equivalent of decimal 10), B (11), C (12), D (13), E (14), and F (15). Table 1, “Counting from 1 to 255 in hexadecimal” shows how we count from 1 to 255 in decimal and hexadecimal.

So, what does this have to do with color palettes? Earlier, I explained that your monitor uses an additive RGB color model, and that every pixel in the screen is “painted” using a combination of red, green, and blue light. What I failed to mention was that there are 256 different levels of red light, 256 levels of green light, and 256 levels of blue light; we can use these to create 16,777,216 distinct colors (yup, that’s over sixteen million seven hundred thousand colors!).

Thankfully, we have a way of describing each of these colors quickly and easily—using hexadecimal color codes. A hexadecimal color code specifies the levels of red, green, and blue that go into a given color. For example, combining red, green, and blue at their highest possible levels makes white. To use white in a web page, we set its red component to 255 (FF in hexadecimal), its green component to 255 (FF), and its blue component to 255 (FF). We then combine these hexadecimal values in the order red, green, and blue and come up with the code FFFFFF.

Decimal Hexadecimal Decimal Hexadecimal Decimal Hexadecimal
0 00 16 10 32 20
1 01 17 11 33 21
2 02 18 12 34 22
3 03 19 13 35 23
4 04 20 14
5 05 21 15 245 F5
6 06 22 16 246 F6
7 07 23 17 247 F7
8 08 24 18 248 F8
9 09 25 19 249 F9
10 0A 26 1A 250 FA
11 0B 27 1B 251 FB
12 0C 28 1C 252 FC
13 0D 29 1D 253 FD
14 0E 30 1E 254 FE
15 0F 31 1F 255 FF

Table 1, “Counting from 1 to 255 in hexadecimal”

Black, which is made by setting red, green, and blue to zero (00), has the code 000000. Red, which we can create by setting red to FF and leaving green and blue at 00, has the code FF0000. Figure 1, “Hexadecimal color examples” shows several standard colors with their hex value. After you’ve seen and used a lot of hex colors, you’ll start to see the colors in the code. #F26382, for instance, is a coral-colored shade of pink and #371324 is the color of a slightly purple red wine. Once you think you’ve reached that Jedi Hex-Master status, try a little game of “What the Hex?

Fig. 1, Hexadecimal color examples
Fig. 1, “Hexadecimal color examples”

Color Tools and Resources

Now we all have a basic understanding of how colors are represented as hexadecimal values. The next step is to find out those values for each color with which we want to work. Many resources are available to help you choose colors for your palette, including a ton of stand-alone applications and plugins for both Macs and PCs. Here are a few of my favorites:

Color Scheme Designer 3

Although there are many online color pickers out there, my favorite is Color Scheme Designer (formerly known as the WellStyled Color Scheme Generator), shown in Figure 2, Color Scheme Designer 3 — the author’s pick”. Where many other applications use a RGB or CMYK color wheel, this awesome HTML tool uses the traditional red, yellow, and blue color wheel. With just a few clicks, you can choose and customize a color scheme, as well as identify a variety of other colors from which to build a harmonious palette. Once you have a palette you like, you can use the Vision Simulator to see what those colors look like to people with various levels of color blindness; then you can export your colors as HTML/CSS, XML, Text, a Photoshop palette, or a GIMP palette.

Fig. 2, Color Scheme Designer 3—the author’s pick
Fig. 2, Color Scheme Designer 3 — the author’s pick

Adobe Kuler

Another excellent color selection resource is Adobe Kuler. On the Kuler website, you can create color combinations based on the standard color scheme configuration similar to the way Color Scheme Designer 3 works. Unlike that site, though, Kuler will also generate a palette from an uploaded image. Another key feature of Kuler is its community. If you create a login for the site, you can save and share your color palettes with other Kuler users, and anyone can browse the most-recent and highest-rated color combinations on the site. Figure 3, “The Adobe Kuler AIR application” shows the handy AIR app version of the site, which can be installed on both Macs and PCs.

Fig. 3, The Adobe Kuler AIR application
Fig. 3, “The Adobe Kuler AIR application”

COLOURlovers.com

If Kuler provides too limited a community to suit your social needs, the COLOURlovers website, shown in Figure 4, “COLOURlovers — for lovers of color”, certainly will. It’s less of a color generator tool and more of an inspiration-sharing website. It started off with just color schemes, but now you can also share patterns and view color (or colour if you insist) inspirations for a variety of design fields.

Fig. 4, COLOURlovers — for lovers of color
Fig. 4, “COLOURlovers — for lovers of color”

Color Stream iPhone App

Fig. 5, Palettes on the go with Color StreamColor Stream is an app (available for $2.99 from the iTunes store) that puts some of the best features of Color Scheme Designer and Adobe Kuler into the palm of your hand. Created by Sahil Lavingia, Color Stream lets you create and store color palettes that are either created from scratch, extracted from a photo, or even generated automatically using a built-in color schemer. It really is an elegant, well-polished application that makes picking a color palette fun and easy. Figure 5, “Palettes on the go with Color Stream” on the right shows what selecting a color palette from a photo looks like in the app.

Pictaculous

Kuler and COLOURLovers are great tools to meticulously tweak and gain social feedback about color schemes you’re working on, but what if you see some color inspiration on the go? That’s where Pictaculous comes in handy. Pictaculous is a free MailChimp Labs project that provides color schemes based on your pictures via email. You simply take a picture with your smartphone and email it to colors@mailchimp.com. Within a couple of minutes, you’ll receive an email with a five-color palette, an assortment of suggested color schemes from Kuler and COLOURLovers, and an attached Adobe color palette (.aco) file. There are alternatives to doing it by email, though. Figure 6, “Pictaculous Color” shows Pictaculous’s color suggestions for a picture that I uploaded to the service from my computer.

Fig. 6, Pictaculous Color
Fig. 6, “Pictaculous Color”

Colour Contrast Check

When choosing the colors for your palettes, it’s always good to try to pick at least two colors that have enough contrast to be used as background and text colors. Having a proper contrast between text and background colors is essential for interactive design; without it, some people may be unable to read your site. An easy way to confirm that there’s enough contrast between two colors is to plug the RGB values for your foreground and background into Jonathan Snook’s Colour Contrast Check website.

Sometimes combinations that you think would be valid fail to meet the color difference and brightness requirements of the Web. As Jonathan says in his blog post about the contrast checker, “… this tool shouldn’t be taken as gospel … but rather should help guide you towards better colour choices.”

Being able to come up with a unique color palette is all about keeping your eyes open. If you see a website, advertisement, illustration, or other graphic that stands out, try to figure out what the dominant colors are, and what type of color scheme underlies the palette. Remember, though, that color inspiration can come from anywhere. Is there a color that reminds you of a certain song? How about the colors of your favorite meal? Maybe there’s even a color in that tacky seventies wallpaper in your parents’ house that would work well for you. Being aware of the kinds of issues associated with color usage will give you an eye for color and an ability to come up with original palettes that fulfill the requirements of your client.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition is out now!). This look at palettes concludes the chapters on color, but be sure to look out for further articles from the book here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chris

    I’d tried everything you mentioned except Color Scheme Designer … turns out that’s just what I needed. Thanks!

  • Jonahpeters

    You are missing http://colorpilgrim.com It is the best source for ready color schemes classified by mood, nature, architecture, graphics et al

  • http://allaccountinglogos.blog.com/ Accounting Logo Design

    Amazing post, this is one of the best post i have ever browsed, going to bookmark, useful information listed about color palette. Thanks for sharing

  • http://blacksmoke.plutohost.net/ Sag-e-Attar Junaid Atari

    You have done the great stuff, Cool, 10/10

  • http://twitter.com/TheJNorky Jennifer Hart

    I really love Kuler.  I’ve used it several times for picking out colors for a website design layout.  I really like the fact that you can sample colors from a graphic.

  • http://www.atmedia.co/ atmedia

    Colour pallets site is great, couldn’t do without it.

  • http://realcolors.makan-studios.com Andrei Blaj

    There is also Real Colors, an app that automatically generates color palettes from photos on Android.
    You can download it here: http://bit.ly/NfKU5Q