Color 101

Color 101

A very important element in building a website is color. Naturally, people connect certain colors with different emotions and feelings. People of the world see color differently. This is because tradition, religion, and symbolism affects how people feel about color. In order to create a good user experience it is very important that your palette is reflected to your audience. First, let’s look at a few dominant colors and how they can evoke different emotions.

  • Red is unquestionably connected to excitement and high energy. Red is often associated as being stimulating, dynamic, sexy, exciting and provocative.
  • Brown is the ultimate earth color often associated with hearth and home. Brown is rich, rustic, sheltering and durable.
  • Pink has diverse mood swings, depending on its value or intensity. It is most often associated with being happy, sweet, romantic, youthful and spirited.
  • Orange being the hottest of all colors frequently has a negative association as being loud. However, it is also known as being friendly, vital, tangy, energizing and inviting.
  • Green offers the widest range of choices of all the colors in the spectrum. While most people associate green with nature, it is often associated as being fresh, healing and soothing.
  • Blackis most closely associated with sophistication and power. It’s strong, classic, mysterious and elegant.

Now that we have an idea of how different tints, hues and shades of color can be associated with feelings let’s take a brief look at some traditional color schemes. Understanding these will help you to understand how colors harmonize with each other creating the perfect palette for your website.

  • Primary Just like we learned in elementary school primary colors (red, yellow and blue) are the only 3 colors that cannot be mixed or formed by any combination of other colors. All other colors are created from these 3 hues.
  • Secondary Secondary colors are green, orange, and purple. These are created by combining the 3 primary colors together.
  • Tertiary Tertiary colors, also known as the “in-between” colors are red-orange, blue-green, red-purple, yellow-orange, blue-purple, and yellow-green.
  • Complimentary This color scheme uses two colors that are on the opposite side of the color wheel such as red and green or yellow and violet. Because there is a strong contrast between complimentary colors websites using this color scheme tend to be bold.
  • Analogous Analogous colors like red and orange, blue and green, etc. are colors right next to each other on the color wheel. Because of the lack of contrast in these colors this scheme would be great for a serene feel.

Next, if you are just starting out in graphic or web design it is important to recognize the differences between color formats. There are three that you should know and they are RGB, CMYK and PMS. It can get pretty scientific but here is the basic rundown.

  • RGB stands for Red, Green and Blue. RGB is a system for representing the colors that monitors and televisions use to present colors to you. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. RGB color varies light, instead of pigment. Use this format when creating a palette that will be seen onscreen such as a website or graphics.
  • CMYK refers to four-color process printing, using Cyan, Magenta, Yellow, and Black inks. This format is best to use when your final output will printed.
  • PMS stands for PANTONE MATCHING SYSTEM. This system is used to set standards for colors. The difference between colors on the computer screen, printed products and the actual color swatch can often vary quite a bit. The PANTONE MATCHING SYSTEM alleviates some of these struggles.

Finally, start experimenting. I have listed a few of my favorites below. These are great for color inspiration with an endless amount of possibilities. Kuler COLOURlovers Color Scheme Designer

Related Posts

Creating AJAX Requests with Drupal 7

Ahmad Kharbat
Read more

Creating Custom Fields In Drupal Using Display Suite

Kyle Taylor
Read more

Drupal In a Box - Creating really custom functionality within Drupal 7

Ahmad Kharbat
Read more

How to use Drupal Bootstrap with Webforms

Kristin Brinner
Read more

How to add CAPTCHA to all Drupal Webforms

Kristin Brinner
Read more

drupal_set_message() Cheatsheet: Variables, links, and formatting

Kristin Brinner
Read more