How to Create Your Perfect Website Color Palette

Choosing your own website color palette is nothing close to a walk in the park, especially if you’re not confident about your color-choosing abilities. It can be a nightmare of a million colors flashing back at you, making you temporarily blind and overwhelmed.

Yup! I get it!

But before I share a few tips and formulas to help you make this experience an enjoyable one, allow me to tell you a short story…

Around the time I was a sophomore in high school, my mom’s wish was to own a red car.

She wanted it as red as they could come. Like… really red.

Eventually, finances allowed the family to afford a new car for mom, and, of course, it was a red one.

The car was a Christmas gift and I vividly remember climbing over the car to place a big huge bow on it. It was fun to help make the surprise happen, and seeing her happy face ? was more than worth it!

Funny thing is, the car had arrived two weeks earlier and we left it in the parking garage. We had to keep a straight face every time mom parked her dingy old white car next to that gorgeous new red car. Oh boy, she had no idea that car was going to be hers in a few weeks!

The red car is only one of my many childhood and teenage memories involving my mom’s love for the color red. She also loves the color green-blue, which I believe to be blue-green, but I’ll save this story for another post.

These happy memories never fail to make me smile. They’re part of a personal experience that influences the way I feel about the color red.

The Power of Color

Color is a powerful communication tool. It has the ability to attract or repel people of all ages, gender, and culture by triggering emotions and psychological responses. Color preference can be influenced by personal experiences, personal tastes, feelings or opinions.

Our perceptions of color differ based on genetics as well. We don’t all see color the same way. In the world, one in 12 men and one in 200 women have some sort of color blindness. And many more have a hard time seeing the difference between similar shades of the same color, especially if placed next to each other. So if men are your target audience, keep this information in mind when creating your color combination.

Some studies have also shown that different genders are attracted to different colors. The studies say that women tend to prefer pastels and warm colors, while men gravitate towards cool colors. It also shows that women are not keen on brown and orange and men can’t find beauty in purple.

Remember, however, these are studies. They’re not rules to live and breathe by!

Here’s a little secret of my own:

I tend to gravitate towards earthy colors and black/brown is a constant in my closet. Despite that, when my jeans are on, oranges, yellows, and reds are usually what’s on top. For my website color scheme, I also chose bright colors. The only difference being I use them sparingly and tend to rely more on neutral colors like cream, white, and black. So, yeah… I was not consulted for the study above. 🙂

Colors Around the World

Color has different meanings around the world as well. In the Americas and Europe, red is used for love, passion, and fire. In China and India, it’s used to communicate fertility and good fortune and is the preferred color for a bride’s dress.

On this side of the world, in Western culture, blue is generally associated with authority, wisdom, peace, and depression. In Greece and Turkey, blue is believed to fight evil; however, in Korea dark shades of blue are the color of mourning.

Be mindful of these differences when choosing your website color palette. To prevent confusion and misunderstandings, a quick search online will tell you what each color means in different parts of the world.

Which Color to Choose?

A common question I’m asked often is “Which colors should I choose? Ones that I like or ones that my users will like?”

The short 3-second answer is to choose colors that you like.

But wait!!

Let’s elaborate a bit more and think past your favorite colors, shall we?

When I sit down with a new client during my “Website Discovery” process, there are several questions I ask before working on website color palettes. Sometimes they have one or two colors they already use on their logo and other brand items. Other times they’re rebranding, and sometimes they’re starting a new business. So wherever you are on your business, the answers to these questions become a guide into the website-color-palette-choosing journey:

1. What words & adjectives represent your brand’s personality?
   (Feminine or masculine? Playful or serious? Luxurious or affordable? Modern or Classic? Youthful or mature? Loud or Subdued?)
2. What are your brand values?
   (Abundance, compassion, dependability, equality, fun, growth, honesty, innovation, kindness, mastery, poise, resilience, stability, trust, vision, etc.)
3. What color suits the characteristics of your product/service?
4. Who is your ideal client?
5. How do you want your ideal client to feel once they interact with your brand?

Once you answer these questions, you’ll find that some words you use align with the description and mood of a color or group of colors in the chart below.

Psychology of Color

