Creating Color Palettes for WordPress Sites

Color is an incredibly powerful part of website design. It can make a design more emotionally effective, easier to use, and memorable. It can also make a site confusing and hard to use if colors are chosen without the proper care.

If you are a self-proclaimed non-designer, this is for you! Let's talk about how to choose, use, and set website color palettes in WordPress!

(Disclaimer: If you ARE a designer - please go easy on me! This is not a comprehensive design guide. Everyone has different ways of choosing colors and different rules that work for them. This information is how I've found success using color in website designs.)

Choosing a Color Family

It's very likely that you already have a color family to use! Your brand may already have established colors, or you may have colors in mind to use. Consider the fact that colors, pretty universally, tell a story.

Art is subjective and open to interpretation. But at the same time it's hard to argue that over time certain colors have become associated with certain ideas, feelings, tones, emotions, and brands. You always want to choose colors based on how they will make your users and visitors feel, not based on your own personal preference. For example, maybe you hate green. But if your website is focused around eco-friendly products that are made from plants and recycled materials... some shade of green is probably going to be your go-to color. Because it makes sense. And it communicates certain ideas to your users before they even read a line of copy.

So step 1: Determine your main color, based on the emotions you want your users to feel and the ideas you want them to have. Your color family will involve shades and tones of that color. Give thought to what kind of main color you want... do you want to use a pastel blue? Or a bright deep cyan? A neon type of orange, or something more muted and earthy? Look at other brands and websites that use that color to inform your decision.

Choosing a Palette

A website needs multiple colors to tell a story. It's important to be consistent with how you use color. For example, you'll probably want to use one color for subheadings in your copy, one color for links and buttons, one color for accents and decoration. Across all the pages of your site, your colors should be used with intention.

Look at this page right now. Notice how the LinkedIn blue is used sparingly - on the logo, but also for prominent buttons. Notice how red may be used to indicate when you have a new message or notification. The blue stands out, but not as much as the red, since the red is meant to gran your attention right now. Over-using color can be confusing, since a visitor won't know where to look first. Use color to instruct the eye.

Your next color in your color palette should include a color that is complementary to your main color. Complementary colors sit across from each other on the color wheel. Our eyes naturally enjoy seeing them together. They "work" and don't clash with each other.

Keep in mind that your complementary color should match the tone of your main. If you chose a neon or pastel purple, your yellow or orange complementary color should also be neon or pastel.

My favorite way to build palettes and discover combinations is to use the free Paletton color scheme generator.

Enter the HEX value of your main color into the Base RBG area. The generator will then give you some suggested palettes based on that main inspiration, including all the values like HEX or RBG that you'll need.

You can also use a generator like Coolors or Color Hunt to browse pre-arranged palettes. Just make sure that you are choosing the colors intentionally, and that the palette has a good mix of light and dark colors. Contrast is important!

Tip: Don't forget about black and white! I dislike using pure white and pure black for a design, unless their starkness complements the overall feeling. Instead, you can just slightly tint black and white with your main color until you get essentially a very deep version and a very pale version of that main color. Doing this will make the entire design more harmonious and give a more intentional look to your design.

This article has been sponsored by Web Pro Geeks! If your site is not working the way you want, hosted where you want, or connected to social media in the way you want, let The Web Pro Geeks take the reigns and get everything back in shape.

Applying Colors to Elements

It's important now to decide what colors will be applied to what. If you want some inspiration, here's an article with some fantastic examples of color palettes and their application. Don't be afraid to experiment. But consider the most important places color needs to be used:

• Body text (should be a darker color, like black or a very dark version of another color!)
• Heading text (can be a brighter color, but avoid very bright or harsh colors)
• Link text and button text (in my opinion these colors should be the same color, since they are important clickable elements)
• Backgrounds of areas like your navigation menu and footer (these colors should be deep, and be good for placing text on top of)

Everything else is just decoration! Keep in mind your colors when choosing images and graphics. The color palettes included in this type of imagery should complement your overall color palette design. Use the color wheel to compare what colors are prominent in your images and graphics and whether they complement your main colors.

Applying colors is also where you need to be very considerate of color contrast. You can use tools like WebAIM's Contrast Checker to compare colors against each other. This tool will tell you if your colors pass certain guidelines that ensure all people with all types of vision can access your content. But with your own eyes, you can compare how close colors are to each other. For example, if you find you've placed gray text on a black box or pink text on a red box, most likely those colors don't have high enough contrast. This is why black text on white backgrounds is so popular for web content as it's basically the highest contrast you can accomplish.

Do not rely purely on third-party tools to make sure that your content is accessible. Use your own educated judgement!

An amazing feature WordPress currently has is telling you whether certain colors have enough contrast. When using the Gutenberg Block Editor, look out for an alert like the one shown below, which will warn you that "This color combination maybe hard for people to read. Try using a darker background color and/or a brighter text color."

In WordPress, you can add your colors via the Styles tab in the block editor, in the Customizer screen, or in your theme's custom settings.

Depending on your theme, you may have lots or few options when it comes to color.

Make sure you keep color control in mind when choosing a theme for your WordPress website!

Did I miss anything important? What website design practices do you follow around choosing and applying colors? Please leave a respectful comment sharing your thoughts. I would like this post to be a living document, updated as I myself learn more about these practices and ideas.