Ekklesia 360

Congratulations!

You’ve chosen an e360 Theme for your church website and now you’re ready to make it visually reflect how your church looks and feels. And we’ve even got a built in color-picker to make it pretty easy to set up the colors however you want. Seems straightforward, right?  All you have to do  is choose a couple of the 16,777,216 possible colors. No big deal. Wait, sixteen million? I’ll be honest, I didn’t know there were that many options. Maybe you have a .jpg file of your church’s logo, but you’re not sure what the exact colors are, or, you have the color information, but can’t seem to translate it to your website like you were hoping.

If you find yourself spending a lot of time playing with the color picker, but don’t feel like you are getting the results you want, I’m here to help. Last December, my fellow designer, Jimmy Pham, took us on a dive into color theory with his blog post, “Your Church Website, Your Colors, and You.” Consider this as “part 2.” We’ve got some tips to get your e360 Theme styled like a champ. I suggest that you read this post while you are logged into Ekklesia 360 and using your color picker -- it will be easier to follow along that way. 

Finding and Defining Color

There is room to experiment and be adventurous with your site colors by the end of this process. If you’ve been having some difficulty getting started or you’re ready to punch up your website, start here.  I’m going to walk you through the whole process so you end up with great results.

Getting to know the e360 Color Picker

First, you need to turn on the color picker. To access the e360 color picker, log into your Ekklesia 360 account and then click the “Easy Edit” button in the top right of your dashboard. The color picker will slide out from the side of your browser window (on the right or the left depending on your menu formatting). Click on the color palette tab.

When you open up the color picker, you will notice fields for different elements of your website. Clicking on any of those fields will open the color picker panel. The color picker has fields for both HEX and RGB color code options. The two systems are more or less interchangeable, but I recommend using HEX codes simply because it is the quickest to input.

There are a few different ways that a specific color can be represented digitally.

1. HEX: This is a 6 digit code (numbers and letters) used for HTML, CSS, SVG. The field is represented as (#) in the color picker.
2. RGB: This stands for Red, Green, Blue. Percentages of each color are added together to make each color on a computer screen.
3. CMYK: you may be familiar with CMYK, but you won’t see these options in the color picker. CMYK stands for cyan, magenta, yellow and black. CMYK is used for print not digital. These are typically the  4 colors of ink used in a printer.

You will also see HSB: This stands for Hue, Saturation and Brightness. Once you have set your HEX or RGB colors, the HSB fields can be used to make that specific color darker, lighter, and more or less intense.

Find more tips and guides about graphic design in the Church Graphic Design Kit! You'll find several free guides, as well as free logos, icons, templates, and more.

Getting to Know Your Brand or Logo Colors

You may have some printed materials with colors you love, or you have a logo file, but don’t have a design program to get the specific color codes. Try using a site like http://www.colorcodepicker.com/. You can upload the files you do have and get a list of colors that make up the palette. If you don’t need the whole list, you can upload a file and click on colors to get their specific codes! Once you have the codes, make future projects easier by writing them down somewhere -- save them in a note or a Google or  Word Document. This information is also helpful if you are ever customizing an online giving page, or other things that you need to match to your church website.

Here I’ve used a church bulletin to get a complete color palette.

Here I’ve uploaded a business card because I only need the color codes from the logo.

Getting to Know Your Theme’s Color Scheme

There are currently 15 responsive e360 Themes in our portfolio. Each theme’s colors can be changed via the color picker, but let’s take a look at the default. Here are a few examples of the color picker displaying the pre-set colors.

The three e360 Themes (Wilberforce, Nouwen and Strong) have very different color schemes.

Though each theme has a different color scheme, each color within any theme can still be categorized as dark or light and as neutral or an accent color.

First, take a look at the theme you’re using and note which category the fields are. Second, do the same thing with logo/branding colors. 

I’m using the latest e360 Theme called  Spurgeon. The color scheme consists of cool grey neutral colors, and green accents.

This is the color palette from my bulletin file. I have lots of earthy neutral colors as well as the orange and blue accent colors to work with.

An easy way to sort out your colors is to ask these questions: 

Dark vs. Light:

If this color was a background, and I placed white text on top of it, would I be able to easily read it?

• Sure, I can read it just fine! - Dark
• Text? What text? - Light

Neutral vs. Accent:

If my car was this color, would I be more likely to be pulled over?

• Oh no, they got me again! - Accent
• Not today, I blend in with the road and the sky. - Neutral

Sometimes a color falls in the middle of dark and light, or the middle of accent and neutral. That’s okay, in fact, you may be able to use it in more places.

Setting the Color Picker

Now that you...

1. Have chosen and installed your e360 Theme
2. Know your color hex codes
3. Figured out your dark, light, neutral and accent colors

...you are ready to have some fun!

Pro Tips

Side by Side Help

I recommend opening an extra browser window with your e360 Theme’s example site. You can find it by going to the Ekklesia 360 portfolio. Open up the color picker and move the browser behind the window you are working in. That way, you can keep an eye on what the original colors were.

Here you can see my site in front of the Spurgeon example in a second browser window.

Edit Colors from the Home and Subpage

When you are editing your colors, I recommend looking at your Home page, as well as your Subpage Style Guide. The Home is typically the first page your visitors  see. First impressions mean a lot. If your colors are looking sharp on the home page, you are in a good spot. The subpage style guide shows all your typography, buttons and usually sidebar sections. It is helpful to get a feel for how your pages are changing as you set the colors.  Every e360 Theme comes with a Style Guide set up in the example pages. Typically it is found under the “Resources” navigation item.

Accent Colors

I suggest starting with your accent color(s). Chances are, those colors really define the look of your branding and the look of the theme. Simply switch your theme’s accent HEX code, with your branding HEX code.

Dark Colors

Once you have your accent color(s) swapped, you can choose dark or light. I’ve selected the darkest colors on my site first. Here I’ve placed my darkest neutral color in the color picker. 

Here, I’ve scrolled down the home page  to see where my colors are starting to change. Looks great!

Light Colors

Finally, I will change my light colors. The color palette I got from the http://www.colorcodepicker.com/ site gave me some light neutral colors I may not have come up with on my own. Look how well they pair with the accent colors from my logo.

This same process can be applied to any theme. Here are some examples of my sample color scheme used on a few different themes.

Here I’ve swapped the colors for e360 Themes Lewis, Wycliff, and Augustine.

Sharing Your Site Color Scheme

Now that you know how to find and organize your dark, light, neutral and accent colors. You can set up your e360 Theme to look fantastic -- and match your church’s branding and feel! We would love to see how you’ve set up the colors on your site. Comment below with a link!