For most of us in the Western part of this world, the meaning of colors is as follows, in a positive take:

Permission to Break the Rules

There are some industries where certain colors are more common than others. You might hear experts say you should choose your brand and website color palette only based on your target audience. In reality, you can carefully break the rules without fear, and that might as well be your brand’s differentiator.

One example is Wells Fargo. While most banks and financial institutions stay “safe” with their blue colors, Wells Fargo stands out. Its brand is a good example of rule-breaking, using colors that are related to food, clearance, and urgency, like red and yellow-orange.

Another example is the idea that because purple, in the US, means wealth and royalty, it shouldn’t be used to sell inexpensive yoga mats. Well, I don’t know about you, but I see purple and yoga work well together all the time!

How about weddings? What color comes to your mind? White? Off-white? Cream? Soft pastels? Well, I have news for you: there are a LOT of other possible colors for the happy, energetic couple’s wedding day bliss. The same goes for the independent contractors providing their services, from invitation designers to reception decor stylists.

Therefore, I strongly suggest you don’t get toooooo hung up on color psychology.

(I can hear the Gods of Color yelling at me right now…)

Color psychology will guide and help you narrow down a few color options. The secret here is to understand the rules, but consciously break them if they don’t support your brand personality, values, niche, and message.

Back to Basics: Color Theory

The human eye can distinguish about 7 million different colors. This information alone might seem intimidating when you’re on the quest of finding the right colors for your website. But it becomes less intimidating when you remember all 7 million colors are the result of three colors.

The Color Wheel

Remember learning about primary and secondary colors in school? How about tertiary colors?

Ok, maybe I went too far…

If you remember at least the first two groups, you already have the basic knowledge of color theory! Yay!

Primary colors include yellow, red, and blue. These colors can’t be mixed from other colors, which makes them the source of all colors.

Secondary colors are a mix of two primary colors. They are: orange, green, and purple.

Tertiary colors are combinations of primary and secondary colors. There are six tertiary colors: yellow-green, blue-green, blue-purple, red-purple, red-orange, yellow-orange. A good way to remember the names is to always use the primary name before the other color.

The only thing you need to know about color theory is that there are three basic categories: the color wheel, pictured above, color context, and color harmony.

Color Context

Did you know color behaves differently in relation to other colors and shapes? Color context is the way we see colors change depending on what is around it. The same orange hue “looks” different when paired with a yellow background and then with a red background.

But…which colors look good together?

At this point, you might think there are a lot of things to consider before choosing colors. And you’re not even sure which colors look good together!

Fear not, my friend!

Enter…

Color Harmony!

Before we move on to color harmony details, it’s a good idea to have a quick overview of the several terms used to describe different types of color and their variations. This information will help you when creating your website color palette. They are:

• Hue: another word for “color”; refers to one of the twelve colors on the color wheel
• Shade: a hue darkened with black (a nice trick to find dark background colors)
• Tint: a hue lightened with white (a nice trick to find light background colors)
• Value: how dark (aka Shade) or light (aka Tint) the color is, ranging from black to white.
• Saturation: refers to intensity, whether the color appears more subtle or more vibrant. The closer a color is to gray, the more desaturated, subdued, it is.
• Tone: a hue dulled with gray

The colors in the color wheel can be combined using one of the six color scheme formulas, therefore, allowing us to achieve harmony in any design. All these six schemes can create balanced and visually pleasing, or high-contrast and striking combinations.

So there you go! There are actual formulas you can follow to create a combination of colors that look good together. They are monochromatic, analogous, complementary, split-complementary, triadic, tetradic, and double-complementary.

I can almost hear you say “Yay!” then do a little color dance. 💃🏻🕺🏻

Monochromatic

This formula uses a single hue further allowing you to explore different saturation and value to create variations of that color.

This formula is guaranteed to match, creating a visually cohesive look. It’s also considered the easiest on the eyes. It doesn’t draw attention to itself and can help associate brands with a specific, memorable color.

A monochromatic color palette can be seen as undeniably chic and conservative. It may also fall prey to boredom, depending on the use. You can bend the rules a little bit – and still keep the monochromatic scheme – by using a complementary, or accent color. The complementary hue can be found directly across from your chosen color and, used sparingly, do the trick.

