How to Use Color on Your Church Website (The 70-20-10 Rule)

website colors tools
Braden East

Designers use color ratios to help us create aesthetically pleasing designs. After nearly a decade of graphic design, I can go with my gut when balancing colors. But when all is said and done, it almost always works out to some version of the 70-20-10 ratio.

70

If you have a brand color palette, pick a more neutral color that is either very light or very dark. If you don’t have a color like that in the palette, just use white or black. This is your 70% color, and it should be the background color on the whole site.

20

Your 20% color should be a contrasting color to the 70%. So if your 70% color is white, your 20% color should be black or dark grey. Use this color for body text and some section backgrounds.

10

Finally, the 10% left should be a “pop” color. This is usually your main brand color. Use the 10% color on buttons, or smaller elements that need some attention.


Related to “website”
Spring Cleaning: When is the Right Time to Refresh?
Published on:
Last weekend I decided to finally clean the garage. It was dirtier than I thought - filthy, actually. That’s why I was amazed when I finished the whole project in under 3 hours. When it comes to your church branding and design, there are probably some things that you’ve thought about cleaning up but have been wary of starting. What if it takes longer than you thought it would? What if it’s going to cost you money to fix? It can be easy to ignore these minor issues until they turn into bigger ones. The problem is that we often underestimate how bad things really are. If you looked into it, you might find that your website actually doesn’t work on certain browsers, or that there are 7 different versions of your logo floating around. This spring-summer season is a great time to clean up those divergent designs and maybe even do a light branding refresh. Tending your brand means addressing problems before they accumulate for too long, or it will quickly get out of control.
Four Easy Ways to Make Your Church Website Feel More Polished
Published on:
Got a website for your church but it’s missing that extra-clean, professional look? I’ve got four tips for you today that are guaranteed to make it better. If you do these things, your web visitors will have an easier time finding what they’re looking for and you’ll have more people walking through your church’s digital front door. 1. Be Selective with Content The more different pieces of content there are on your site, the less likely visitors are to read any of it. Reduce the amount of information you’re presenting and cut any text that isn’t absolutely necessary. Pro tip: write as if you’re explaining your church to a total stranger at a 4th grade reading level. Here are a few practical ways to slice and dice: Headings should be between 1-10 words Paragraphs should be less than 50 words Use bulleted lists instead of sentences with commas 2. Increase Font Sizes If your content has been distilled to follow the word counts above, you’ll be able to bump up the size of your headings and body copy. This makes the site easier to skim, and helps older readers who might struggle with small text. I recommend 20-25px for body text, and 48-72px for your largest heading. 3. Provide a Clear Call to Action If someone happens to land on your website, you want to give them a clear next step, just like you would for a visitor who to your church on Sunday morning. Whether that’s filling out a digital connection card or watching your service livestream, make sure that there is a stand-out action someone can take, and that each button says exactly what it does. Pro tip: Avoid links and buttons that say like “Learn More” or “Click Here.” Instead, use labels that are specific and tell the user what to expect when they click that particular button. 4. Prioritize Menu Items Just like cutting down text, you also want to reduce the number of options you’re presenting to visitors. I’m working on a website refresh right now with an organization whose old website had FIFTY FIVE different links in the main menu. The decision paralysis and brainpower it takes to find what you’re looking for can get overwhelming very fast. Try to limit your main menu to 5 options or less. You can always link to additional pages from one of those main pages, but this approach keeps everything organized and easy to navigate.
The Most Cost-Effective Way to Get Photos and Videos for Your Church Website
Published on:
So you want to put professional-looking photos on your church website. That’s great, but where do you start? Who do you hire? What shots do you need? The main thing to remember is that you want to show the benefits of your church. Why do people attend? What makes your church uniquely valuable as a local congregation? Website photos and videos should show the benefits you’re known for and set realistic expectations. Church website imagery is especially important because it’s giving potential visitors a taste of what it’s like to attend, while also reminding existing members of the reason they come. That said, how can you get the most out of your time and resources? Here are my recommendations. Book a local photographer for a Sunday morning and ask them for a list of shots that looks something like this: Parking Lot / Building Greeters Bulletins / Merch Worship Preaching Fellowship Baptisms or other significant moments Bonus tip: If you can find a little more budget, use a videographer instead and ask for stills from the footage they capture. Now you have professional video and photos. Much like a rebrand, if you do this right, you won’t have to do it again for a very long time. Put your new photos and video on the most visited pages of your website, and let them go to work. While you’re off focusing on ministry, they’ll be consistently connecting with people who are looking for a church home, and tending that part of your brand for you.
Why You Should Invest in Professional Photos for Your Church Website
Published on:
We’ve established that you need a church website, but what makes a website "good?" Out of pride, I'd like to say that a well-balanced, memorable logo and strong color palette are the most important things, but I'd be lying. Professional-looking photos and videos are the most permanent and powerful way to make your website stand out. Let’s face it, people can identify a stock image from a mile away, and while AI is getting better all the time, it’s not good at generating images that feel like genuine, authentic interactions at a real place. Most websites will need maintenance and updates from time to time, but a strong image on your website’s homepage is something you'll never have to worry about updating. That’s why even a few high-quality images can make all the difference. Take them once, and they do the work of resonating with potential visitors over and over again, forever. In a future post, I’ll share how I recommend churches should get professional photos and videos for their websites. Especially how to get the most bang for their buck when they do so... stay tuned!
Related to “colors”
Church Way-Finding Signs: Choosing Color
Published on:
Let's say your brand’s hero color was a bright red. Your wayfinding signs should be red to be on-brand, right? Not so fast! Would you put a bright red couch in your living room? What about multiple bright red paintings throughout your home? Again, probably not. For environmental signage and way-finding, we have to think more like interior designers and accessibility experts than graphic designers. Earlier in the rebrand process, we had developed a brand color palette for this particular church with a dark charcoal color we called “Forge Black.” Using this darker, more neutral color as the main background was a good choice for three reasons: It wouldn’t clash with the paint, flooring, and other interior colors of the building. It wouldn’t show dirt as easily as a lighter color. It would allow for the most legibility and contrast for the text. As you can see, we did bring in the red hero color, but only in a very intentional, minimalist way. Even the logo on the signs was intentionally subdued and understated to make room for more important information, like “¿donde esta el baño?”
How to Apply Principles of Color Selection to Your Church Brand
Published on:
If you go read online, ask ChatGPT, or just generally do color-related research, you know how big of a topic color really is. If you’re like me, it can leave you feeling a little… lost? People have written books and given 2 hour lectures on color theory, color psychology, digital color management, and everything in between. Even just scratching the surface can feel completely overwhelming. You might be thinking, “It feels like I should be using these principles, but how do I actually put them into practice for my church?” Even after reading my work specifically about church brand colors, it might not be clear how to actually apply this knowledge to your specific needs. And at end of the day, color is just one piece of the puzzle. That’s where having a personal guide can be a total game changer. With someone to make objective recommendations and help you avoid common mistakes, not only will you save time, you’ll save the headache of having to rethink your branding decisions in a few years. Ideally you would want this person to be a proven expert who loves the capital “C” Church and has a strong track record of branding success stories. If you’re looking for that kind of guidance, I’ve spent countless hours meeting with church leaders and translating their gut feelings into concrete messaging and visuals. I know the struggles and hurdles pastors face when nailing down exactly how their church should look, speak, and feel. Book a strategy call with me and I’ll talk with you one-on-one about what your goals are, the context your church is in, and how you can make your branding fit without the DIY headaches. See you there!
Color Selection Principles: Bonus Tips
Published on:
Bonus 1: Use a color palette tool Creating, adjusting, saving and sharing color palettes isn’t actually all that easy. That’s where a color palette website can be invaluable. I mentioned this website up above called Coolors. When I first discovered it, I thought “where have you been all my life?!” Unlike most color websites out there, this one lets you do much more than browse and save color palettes. You can visualize your color palette in different contexts, do global adjustments to the whole palette at once, extract colors from an image, and even use a huge library of unique color names. They didn’t sponsor me, but I really like using it. Maybe you will too. Bonus 2: Ignore CMYK and Pantone …unless you’re working with a pro, that is. When I create a brand guide for a client, I include CMYK and Pantones as a nice addition, fully expecting that they will never be used. Almost all print shops and vendors these days have automatic conversion between color spaces that is usually reliable, accurate, and consistent. Even if you’re having screen printed t-shirts made or running off thousands of flyers, Pantone and CMYK values are only helpful in very specific situations. Long story short, HEX codes are probably all you need. P.S. This week I’m focusing on church brand color selection principles, which I’ve gathered the hard way from years of church rebrands. If you want the complete guide, I’ve collected all of the principles into a single post here.
Color Selection Principles: Count on Tints and Shades
Published on:
Using tints and shades is a powerful way to get more mileage out of your visual identity without adding new base colors. What this means for color selection is that you don't have to worry about that exact palette working in every possible scenario. A tint is a lighter version of the same color. Shades are darker versions of the same color. Tint = Base color + white (lighter version) Shade = Base color + black (darker version) While you might not need them in everyday use (especially with a professionally designed color palette), there are situations where your standard set of base colors are going to clash or look too opinionated. For example, a limited color palette might handicap your web designer. Because websites are interactive and display lots of information in different formats, they often call for a suite of neutral colors, ranging from dark to light. You might also find that a particular color works well online and in print, but is too strong and vibrant for apparel. A tint or shade of that color might make for a more wearable and fashion-friendly t-shirt than the original swatch. If your palette feels incomplete or you’re looking for good supporting colors, consider using tints or shades of your core colors to round it out. P.S. This week I’m focusing on church brand color selection principles, which I’ve gathered the hard way from years of church rebrands. If you want the complete guide, I’ve collected all of the principles into a single post here.
Related to “tools”
How to Get That “$10,000 Logo” Look on a Small Church Budget
Published on:
Rebranding can be a tough conversation for some churches, especially when it comes to financial costs. But if you’re like many pastors, you see the value of starting with a clear, cohesive identity that your congregation can rally around and take pride in. How do you manage budget constraints while still investing in your brand? Well, if I had to design a brand identity from scratch with only $100, here’s what I would do: I would use ChatGPT. Yes - seriously! I created this prompt based on my experiences with ChatGPT and it’s surprisingly good go through the entire rebranding process: Act as a high end creative agency that’s going to help me design a visual identity for my church. I’m going to give you my church name and our distinctives, and you’re going to ask any probing questions you need to start putting together the building blocks of our visual brand. This will be an extensive project, so don’t jump into creating images just yet. Our interaction will be conversational and rely on feedback to refine and guide your creative direction. The project should generally follow this 4 step process: 1. Discover - you’ll get a sense of where my vision for the church and generate a brand vibe report with tone of voice, brand strategy, and target audience avatars. 2. Define - you’ll create separate mood boards that we can use to choose a visual style and general direction for the brand aesthetic. 3. Develop - you’ll get input from me on any symbolism from the church’s history, things our region/city is known for, and iconic parts of our building. Then you’ll present text-based logo ideas based on that input. If any of them resonate with me, I’ll ask you to generate images of logo concepts of that idea. 4. Deploy - you’ll generate a full bespoke suite of mockups of branded social media campaigns, video thumbnails, website homepage, stationary, merch, signage, and banners. These mockups should be done one at a time, and shown to me for feedback before we move on to the next. They should be brand-aligned and use the brand elements we’ve developed so far. Paste that into ChatGPT and follow the process through to the end. Don’t be afraid to give it feedback like you would a designer. Pro tip: Buy a month of Premium for faster image generation and access to versions of ChatGPT with the most in-depth reasoning. If you’re not satisfied with the outcome, that’s okay. You’re only out $20 and you probably have a much better idea of what you don’t want in your branding. This is tremendously valuable information if you do go to hire a pro.
Try This Branding Approach for Your Next Church Event
Published on:
Something I’ve only mentioned briefly in this newsletter thus far has been AI. It seems like that’s all anyone talks about these days, so I’ve tried to steer clear, lest I add to the noise. That said, there are some things that AI is extremely good at, one of those being communication strategy. I’m convinced that if you’re not using them, you’re handicapping yourself and your ministry. AI tools are not going away, in fact they’re getting more powerful and more accessible (aka FREE) all the time. So, let’s put it to the test with an upcoming event in your church. This could be an outreach event, a members-only potluck, or a community worship night - the sky is the limit! Tell ChatGPT something like: “You’re an experienced marketer and event promoter with a specialization in working with churches. When I give you information about my church’s upcoming event, I want you to help me come up with an event name, a tagline or short memorable description, and a promotion strategy that one person could reasonably execute. Start by asking for event details and things specific to my church like brand tone of voice.” I’m continually blow away at how effective ChatGPT is at brainstorming. Whether you’re a church of 100 or 1000, AI is an indispensable tool for planning, naming, and developing messaging around events or campaigns. Try using this prompt for your next event and see what happens!
Color Selection Principles: Bonus Tips
Published on:
Bonus 1: Use a color palette tool Creating, adjusting, saving and sharing color palettes isn’t actually all that easy. That’s where a color palette website can be invaluable. I mentioned this website up above called Coolors. When I first discovered it, I thought “where have you been all my life?!” Unlike most color websites out there, this one lets you do much more than browse and save color palettes. You can visualize your color palette in different contexts, do global adjustments to the whole palette at once, extract colors from an image, and even use a huge library of unique color names. They didn’t sponsor me, but I really like using it. Maybe you will too. Bonus 2: Ignore CMYK and Pantone …unless you’re working with a pro, that is. When I create a brand guide for a client, I include CMYK and Pantones as a nice addition, fully expecting that they will never be used. Almost all print shops and vendors these days have automatic conversion between color spaces that is usually reliable, accurate, and consistent. Even if you’re having screen printed t-shirts made or running off thousands of flyers, Pantone and CMYK values are only helpful in very specific situations. Long story short, HEX codes are probably all you need. P.S. This week I’m focusing on church brand color selection principles, which I’ve gathered the hard way from years of church rebrands. If you want the complete guide, I’ve collected all of the principles into a single post here.
Color Selection Principles: Look for Symbolism
Published on:
Look for symbolism Just like with your church logo, you’ll want layers of meaning and depth behind your church color choices. One way to accomplish this is through symbolism. Colors are symbolic because they can bring to mind a mix of material things and abstract ideas. Here are a few examples… but before I share them with you, keep in mind that these colors are broad and have many different meanings associated with them. The symbolism I’m focusing on here is related specifically to churches, and how a church might use these for their brand colors. Don’t start using them without doing your own research as well. Okay, with that out of the way, here are some color symbolism examples: Gold Gold can communicate permanency, age, and class. It symbolizes kingship, wealth, and light. Orange Orange can communicate energy, friendliness, and youthfulness. It symbolizes flowers, fire, and sunsets. Red Red can communicate courage, warmth, and gravity. It symbolizes blood, life, love, and sometimes purity. Purple Purple can communicate spirituality, depth, and confidence. It symbolizes royal robes, heaven, and wisdom. Teal Teal can communicate balance, peace, and renewal. It symbolizes healing, water, and growth. If you want to go deeper, here’s where you can read more on color symbolism and usage (from a secular source). P.S. This week I’m focusing on church brand color selection principles, which I’ve gathered the hard way from years of church rebrands. If you want the complete guide, I’ve collected all of the principles into a single post here.
← Back to all posts
Almost there!

Enter your email below to get the weekly Tend Your Brand digest.