Understanding Color

Demystifying the process of choosing and understanding your color palette

Scroll down...

Content

Resources

Comments

Colored Houses Canal

Color is one of those things that seems simple at first (yeah, we've all seen the color wheel) but can quickly become overwhelmingly complex when you try to make it work for you. As with other design elements we've discussed, it's important to avoid allowing color to overwhelm your design.

Color should help the user navigate the page, create the appropriate emotional context, and otherwise fade from notice. The best color schemes are unobtrusive. The worst ones look overengineered and jump out at you.

In this lesson, you'll learn everything from the basics of color itself to how to choose the right color scheme for your site. Don't be overwhelmed if this is all new to you -- the best thing to take away is an appreciation for the diversity of feelings that colors can inspire in your users and a basic understanding of the kinds of color schemes that are available to you.

The Basics of Color

Colored Cans

This is certainly a subject best introduced by others:

Read Defining and Recognizing Colors and also Understanding the Qualities and Characteristics of Color by Rachel Shillcock of Tutsplus for a basic understanding of color.

To represent color on your computer screen, you break down each color into it's RGB (red-green-blue) components. They are commonly referenced using the Hexadecimal notation (e.g. #2f5dee). Read A Quick Color Explanation by Joe Burns for, well, a quick explanation. You can reference the Smashing article in the Resources tab if you'd like to dive deeper but it's not necessary right now.

Using Color Yourself

Color Wheel Photo

Read Selecting Your Own Color Scheme from Rachel Shillcock at TutsPlus to begin to apply this to your own websites.

There are a number of tools on the web which will help you to better understand and choose colors:

  • Colorzilla Eyedropper (for both Firefox and Chrome) is an add-on which simply lets you grab a color that you like off of a website.
  • Paletton.com will generate color schemes for you. You just specify a source color and the kind of scheme that you'd like to use with it (e.g. tetradic, monochrome...) and the tool does the rest.

Takeaways

  • As usual, the best takeaway is to gain an appreciation for how color is used on the web around you. The more you pay attention, the more you'll learn.
  • That said, you should at least be familiar with monochrome and complementary color schemes because they are so common. All you really need in the end of the day is a main color and some sort of highlight color for CTAs and other standout items.
  • You should understand how RGB and Hex colors are defined because they are used all over the web.


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Sorry, comments aren't active just yet!

Next Lesson: What are Mockups?