Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Choose a Perfect Color Scheme for Your WordPress Site

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.

Choosing color scheme for your website

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:

Emotional responses generated by different colors

  • 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

Subscribe to WPBeginner

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

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

Photocopa

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

Material Palette Generator

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

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

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

11 CommentsLeave a Reply

  1. 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!

  2. 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.

  3. 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?

  4. 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.

Leave a Reply to Muhammad Imran Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.