Planning your website to be welcoming and inviting can drive one around the bend. So many things to think about and consider. Content, images, layouts functionality all plays in our heads as we plan to woo our audience with our sheer design brilliance. Talking to churches about their design choices, there is one area that always leaves a little uncertainty, and that is the choice of a color scheme.

Most folks start with an elaborate color scheme and quickly get mixed up in image and banner colors that clash and look wrong together. Now matter how hard you try to improve the situation it just gets worse every time that you add a new image or color selection to try and remedy the situation, and before you know it you’re up the creek without a paddle.

An easy way to move forward and get out of the rut of difficult color matches is to start with a color scheme that is easy to implement and slowly elaborate on it in future edits to align it to the image in your minds eye.

Elegant dark tones and colorful contrasts

Talk about elegance and dark colors contrasting with a single focus color will be mentioned somewhere in the discussion. If you Google the term “elegant fashion” you will be presented with amongst others a slew of black dresses with focus colors that can be everything from bright gold to wine red and from emerald green to a very deep blue. The color combinations is endless, and always the dark background to offset the focus color.

This look is extremely easy to copy in your own web designs and is very easy to pull off. In our example below you can see that we paired the dark color with an eye catching orange to arrive at a very elegant look for a church website.



The advantages of the elegant design pattern

The benefit of this color combination is that you are neutralising one of the main design challenges quite easily, and that is colors that clash.

Ever had 3 images that look so beautiful by themselves and then when you combine them in a slideshow something is just not right? The more you look at the combination the more you realize that things are out of whack but you cannot quite put your finger on the culprit? The chances are it is the image colors that clash when the images are combined and suddenly the plans that you had for your image combination looks awful.

What makes the elegant look a brilliant choice, is that you are eliminating the color clashes by gray scaling the colors and replacing them with dark tones.

How to get this done in Photoshop

Preparing the images in Photoshop is quite easy and in just a few steps you can get this done beautifully. You can play around and try your own variations but below is the main steps to get a image prepped.

  1. Open any image in Photoshop.
  2. Change the image to grayscale by selecting from the menu image then adjustments and then desaturate.
  3. Add an additional layer above the image and color it black. Control the amount of image that will show through the black by adjusting the opacity on your black layer to anything from 50% to 90%.

Variations on the theme for matching results.

In our example you can see that the banners that we created just below the  main slideshow received the same treatment as the main image to keep the elegant look. We injected some interest into middle banner, by adding a colored layer above the background in stead of a dark layer.

The result looks stunning and will get a lot of heads turning without you having to sweat over color matches. By adding different shades of dark to the images you can take control of color matches.

The Selection of matching focus colors

The biggest benefit of applying the elegant design pattern to your website is that you can practically get away with any focus color. To wet your appetite, we will list a few ideas of what can be achieved.

Achieving a modern color scheme requires bold colors and in the color swatch below we did just that. Mixing the dark colors with bright green, blue and purple will work a treat and will get you results that looks funky and fresh.



If on the you prefer a classic look you can easily stick with classic colors and the result again will just match without a problem. in the swatch below we added colors like gold, red and blue.


You will find the design to be quite accommodating and will have no trouble to integrate your colors with the design by using this design pattern for your church website.