How to Create a Color Palette for Your eCommerce Site - 1Digital® Agency (2024)

Color is serious business. Especially when you’re choosing the colors that will brand your serious business. You can’t just pick your favorite colors, and apply them to your web store willy nilly. This post will tell you how to use color theory to develop a color palette that will become the uniform look of your eCommerce brand.

Color theory traces it’s origins back to Isaac Newton’s Opticks, and the notebooks of Leonardo da Vinci, but it’s not as intimidating as it sounds. Color theory refers to a body of practical guidance for color mixing and choosing color combinations. It’s the accepted wisdom for how colors should be combined, and it’s the theoretical basis of the rules we’ll use to create our color palette.

In accordance with color theory, there are three main types of color palettes that you can create:

Analogous:

Analogous palettes employ colors that are close to one another on the color wheel. An analogous color palette communicates uniformity and stability. They limit distraction from the content of your site. Analogous palettes are also easier to work with. There’s not a lot of difference in the colors you have to choose from, so it’s harder to make a mistake.

Complementary:

Complementary color palettes use colors that sit opposite one another on the color wheel. These color palettes offer a sense of contrast, as well as balance. Complementary color palettes are great for drawing visitor’s attention to certain elements of your design, but they have to be handled carefully, because they can be jarring too.

Triadic:

A triadic palette consists of three main colors equally spaced on the color wheel, making it the most diverse palette of the bunch. However, that also makes it the most difficult to work with, as the larger amount of hues will require a lot more thought and experimentation.

We’re going to create a complementary color palette as an example, because that’s what works best for eCommerce. eCommerce sites need to draw attention to their call to action elements, like Add to Cart buttons, and that’s the complementary palette’s strength.

Step 1- Start with White

All web design color palettes will need white. White is your background color. White space allows you to give separate images and elements room to breathe on your site. In Photoshop, the hex value for pure white is #ffffff. Every color palette is going to start like this:

Step 2- Choose Your Base Color

This is going to be the main color on your site, as well as the color that dictates the rest of the palette. So it’s an important decision, but there’s no need to overthink it. You probably already have a color in mind that you want to associate with your brand. If not, here are a few pointers for picking your base color:

If you already have a logo you’ve been using with an established color, then that’s your color.

If your competitor has already staked a claim on a color, and uses it heavily in their brand, that’s not your color.

Consider your audience, but don’t be cliché. Think about who will be using your website. Pick a color that reflects how you want that audience to feel, but don’t be too obvious. If you’re making a site for young girls, and you make your base color pink, you’ll get lost in the crowd.

For this palette, I’m choosing purple as my base color.

Once you’ve chosen a base color you’ll need to zero in on an exact shade. There are a ton of color formats out there, like hex and RGB. Some are labeled ‘web safe’, meaning they will almost always look right on computer monitors. There are also hex values that correspond to a specific shade. Fortunately, there are plenty of tools out there that can help you identify web safe shades, and their hex value. I used a tool called Dribble. Dribble actually allows us to read ahead a little bit, because it lets you pick your base color, and then gives you possible color palettes based on that selection. But lets ignore that short cut for the moment. Dribble tells me that the hex value for my shade of purple is #4F1091. So, with the addition of my base color, my color palette now looks like this:

Step 3- Choose Your Accent

Your accent color will be used sparingly on your site, but it will be used in very important places. For a complementary color palette your accent will be (you guessed it) the complementary color of your base. This is going to be the color I use for elements that I really want to make stand out, like my call to action buttons.

Anybody with a color wheel knows that the complementary color to my purple base will be yellow. But to find the exact hex code of a complementary yellow, I’m going to use a tool called Paletton. I put in my hex value, hit add complementary color, and it gives me a couple yellows to choose from. I want my call to action buttons to stand out so I’m going to pick one that’s on the brighter side. I’m going with #FAD00C. Now my color palette looks like this:

Step 4- Choosing Your Grays

In addition to your base color and your accent color you’ll need a few grays. Almost every website you see will use two shades, a dark gray and a light gray. The dark gray is used for text, while the light gray is used to color elements that will go onto you white background, but also need to be distinguished, slightly, from it.

There are plenty of different ways to choose your grays. You can use any of the tools we’ve utilized so far. There’s also this method for those of you who have Photoshop. However, since it’s pretty hard to go wrong with the grays, you’ll be safe if you choose something between #333333 and #666666 for the dark, and something between #FFFFFF and #CCCCCC for the light. For the dark grays I’m going to pick #333333, and for my lights I’m going to pick #CCCCCC.

With my grays picked out I have my final color palette. It looks like this:

So that’s a real simple way to design a complementary color palette for your eCommerce store. Once you’ve done some designing you can get a lot deeper into your color options. If you could use some professional help with a killer eCommerce design, our custom designs look beautiful no matter what the color scheme. If you know any other good tools for designing a color palette, leave them in the comments below, or on our Twitter. In the meantime, I’m going to play a game where I type random letters and numbers into Photoshop, and see where I land on the color hex.