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 big 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.
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. Others 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:
- 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?)
- What are your brand values?
(Abundance, compassion, dependability, equality, fun, growth, honesty, innovation, kindness, mastery, poise, resilience, stability, trust, vision, etc.)
- What color suits the characteristics of your product/service?
- Who is your ideal client?
- 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…)
Picture a female attorney who owns a law firm by the beach and might want to focus on female clients. She might move away from the usual dark blues and blacks of regular law firms, and focus on more feminine and summery colors. Check out the Ribeiro Law Firm (funny enough we have the same last name but we’re not related).
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.
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!
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 six color scheme formulas that allow 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!” and do a little color dance. 🕺🏻💃🏻
This formula uses a single hue, exploring 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, might do the trick.
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.
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.
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.
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.
“But how many colors?” you ask…
This really depends on you and 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. 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. These are then split into 4 categories:
Pick 1 – 2 main colors
Main, primary 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 can be, 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.
PRO TIP: Pick a versatile main color that works well on both light and dark backgrounds. If your main color is white or black, you might want to have one of your accent colors be the versatile one.
WHERE TO USE: Use these colors on a limited number of places, 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.
Pick 1 – 2 accent colors
Next, pick one or two colors that contrast or complement the main one you chose. These are the colors you use them most after your main color. You need accent colors to highlight other important parts of your website.
Depending on your brand and messaging, you can go for three accent colors, for example, a colorful brand style aimed at children or fun themes.
Below you can see a few examples that have more than two accent colors.
An accent color doesn’t necessarily mean it’s a bold or ultra-saturated color. It simply means a color that contrasts your main color or complements it. So if your main color is navy blue, your accent color can be off-white, lavender, or green.
PRO TIP: Limit yourself to two or three colors between your main and accent colors. If you choose one main, you can go for two accent colors. If you pick two main colors, stick to one accent. Accent colors help you create hierarchy and establish a unified design. In
WHERE TO USE: Use these colors to highlight secondary information your page but they can also highlight important info. For example, it can be used to highlight buttons when hovered over or to color a secondary button. It can also be used for quotes, subtitles, ot current menu tabs. They are not the focal point of your page, but you still want them to stand out from the rest.
Pick 1 – 3 neutral colors
These colors balance your design and create “white space” as well as provide dark colors for your main text. All color schemes should have 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 used in several elements, so be careful.
PRO TIP: Never use 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, patterns, text, and as a balance between the main and the accent color.
Shades and Tints
Pick 1 – 2 shade / tint
Sometimes you find that you need an extra version or two of your main color. A good solution is to add in shades or tints of it.
WHERE TO USE: These variations can be used for backgrounds, drop shadows, overlays, and supporting elements. They usually stay out of the spotlight while giving you more choices without changing the color scheme you created.
Step One ✓
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.
Step Two ✓
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.
Step Three ✓
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”.
Step Four ✓
Decide on your main, accent, neutral, and shades & tints colors for your final website color palette.
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. You can also DM me your new color palette using the chat feature on this page and I’ll be happy to provide feedback!
Ask me anything Live!
Join me over on Facebook where I’ll be live this week
PS: If you scrolled all the way down here while scanning this whole post, read the recap section and join me over on Facebook. I’ll be live this week to show you how I created my own color palette, share even more color tips, and answer your questions! To get a reminder before I go live, just type “remind me” in the chat box below while logged into to your FB account.
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!! ❤️