Analogous

The analogous combination uses colors that are next to each other on the color wheel like blues and greens or reds and oranges. They match extremely well and create schemes that are pleasing to the eye. You will often find this very versatile combination in nature – picture red, orange and yellow leaves in the Autumn or the sky during sunset.

An analogous scheme is great for very serene, peaceful designs where you want your audience to feel comfortable and relaxed. It doesn’t mean that you can’t use the same color scheme to create other feelings like exuberance and energy, especially if using warm hues.

Complementary

These are colors located across from each other on the color wheel like red & green or blue & orange. This combination, when they have the same value (tint/shade), is extremely vibrant and dynamic, and this is why they are constantly used in sports. Its high-contrast and high-intensity create “vibrating boundaries” when color vibration happens along the edges separating hues of the same value.

This scheme can be difficult to apply in a harmonious way if used in its purest form. The solution here is to introduce tint, shade, or desaturated tones to one of the colors or add a neutral color to the mix. It’ll add some variety and eliminate the vibrating boundaries while keeping the contrast.

Split-Complementary

This color scheme uses any color plus the two that border its complement. It still gives you contrast, like in the complementary scheme, but adds more colors to work with and more interesting results.

Triadic

The triadic scheme uses three colors that are evenly spaced, forming a perfect triangle on the color wheel. These combinations tend to be striking and stimulating, especially if you use primary or secondary colors. Play around with tints & shades to create a scheme with less contrast. Use one as the main color and the other two as accents.

The hardest part of this formula is getting the three colors to match the descriptions of your brand personality. I suggest you get to the questions list and color symbolism chart first before you decide to use this scheme.

Tetradic or Double-Complementary

This scheme forms a rectangle on the wheel, using two complementary color pairs. It’s a very eye-catching combination, but may be harder to apply in your designs, since more colors are more difficult to balance.

This combination works better if you choose one color to be the main hue, while the others can serve as accent colors, with adjusted saturation and value of some or all colors.

PRO TIP: If you’re not confident with your color-choosing abilities, I suggest you stay away from this color harmony formula.

Other Tools You Can Use for Your Website Color Palette

The color harmony formulas above are an excellent tool, a starting point to guide you, but it’s not the only way to do it. Here are a few other ways to do it:

• Colors can be paired by temperature, saturation, mood, and theme.
• Use an image with your favorite color, your brand’s personality, and its message and create a palette from it.
• Find an existing color palette that sparks your imagination or one that you fall in love with and make it your own.

Take a peek at some of the tools I list below. You can use them to create a color palette from scratch, from an image, or check out other existing palettes.

• Adobe Color CC to create a website color palette from scratch or from an image by clicking on the “import image” link.
• Coolors to create a website color palette from scratch, from an image by clicking on the camera icon, or simply click on “explore” link to find existing color palettes.
• Paletton and 0to255 to create a website color palette from scratch
• Design Seeds and Color Palettes to find existing palettes
• Pinterest is another great tool you can use, just search for “website color palettes”

Create Your Own Website Color Palette

Now it’s time to brainstorm and narrow down your own color palette.

It’s important to understand these aren’t strict rules to follow. There are many different steps and aspects to work through to get the right color palette for your website, and you can certainly use different paths. I will, however, share in the following lines the path I use when creating website color palettes for my clients and even for myself.

Take a look at your existing design elements. If you already have a color for your logo or any other existing brand element, you can use it to start this process. You can also include it later if you don’t want it as the main color.

After you go over your answers from the questions list above you’ll find that a few (or a lot!) of them align with the description and mood of each color in the psychology of color chart.

STEP ONE

Pick the Color(s) You Like and Represent Your Brand

This is the color that will be the most memorable, the most interesting, therefore it’ll get the most attention.

Let’s use the example of a brand that describes its personality and values with the words “stability, trust, creativity, and optimism”. We then narrow the color choice down to blue (stability and trust) and orange (creativity and optimism).

The brand also has a choice to “dump” one of the colors if it prefers to focus on one specific value or a personality trait. In our example case, we’ll stick with both, and move on to the next steps.

