I know your stuck on selecting the best colors for your website design projects. I talk to people all the time that are struggling with this problem.
One of the hardest parts to laying out a website is choosing color combinations that work well together. I don’t know how many times I have developed a website for someone and we spend days and sometimes a week tweaking colors. A lot of the times people have ideas for colors for websites that simply clash, or don’t look good together. You probably know what I am talking about; blue, bright yellow, some off orange, and pink. When you see it, it’s an eyesore. After reading this article, you should have a better understanding of how to make your colors work for your website.
First, identify your market. Are you doing a bed & breakfast website? If so, pastel colors or something light and relaxing will work for you. If you’re doing health supplement website colors that say “energy” and “well-being” are a better option. If you’re doing a spa website, the main goal should be a relaxing color combination; like blues and colors that relax the user. So ask yourself this one simple question; what feeling does my website need to have? When I go there, do I want to be excited, relaxed, etc?
So What Do Different Colors Mean?
- Warm colors. These are your reds, yellows, and oranges. They evoke warmth.
- Cool colors. These are your blues, greens, and purples. They evoke relaxation.
- Neutral colors. Don’t forget about these. They are your grays and browns. Just means they don’t suggest any emotion.
It’s important to note that warm colors push forward while cool colors reside to the back. Therefore, if you’re designing a website you would want to use cool colors in the background and use your warmer colors on elements you want to jump out at your visitors. Be careful not to fall into the trap of making to many elements jump out, though.
Red means power and passion. When people see these colors, it stimulates energy and excitement in their brain. In other words use red sparingly, as too much red can be very overpowering.
Below are a few websites that use red effectively:
Orange means happiness, joy, and .”. It’s considered to be a “cheerful color”.
Here are some good examples of websites that use orange correctly:
Yellow means joy, intelligence, energy, happiness, and optimism.
Down below are a few sites I like that use Yellow.
Green means nature, healing, growth, and harmony.
Here are a couple of sites I like that use green:
Blue means calming, exuding stability, trust, dependability, and expertise.
Below are some sites I like that use blue:
Purple means luxury, spirituality, and creativity.
Here are some sites that use purple effectively:
Black means elegance, power, depth, and sophistication.
Below are some nice sites that use black:
White means purity and innocence, safety, and cleanliness. Make sure you use white space on your website. I have always liked sites that properly use white space.
These are sites I like that use white correctly:
Picking The Right Color?
The next thing I do is go to https://www.w3schools.com/html/html_colors.asp because they list many web safe colors that you can choose from. I like how it shows the hexadecimal of the color right next to it. Granted they are not all on there, but this gives us some kind of starting point. You need to identify which dominate color you want. Don’t worry about all the supplementary colors at this stage. Just focus on the main color you want.
So let’s say we chose #D80000 which is a red color. We need to decide then what works well with that color. Often times you can go about this many different ways. Remember that you can always choose a color and then supplement it with either black or white (sometimes both).
Putting Together Colors
Now that you have chosen a dominate color you can easily build a color palette that works. One site I really like is https://colorschemedesigner.com/ because you can put in your hexadecimal color and build a color combination with the following color schemes; monochromatic, complementary, triad, analogic, and accented analogic.
Interesting articles on colors and conversions:
Interesting articles on colors and websites:
Remember that picking the correct color palette for your website is vital to your site’s success. Don’t forget to ask yourself does this work for my industry. As you can clearly see choosing, the right colors can go a long way!