Are you having a hard time deciding on your website’s color scheme?
Choosing the right color combination can boost the appeal of your website, and also keep visitors around to boost your sales and conversions.
In this article, we will show you how to choose a perfect color scheme for your WordPress site by understanding color psychology and using one of 4 amazing resources.
Psychology of Colors
It’s a well researched theory that colors can affect human responses. Colors have an emotional pull on our decisions and choices we make in our everyday life.
Large corporations spend millions of dollars building a well crafted brand image and identity for their products. They hire experts to pick just the perfect combination of colors for their brands and products.
The colors you use on your site are part of your brand image. You need to choose colors that create a favorable emotional response for your brand and products.
So how do you figure out which colors and what kind of response you are looking for?
Lucky for you, marketers and psychologists have done plenty of research already. Take a look at this infographic:
- Red: is the color of youth and joy. It reflects boldness and confidence.
- Green: Creates a soothing calming effect, it evokes a peaceful, progressive, and calm emotional response.
- Blue: It reflects trust, strength, reliability.
- Black: Black generates a sophisticated, solid, secure emotional response.
- White: Clarity and simplicity are the two major effects of White.
- Yellow: Yellow is the color of optimism, warmth, friendliness.
- Orange: Orange creates a fun, friendly, confidence, and cheerful effect.
- Pink: Sensuality, femininity, romance, and love are the emotions associated with Pink.
Other Things to Consider
This goes without saying that colors need context to work the way you want them to work. Your brand or product may already have certain associations that may or may not work with the colors you are choosing.
Here are a few things you should consider before picking up a color scheme for your site:
First, you need to consider the existing brand image. If you already have a logo and other marketing materials, then you may want to use the existing colors.
You also need to consider which colors will look good on the web. A color that looks great in person might not be the best background color on your screen, for example.
Also think about other media like sliders, videos, images, call to action buttons, etc that you will be adding to your site. Think about what colors you will be using the most.
Finally, you should also keep accessibility in mind. A good color scheme will have enough contrast so that it’s easily readable even if your visitors have visual impairments, which many people around the world do. Check out our guide on improving accessibility on your WordPress site for more advice on this.
Video Tutorial
If you prefer written instructions or need more details, then continue reading.
Creating a Color Scheme
Hopefully, by now you have figured out the appropriate colors for your website with the psychology of colors in mind. We recommend you to choose at least two colors that articulately represent your brand, and the response you want to get from users.
Once you have those colors, there are several online tools that you can use to generate an unlimited number of color palettes.
1. Adobe Color CC
Formerly known as Kuler, Adobe Color CC is a great tool to generate color palettes. You can select color rules, and then spin the wheel. You can manually adjust each color in the palette and rest of the colors will be automatically adjusted to match the color rule. You can also generate color palettes by uploading photos.
2. Photocopa by COLORLovers
Colorlovers is one of the most popular destinations for color inspiration and ideas. They have some great tools to generate color schemes. One of them is PhotoCopa which allows you to generate a color scheme from photos. You can also use their basic tool which generates colors combinations by simply selecting a color.
3. Material Palette
Inspired by Google’s Material Design concept, Material Palette allows you to generate color schemes using the design rules. It is designed to inspire color schemes to be used in mobile apps but these color schemes can easily be used for websites as well.
4. Coolors.co
Coolors is a wonderful color scheme generator. Simply hit the space bar to generate color schemes. You can modify a color in the scheme manually and lock it down. You can also download color schemes to use in your projects later.
We hope this article helped you choose the perfect color scheme for your WordPress site. You may want to look at our article on how to easily customize WordPress with CSS Hero.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Infographic by The Logo Company
Andy says
Hey everyone! I really wanted to make my site by myself – taking into account my preferences. But I also wanted the design of my site to appeal to visitors. I have tried many patterns and combinations. Thanks for your advice guys! With this article, I found a solution that I really like!
WPBeginner Support says
Glad you found our recommendations helpful
Admin
Rudy SMT says
Thanks for the article, I took the psychology of colors to heart.
I just complete the recoloring of my website, I didn’t use professional software like Adobe or PhotoShop but instead an online palette generator and some other trick.
I wrote down step by step how I picked the color and implemented on my website in less than 20 minutes without any professional design software.
i love to keep things simple; I hope it will help others.
filzakhan says
its awesome themes collection . verry nice and really funky coloring .. and i love it
Donnamarie says
Thank you for the color theory and tools! I’m about to create my first website and really want to use a black background with pastel colored, not white, fonts. I prefer this schemata because it’s way easier on my eyes with the reduced glare. I’ve been using the net for almost 20 years and see very few sites with dark backgrounds. Some white font on black is fine, but pages of it is too much contrast for me too. I’ve noticed a trend of light grey font on white backgrounds and when I see a site with that scheme, I bounce because it’s too straining to read. I’d love comments on the following 2 questions:
Does using a dark background really turn off the majority of potential subscribers?
I’ve heard that most webpages are white because at first they were emulating books…why is the majority of pages white?
Bryce Munger says
One thing to consider with sites is how they will look to everyone. I am red/green colorblind and what looks sharp and crisp to you may drive my eyes bonkers. The same applies in reverse, a combo I like may not look good to others. I would recommend finding some friends or associates that are colorblind (or vice verse) and have them review your work.
WPBeginner Support says
That’s a great tip Bryce, thanks for sharing.
Admin
Muhammad Imran says
Very nice collection and great free resources.Thanks
ميسرة says
Thanks wpbeginner stuff
Adrienne says
Good stuff! Color and how you use it is everything.
Melanie Lewis says
Great resource!!! Thanks so much!