When you’re designing an e-commerce store there are hundreds of small factors to consider that you might not have much prior experience with. Things that seem difficult on paper turn out to be easier than you expected, and things that should be easy are often more challenging than they seem. Take, for example, a vital part of website design that even some professional developers have trouble with: choosing a color palette.
If you read that last sentence and rolled your eyes, then congratulations! You probably have an eye for what kinds of colors go well with one another, or maybe you took an art class or two. For the rest of us, however, deciding a color scheme for a website can be an intimidating prospect. If done wrong, your site might look like a circa 1998 Geocities page.
(image courtesy of Geocities-izer)
OK, maybe not quite that bad.
However, studies have shown that a pleasing color palette has a positive effect on the human mind. Certain color combinations produce a sense of calm or happiness when looked at, while more jarring combinations are upsetting. There isn’t just one color that will guarantee that your e-commerce site becomes a massive success; in fact, you have a lot of leeway when it comes to what specific colors you’d like.
Creating a palette around your favorite color is the tricky part, and that’s where color theory comes in.
Color theory is a system of generally accepted rules of how to combine colors with one another. These rules are centered around the color wheel, and how different colors relate to one another from their positions on the wheel.
Generally speaking, there are three color relationships that you can use to create a good palette: complementary colors, analogous colors, and triadic colors.
Complementary colors refer to colors that are on opposite sides of the wheel. For example, blue and orange are complementary, as are purple and yellow. Using complementary colors has an eye catching effect, thanks to the high contrast between the two colors, and makes for a bold statement. However, the effect can also be startling or even painful if the colors are too saturated, so use complementary colors with caution.
Analogous colors are probably the safest to work with, because they all come from the same section of the wheel. They go great together, and there isn’t that much you can do to mess it up. Used together, they can produce a calming effect, one that makes people think of stability and continuity. On the other hand, they aren’t very exciting, and can start to feel monotonous if you don’t add pops of color.
Lastly are triadic colors. A triadic palette consists of, you guessed it, a triad of colors, each equally distant from one another on the wheel. This option offers you many colors to work with, which adds flexibility, but also can lead you to some tyranny of choice. Use triadic colors with caution, and try many different combinations to find the best way to place your colors.
A fourth option is to go with a monochrome palette. In this case, you pick a primary color, and all of the other colors are different hues of the base color. Like analogous colors, this can get fairly monotonous, but it does allow you to get a sleek, understated effect, and is easy to implement if you’re not design-minded.
Making your own palette
The first step towards making your own palette is choosing the base color. Keep in mind that “red” is not what you want to decide on. There’s an entire world of specific shades you can choose from. Don’t get too hung up on choosing the exactly right shade, but you have the liberty to experiment a bit, and find one that you really like. You can find the exact hexcode for colors here.
Once you have chosen your color, head over to Paletton. It’s an incredibly useful tool for trying out new color schemes. They allow you to enter in your hexcode, and then test it with different types of palettes. They even have an option to see an example of what your site could look like, using that particular palette. These previews are a decent way of showing you how to use your palette, showing which colors should be most prominent, and which should be reserved for highlighting.
As for what pallette to ultimately go with, that’s a bit more complicated, and is situational to what type of product you are selling. You may be aware that most major colors are linked to different emotions in the human psyche. For example, red evokes adventure, passion, and warmth, while blue makes people think of loyalty, honesty, and reliability. There are cultural differences depending on where you live, of course, but it’s worth looking into.
There are no incorrect choices per se, but some colors are not appropriate to your audience. If you are selling luxury watches, you probably don’t want your website to be rendered in shades of pink.
Conversely, a slick gunmetal gray isn’t the face you want to present if you make baby clothes. Take a look at what your competitors in the field are using, and use that as a starting point. Obviously, you want your page to stand out, so don’t copy anybody, just try to make sure your look makes sense for your field.
Ultimately, designing a color palette comes down to a matter of taste, and experience. There is no perfect layout for a website, and no perfect color that will make you more appealing.
Like anything else that’s subjective, you’re going to have to go through trial and error until you find the combination that works best for you. Make sure to run it by your friends or family, or even people in your target demographic.
Trust us, after a few hours of looking through color swatches, you will not be able to look at any combination objectively for a while. If you find a palette, and way of using it, that pleases most people, then you’ve found your perfect palette!