Customizing Your Church Website Theme with Good Color Harmonies

Last post we began a blog series on the topic of colors and how to choose website colors based on your pre-existing church logo. This discussion is helpful in cases where an established church already has a color scheme in place including in their logo. However, if there is no color precedence or your church logo is not color-specific, the church website developer must choose a color scheme on their own which can be difficult for the non-artistic type. Fortunately, picking colors doesn’t require artistic talent but simply an awareness of a few principles. Today we will explore some of the “color harmonies” and how they can make your church website shine.

To demonstrate color harmonies with two colors, one primary color and one accent color, we will use the Morgan Theme from the WP for Church. The Morgan theme is our most popular theme due to its balance and sharp features. Out-of-the-box you can use the built in WordPress Customizer to upload a logo picture as well as change the color of the header background and the accent line between the header and content area. Most users will not need to modify theme appearance beyond that so we will walk through just those steps in today’s tutorial.

Picking the Primary Color

Unlike picking an accent color, picking your primary color is fairly straightforward. You want a color that represents the feel of your church. Artists have written volumes about the psychology of different colors but a short overview will suffice.

  • Blue conveys peace and rest which makes it a popular shade for church websites
  • Green feels like newness and growth
  • Red conveys passion and excitement
  • Orange represents vibrancy but with less tension than red
  • Brown has an earthy and natural feel and can imply history or tradition
  • Beige, tan and gray are sophisticated shades and work well for churches that want to represent orderliness and professionalism
  • White, if used as an exclusive color, represents openness and freshness

To help you visualize your options, as well as, generate the hex value for the color you wish to use, you need a simple color picker tool. I use Colorzilla which is a free and simple add-on to either Chrome or Firefox web browsers. It stays out of the way until you need it and then it is a click away.

sample-color-picker

The Color Picker display gives you everything you need in order to fine tune your color selection (see illustration below paragraph). The vertical slider in the middle is the hue selector which extends the color spectrum. In the example above it is set at 212 degrees which is a shade of blue. The next setting is saturation, which is the colorfulness of the color compared to white. High saturation colors can be tricky to work with so I recommend picking a color somewhere around 75% saturation for starters. The last setting is value which is a percentage of how much your color is present compared to black. The lower the value the darker the color; so again, the 75% range makes a good starting point. Finally. the hex value of your color selection is displayed at the bottom. You can copy and paste this value into your theme settings to set your new color.

color-picker-screen

To demonstrate another method, I will choose my primary color for this tutorial by using the eyedropper feature. I will begin by navigate to the website where I saw a background color I liked. It was in the gradient of the globe slider image shown below. To use the eyedropper I just click on the ColorZilla plugin button and the page color picker is automatically activated. I move my cursor around the website until I find the color I want copied. The cross-hairs mark the spot I chose.

color-picked-from-background

Now that I’ve chosen my primary color, which is a maroon shade of red, I will paste the hex value into the header color settings of my Morgan Theme demo website and see what it looks like.

morgan-red-header

The white letters of my menu and logo make it easy for me to use any header color I want. However, the default accent color, which is orange, doesn’t go well with my new header color so we will change that in the next step.

Picking the Accent Color

A good website will have just two or three colors at most, which means you will want one primary color with one or two accent colors to begin with. Because the sole purpose of an accent color is to provide contrast and highlight areas or objects, it should correspond to your primary color. The nature of this correlation is often called a “color rule” or a “color harmony” because certain colors harmonize better together. Artists have identified many different color harmonies over the centuries but only three of them are useful for our purposes today.

Let’s begin by heading over to the Adobe online color wheel tool. Once loaded your browser should look something like this:

adobe-kuler-home

Paste the hex value of the color you want to coordinate with in the hex field of the base color (marked with a white triangle at the bottom which is probably the middle one) and then press enter. The colors and color wheel should change to reflect your new selection. I used my sample maroon header color and got this result.

Analogous

The default color rule for this color wheel is analogous. That means that the suggested variations are shades from right next to the base color provided. You can see this visually represented in the color wheel above the palette. This color harmony is useful for finding a variant shade for an overlapping text box background or page border. That is not our goal in this demonstration so we will move on.

Complementary

The simplest color harmony is the complementary color rule, and it is the most commonly understood. Complementary colors are those opposite of each other on the color wheel. Red and green, blue and yellow, etc. Complementary colors are best for finding two primary colors that will work well together such as in a logo, etc. Since complementary colors do not work well as accent colors we will move on to the third harmony.

adobe-kuler-comp

Triad

The triad is just like the name implies: three colors. The color combination harmonizes from three equidistant regions of the color wheel and is the perfect compromise between complementary and analogous harmonies. In our example my maroon yielded a navy blue and a prestigious gold shade as well as an extra shade of red and blue for experimenting. I like both the gold and light blue for accenting the header.

adobe-kuler-triad-gold

For now I am going to choose the light blue accent because it also serves as a transition color for the non-red pictures and content in the rest of the site. If I needed a second accent color for something else in my theme I would use the other color but in my scenario I only needed one primary color and one accent color.

morgan-red-header-blue-accent

Wrap-up

Today we explored color harmonies and how to use the Adobe color wheel to experiment with them as well as use a color picker tool to make custom colors from scratch. Armed with this knowledge you have all you need to take a basic church website theme and make the theme conform to your church’s existing color scheme or make a new color scheme to match your church’s look and feel.

Next week I will finish the series by sharing a few online resources which feature color palettes created by other graphic artists in the online community. The possibilities for color combinations is overwhelming at times and sometimes a library of ideas is easier to choose from.