Applying Color Palettes to Your Church Website Theme

Today we conclude our three-part blog series on colors with a final word about color palettes and where you can get some amazing ideas for free. After using Adobe’s “create from image” color palette tool, as well as experimenting with color harmonies on the color wheel yourself, you have now created some safe color palettes…but you have not begun to scratch your color itch. The good news is that other artists have formed communities where they share their awesome color combinations with everyone else for free! We’ll look at some of these and apply the color palettes to a test website to see how they look.

Adobe Kuler Explore

We’ll continue our journey where we began: with Adobe Kuler. You may have already noticed section in the footer of their website titled “Explore.” Other Adobe users have submitted color palettes to the user community and Adobe sorts them a couple different ways. I prefer the category “most used” because the color palettes tend to be more useful for websites (artists don’t always create digital color palettes with websites in mind).explore_most_used

Right away two color palettes jumped out at me, the top one labeled “designb” and the lower right one labeled “Orange Medium.” The reason why I want to try these is because they both feature sharp color contrasts to a dark gray within the palette. The first one contrasts lime green with dark gray and the second one contrasts bright orange with dark gray.

Experiment with Anchor Theme

We will try out the first color idea on the WPforChurch.com Anchor theme which is another one of our popular premium themes. The Anchor theme is a good theme for this experiment because it features both dark and light moods and the dark style has a dark gray background color that will make a bright accent color pop. Here is a screenshot of the Anchor theme demo with the default color scheme.

anchor_default

The Anchor theme allows easy customization of the one accent color and hyperlink colors. For our first experiment we will substitute the default red accent color for the lime green color in the “designb” color palette we found on Adobe Kuler website. Hover over the color palette and click “edit” as pictured below.

explore_edit

Next, copy the HEX field just like we did in previous lessons and paste into the Anchor theme customization field for accent color. Here are screenshots of the two steps.

Adobe Kuler

explore_hex

Anchor theme

customize_hex

Note – While in the customization I changed both hyperlink colors to white since that was another contrasting color in the “designb” color palette next to the lime green. I cannot stress enough how important it is to not have too many varieties of colors in your website or else they will compete for each other and cause visual confusion, etc. Here is what the homepage looks like with the lime green accent to the dark gray. Pretty snappy if you ask me.

anchor_lime_green

Now let’s see what the orange contrast looks like according to the Adobe color palette called “Orange Medium.” Of course you would repeat the steps above to acquire the HEX value and put it into the Anchor theme customize field. Here is what the orange looks like.

anchor_orange

The orange is a little too rich for my taste but it makes an interesting idea. If I kept this color scheme I would change the hyperlink colors to the light gray suggested by the palette. Here is another one I saw on the same page that featured an analogous style color palette called “copy of when will the storm come.” I like how it makes for a cool mood and makes the white letters stand out more.

anchor_mono

But Wait…There’s More

If you ever you run out of color ideas on the Adobe Kuler website, there are several other great community color websites. A very popular one is COLOURlovers.com because it not only features color palettes but many free online tools like a pattern creator which you can automatically color from your color palette. It is easy to spend hours on websites like these letting your inner artist come out.

This concludes our short series on website and theme colors but hardly does the topic justice. I hope this series inspires you to polish your WPforChurch.com theme with a fresh look that will make your church look great and your visitors feel welcome.

2 comments

  1. 劉備

    Amazing content, thanks a lot !!

  2. 關羽

    Marvelous site, thanks for sharing !!