Remember that you can also choose the color you like if it matches some of the words you use to describe your brand. If one of your brand descriptions is “warmth” you have several options between red, orange, and yellow (and anything on this range). The same works for other colors.

“But how many colors?” you ask…

This really depends on you, the conclusion you reach after you’ve answered those questions and decide on which color formula you want to use. Most of the time, though, for non-designers, I suggest fewer colors: one or two maximum. The more colors you have, the harder it is to balance them all within your design. Keep the concept of less is more when building your website color palette.

While you’re scanning through the color chart, the color wheel and the six formulas above, think about your color palette with approximately 3 to 7 colors.

STEP TWO

Decide Which Color Scheme Formula You Will Use

In our example, once we narrow down the colors, we see that blue and orange are opposite on the color chart. This gives us the option to use the complementary formula or the split-complementary formula.

The brand likes orange but prefers to have two different hues of blue to work with. With that, let’s pick the split-complementary formula: a color plus the two that border its complement.

STEP THREE

Adjust the Hues to Your Preference

At this point, we can go into the color wheel and change shade, tint, saturation, and tone to our liking.

In our example, the brand prefers darker blues and a slightly lighter orange, almost yellow. We then add more shade (black) to the blues and more tint (white) to the orange. For the lighter blue, we moved the “needle” closer to green while still within the blue spectrum.

Now we have three colors that look good together thanks to color harmony formulas.

In the following steps, we’ll focus on which of these colors will be our main or accent colors. We’ll also choose other colors that will balance and complement them in this color palette.

PRO TIP: You can work around any specific color spectrum within the color wheel to find the tone/value that you like best.

In the following steps, the colors will be split into four separate groups:

• Main
• Accent
• Neutral
• Shades and/or Tints

STEP FOUR

Choose the Main Color(s)

In this step, you can choose one or two colors for the first group: the main color(s), sometimes referred to as “bold”, “primary”, or “dominant” color(s).

Main, primary, bold, or dominant color is “dominant” either because of how much it appears in your overall design or because of how it stands out in comparison with other colors.

A dominant color is, most of the time, your main brand color. It will also grab the most attention and be the most memorable. Think Coca-Cola™ red, McDonald’s™ yellow, Amazon™ orange, Barbie™ pink, GE™ blue, Mercedes™ gray, Chanel™ black. In other words, the main color is your main star. ⭐️

In our example case, we’ll choose two main colors: the lighter hue of blue will be our first main color and the darker “navy” blue will be our second main color.

We could choose to use the light orange and one of the blue hues as the main colors, or even just one color as the main one. This choice depends on a few things. If:

• the brand is already established
• already have a logo color
• want to use your logo colors as main colors
• you’re starting from scratch (you’ll then have more flexibility)
• the brand values are stronger on one color than another (In our example: stability and trust are stronger, weigh more than creativity and optimism)

WHERE TO USE: Use these colors to catch your audience’s attention, or highlight important information such as logo, menu tabs, call to action buttons, titles, headlines, links, phone numbers, etc.

PRO TIP: Pick a versatile main color that works well on both light and dark backgrounds. If your main color is white/very light or black/very dark, you might want to have one of your accent colors be the versatile one.

STEP FIVE

Pick the Accent Colors

Next, pick one or two colors that contrast or complement your main color. This is the color you use most after your main color.

Accent colors highlight other important parts of your website while helping create hierarchy and establish a unified design. In turn, they’ll help direct your audience’s eye to the most important information on your pages.

Depending on your brand and messaging, you can go for more than two accent colors, for example, a colorful brand style aimed at children or fun themes. Most of the time though, one or two is the ideal number.

An accent color doesn’t necessarily mean it’s a bold or vibrant, ultra-saturated color. It simply means a color that contrasts your main color or complements it. If you’re in doubt, navigate back to the color wheel and the formula you choose to look at the options you have.

In our example, we’ll choose the light orange as our accent color.

Remember that you’re free to choose any hue as your accent color. The only difference is how you’ll use it on your pages.

