Color, and how it is used, is one of the most important elements of any design. It also may be one of the hardest things to get right. A lot of the DIY websites I see don't really follow most design principles, but the misuse of color stands out the most. Color can completely turn visitors away from your site, your business could be the next best thing but color could keep people from finding that out.

This is going to be the first part of a multi-post series around Web Design, hopefully, one that will help some DIYers out there.

What is Color?

Color is a wavelength of light that our eye receives which is then processed by our brains to produce the sensation of seeing a color. Different wavelengths will produce different colors, for instance, the sun is actually made up of all colors but is interpreted by our brain as white. Color is determined by our brain based on hues, basically color identity, and saturation or the vividness of a hue that has not been mixed with white.

Alongside hue and saturation, a few other things can determine how a color appears. Brightness is how luminescent a color is, white is the maximum while black is the minimum. The tint of a color is the hue plus white, like red plus white will equal a pink. The shade is the hue plus black and tone is the hue plus gray.

Basic Color Hues

  • Primary Colors: Red, Green, Blue
  • Secondary Colors: created by mixing primary colors, orange, purple, green
  • Tertiary Colors: Color created by mixing a primary color with adjacent colors.

Why is Color so Important?

Color has the ability to change the emotions of your visitors or convey a certain feeling. For instance, banks tend to frequently use a shade of blue that conveys dependability, credibility, peacefulness, and professionalism. Imagine now if banks used a bright red which can convey a feeling of aggression or provocativeness. Even if you don't realize it your brain may be less trusting of the bright red bank website compared to the dark or navy blue styled site.

Using the right color can really positively affect your design, but using colors improperly can do serious damage. Red is a great example it can be used to make something seem alarming or passionate. Two very different emotions, but when color is used correctly both are possible. Another great example is black, which can be used to convey elegance or evil.

Color Harmonies

Color harmony is the practice of combining colors in a manner that is pleasing to the human eye. There are a lot of options when it comes to color harmonies, but understanding them will help you to better decide on which colors to use in your next design.

Common Color Harmonies

  • Complementary Colors: colors opposite each other on the color wheel. (Purple and Yellow)
  • Split Complementary: one color with two colors on each side of its complementary color. (Purple, Light Green, and Light Orange)
  • Triad: three colors evenly spaced on the color wheel.
  • Tetrad: four evenly spaced colors on the color wheel.
  • Analogous: Colors that are adjacent to each other on the color wheel.
  • Monochromatic: using a shade, tint, or tone of one color

Using these color harmonies can help you decide on your next color palette and avoid turning visitors away with poor color choices.

Be careful to ensure you have enough contrast within your color choices to properly color your design. You don't want to pick a dark blue background with a tint or shade only slightly different than your background color for the text, this could make the text extremely hard to read. You are also going to want to take color connotation into consideration.

Color Connotation

Color connotation is the feeling or meaning a color conveys. For example, you wouldn't want to use a bright red background on your website if you were not trying to alarm your visitors. This color can really be almost uncomfortable to look at. It is important to understand the meaning a color can convey when you are deciding on a color palette since this can have an impact on the performance of your site.

Common Color Connotations

  • Red: passion, warning, alarming
  • Orange: Welcoming, energizing
  • Yellow: happiness and positivity
  • Green: harmony, stability, nature
  • Blue: peace, relaxation, dependability, cold, sadness
  • Purple: luxury, romance, royalty
  • Brown: dependability, friendliness, nature
  • Black: power, elegance, darkness, evil
  • White: simplicity, purity, cleanliness

These are just some of the connotations these colors have. How they may make someone feel will vary with shade and tint of the color and will change based on culture and location. A good example of this is purple, depending on where in the world you are purple will generally have a connotation of either royalty and wealth or death and mourning.

Conclusion

Hopefully, this has helped you understand the value of color and how to decide on colors for your next project. If not, here are some more resources to help you continue with your color adventure.