Ekklesia 360

Your Church Website, Your Colors, and You

Posted by Jimmy Pham

   

Color_Wheel2.jpg

Selecting colors can play a very important role in your church website design. Colors can help you with setting a tone or conveying a message. But picking colors for your church website can be difficult. Where do I start? Do I just pick random colors? Do I copy another site’s colors?

Well, put the color picker down for a minute and join me as we dive into the world of color theory.

How to Select Colors

A good thing to consider while selecting colors is your brand. What is the message you want to give your audience? What promise are you making them with what you have to offer. A good place to start is by selecting a major color in your logo. This is to create consistency for your brand across different mediums. This is another consideration when you talk to your designer

If you don’t want to pick a color based on your logo, here are a few tips:

  • One thing to consider is that different colors can convey different messages or themes. You want to have a reason for picking certain colors and not start picking random colors.
  • You can pick a color based on meaning, for example, purple can resemble royalty. Yellow is often associated as the color of sunshine and energy. Blue is the color of the sky and ocean, it can represent trust and loyalty. Orange can symbolize urgency and enthusiasm.
  • You can also pick a color based on the emotion it evokes. Blue can be calming and have more of a contemplative feel. Green can inspire growth and resemble youthfulness.

Now that you’ve picked a starting color you might be asking yourself where do I go from here?

Color Wheel

Remember the color wheel from elementary school art class? There's actually a use for it. Color theory creates a structure for color, it provides a guide for color combinations. A good way to visualize color theory is by using the color wheel.  

Color_Wheel2.jpg

We have primary colors (red, blue, yellow), then secondary colors (green, orange, purple), and tertiary colors (yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green). As you see how colors relate to each other, let's look at some ways they can be used. 

Color Schemes

Single Color

As the name suggests, single color sites will use a single color alongside black, white or a neutral gray.

Color_Wheel-single.jpg

Analogous Colors

Two colors that are side by side on the color wheel are called analagous and it can look like this.

Color_Wheel-ana.jpg

Complementary Colors

Two colors which are directly opposite each other on the wheel, are called complementary. A classic example is green and red for Christmas. Another example can look like this.

Color_Wheel-comp.jpg

Triadic colors

When you use three colors that are evenly spaced on the color wheel, that is called a triadic color scheme. It can look like this.

Color_Wheel-tri.jpg

Tetradic colors

If you use two sets of complementary colors, it's called tetradic. The four colors don’t have to be evenly spaced around the color wheel, although they can be.

Color_Wheel-tet.jpg

How to Use the Colors You’ve Selected

Now that you have a method of selecting colors. It’s a completely different beast to use those colors. Here are a few suggestions about using color on your site.

Try to use the colors in the same order of importance. For main headings, use your first color. For buttons, callout boxes, secondary title headings, etc. follow a consistent pattern throughout your site. This way your audience can subconsciously learn to recognize what’s the most important content. Visually lead your viewers by drawing their focus to the most important things.

If you have a single color scheme:

  • Use black, white, and gray more dominantly and use your single color in certain sections. You don’t want to overwhelm your visitor with too much of a single color.

Using_color-single.jpg

If you have a multi-color scheme:

  • First, remember to plan the hierarchy of your colors.
  • You can have one color be the dominant color, and then use the other color(s) as accent colors.

Using_color-one_dom.jpg

  • Or you can have black or gray be your dominant color and then use the other colors you selected as accent colors.

Using_color-accent.jpg

In Review

  • Pick a starting color
  • Select a color scheme
  • Select additional colors as necessary
  • Determine a hierarchy of colors and use it consistently


That’s it! You're well on your way to coloring your site. Getting excited about color isn't just for kids. Go and be creative!

Topics: Design, Featured

   

Leave a Comment