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.
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.
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.
|
NOTE: The names of each individual field represent the main area where the color changes. Each field changes multiple items within the site. Sometimes you may need some elements of your site to be tied to a different field in the color picker, if that’s the case, just contact your Onboarding Specialist or Project Manager. |
There are a few different ways that a specific color can be represented digitally.
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.
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.
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.
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.
An easy way to sort out your colors is to ask these questions:
If this color was a background, and I placed white text on top of it, would I be able to easily read it?
If my car was this color, would I be more likely to be pulled over?
Now that you...
...you are ready to have some fun!
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.
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.
|
NOTE: Before you navigate to a different page on your site, you will need to click the “Save” button. Leaving the page before saving your colors will result in your color changes being lost. |
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.
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.
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.
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!