As with any design color palettes can play a huge part in website design, and if done well can create a great looking website. On the other hand, poor color choices can produce some cringe-worthy websites that will have your users leaving in no time.
What is a Color Palette?
A color palette, or scheme, is a range of colors that can be used for any interface on any device or screen. It is usually a collection of colors that work well together in harmony to help convey a message or to be appealing to viewers/users.
What determines a Good Color Palette?
This is a very hotly debated topic. Some people say that you should never use complementary colors – colors that are situated across from each other in the color spectrum: blue and orange, purple and yellow, for example. – however, others swear by it only when it’s done well. I tend not to push the boundaries with complementary combos but enjoy when I get to use them. I will include some nice-looking examples below.
The other way to use colors, is to use colors that are next to each other in the color wheel/spectrum, these colors are called analogous. I find these a lot easier to use compared to complementary palettes, but both can be done well when given some thought.
Starbucks uses a great analogous scheme with a bit of complementary colors here. Notice that they incorporate the product’s colors in the scheme. They include their signature green straw as an accent color to tie back into their logo and brand’s perception.
Green Mountain Energy use their brand’s main colors as blue and green, and you can see the different shades being used in this hero section. Notice that they are using the orange to bring attention to their call to action.
On to the Bad
There are a lot of ways that choosing colors that should work well yet somehow, they just don’t work. If you noticed in the two examples above that when they are using text on colored backgrounds, they have either gone with a white or a color a few shades darker. On lighter colors, I often will use a dark grey, I rarely use black as on screens as the contrast can be very irritating on the user’s eyes. Here are some color palettes to avoid.
Light Colors on a White Background
White, like black, is a very strong tone and will take away from other colors in the palette. Meaning if the color is a lighter shade, then it will become harder to read on white. When using white as a background always go with a darker color.
Neon Colors, especially on Black backgrounds
Neon or any bright colors can be eye-catching, however, are very oppressive and can be very irritating. The more a user has to strain their eyes the more likely they will stop reading and leave your website. A great example of this is one I used in an article about outdated websites. I recommend checking it out if you are unsure if you need a new website design.
Notice that the neon green is hard to focus on. White will act in a similar way. I tend to not use black, the closest I get there is usually #333333 for a hex code. This is for both text and background.
Color backgrounds like anything can be used well. They can also be disastrous. A good rule to stick by is to use darker colors for text when a light background is being used, and vias versa. However, using colors that simply won’t ever work can become a problem. So, some examples, The World’s worst website ever is a great place to start. It is a website dedicated to being an example of what not to do.
They show off some great examples of color on color examples.
Pacific Northwest x-ray has become a staple example of poor choice of color background. You can see why and how colors can become a detriment to your website’s readability. Which could be losing you, potential clients.
So, a quick recap.
- You can use and create your website’s color palette using analogous colors, complementary colors or a mixture of the two.
- Be sure to use colors that will make your site readable, and refrain from having black as a background.
- Be consistent with your color palette, don’t use every color of the rainbow, it isn’t a good look.
- And when using color backgrounds be careful with the color of your text.
I hope these things help you when choosing colors for your website’s palette. If you think I left anything out or you have any questions let me know in the comments or hit me up (home). If you aren’t sure if your site is secure or not and don’t know where to start, you can book in a free website review with me here.