PRO TIP: Limit yourself to two or three colors between your main and accent colors. Choose one main color? Go for two accent colors. If you pick two main colors, stick to one accent. Do you want to keep it super simple? Choose one main color and one accent color.

WHERE TO USE: These colors can highlight important or secondary information on your page like CTAs (call-to-action), quotes, subtitles, or current menu tabs.

STEP SIX

Pick Your Neutral Colors

These colors balance your design and create “white space” as well as provide dark colors for your main text and light colors to differentiate backgrounds, textures, and patterns. All color schemes should have at least 2 neutral colors.

If you use a neutral color as a background, make sure that it has enough contrast with your text color, so it’s not a strain on the eye and it’s easy to read. When in doubt, use white, beige, and different hues of gray. Black is an option, but it tends to dominate a color scheme if it’s used in several elements, so be careful.

For our example, we’ll pick two neutral colors: beige for backgrounds and almost black for the text.

PRO TIP: Try to stay away from pure black (#000000). Black is overpowering and nothing is really 100% black. Add some subtle color into your blacks and it will be easier on the eyes.

WHERE TO USE: These colors are mostly used as backgrounds, textures, subtle patterns, text, and as a balance between the main and the accent color.

STEP SEVEN

You Might Need Shades and Tints

Sometimes you find that you need an extra version or two of your main or accent color. A good solution is to add in shades or tints of it. This is an optional step, but I find it helps when you need a variation of one or more colors from your palette.

For our example, we’ll choose a very light version of the orange accent color (tint) and a darker version of the background color we choose above. These combinations will give us a good amount of flexibility.

WHERE TO USE: These variations can be used for backgrounds, drop shadows, glow effects, overlays, and supporting elements. They usually stay out of the spotlight while giving you more choices without changing the color scheme you created.

A good example of a use for shades and tints is when you have a long page with sections where you can use background colors that contrast between dark and light or when you have contact forms that are designed with a border and background color.

Are You Feeling Stuck?

Seven million colors to choose from.

Different formulas & nomenclatures.

An overwhelming feeling.

Yup, I know! 🤦🏻‍♀️

But here’s what I’ve learned by doing this time and time again: Follow the steps and give yourself permission to change a few colors here and there once you start implementing them – especially neutrals, tints, and shades.

It’s not uncommon, even for a new designer, to stumble upon a need for an extra color or a different version of a hue once the website color palette is ready and it’s being implemented on layouts.

So don’t be so hard on yourself!

You’re DIYing your palette and reached this point on this post, therefore, you’re already a hundred steps ahead from where you were before! Give yourself a pat on the back! ??

Let’s Recap

First ✓

Answer the questions I provided earlier in this post. If you already have a color you use on your brand’s logo or graphics, consider using it as a starting point.

Second ✓

Compare your questions with the psychology of color chart. Find the ones that describe your brand’s personality and values and write them down along with the colors they match.

Third ✓

Steps 1-3: Go over the color harmony formulas and find which ones would fit better with the color results you came up with from your answers and the color chart. Play around with the combinations using a few of the tools I provided to get the “hang of it”.

Fourth ✓

Steps 4-7: Decide on your main, accent, neutral, and shades & tints colors for your final website color palette.

Conclusion

The most important lesson from this post, besides a few good ideas & formulas to choose your perfect website color palette, is consistency!

Once you choose your colors, decide where they will be used and stick with it, keep it consistent! If you decide that your buttons will have one color (either accent or main), or have two types of button colors, keep it this way all the way through. Same goes for headlines, subheadlines, backgrounds, etc.

Like I mentioned above, this is just a guide to help you create a color palette for your website. These are not concrete rules set in stone. Use your gut instincts and remember to always consider the triggers and emotional connection colors bring you, your brand, and your audience. I hope this guide helps you create a color palette you really love and are ready to embrace moving forward.

If you’re in the trenches, creating your website color palette, let me know in the comments how you’re doing.

Let’s Connect!

Join me over on this Blog, Facebook, or YouTube where I share even more color tips, and other brand and website-related tips.

PS: If you scrolled all the way down here while scanning this whole post, read the recap section and join me over on Facebook.

PS2: If you liked this article and would love to Pin It, I created a few image choices for you below! Thank you for sharing!!