Are you ready to level up your website’s look? Join Chrissy Rey as she dives into the art and science of color theory in this episode of “Website Success.” Learn how to pick colors that look stunning and work in harmony to elevate your brand. Plus, get tips on tools and accessibility to make your site a visual masterpiece. Don’t miss this colorful journey into the world of web design.
Listen to the Episode
Show Notes
In this episode, we’re diving deep into the art and science of color theory. Host Chrissy Rey will guide you through the essentials of picking the perfect colors for your website and brand. Grab your color wheel, and let’s get started!
Timestamps
- 0:17 – Introduction: The Importance of Color Theory
- 1:05 – What is Color Theory?
- 2:30 – The Color Wheel Explained
- 4:15 – Types of Color Harmonies
- 4:20 – Complementary Harmonies (FedEx)
- 5:45 – Analogous Color Harmony (Subway)
- 7:10 – Triadic Harmony (Popsicle, Fanta)
- 8:35 – Monochromatic Harmony (Starbucks)
- 10:00 – Creating Your Color Palette
- 10:20 – Coolors
- 11:45 – Accessibility in Color Choices
- 12:10 – WebAIM Contrast Checker
- 13:30 – Testing Your Color Choices
- 13:50 – Canva
- 15:00 – Wrap-up and Next Steps
Key Takeaways
- Color theory is like the grammar rules for colors; it helps you understand which colors look good together.
- The color wheel is your go-to guide for picking color combinations.
- Different color harmonies offer various visual effects and emotional impacts.
- Tools like Coolors and WebAIM Contrast Checker can assist in creating an accessible and harmonious color palette.
- Always test your color choices and get feedback to ensure they resonate with your target audience.
Resources Mentioned
Transcript
Chrissy Rey 0:17
Welcome to Website Success, the ultimate podcast that turns website zeros into heroes. I’m your host, Chrissy Rey, and with over 25 years of website creation experience under my belt, I’m here to guide you every step of the way. Join me on this exhilarating journey, and you’ll learn how to transform your online presence, attract your target audience, and effortlessly convert them into loyal customers. Let’s embark on this transformative adventure together and conquer the digital world, one pixel at a time.
Chrissy Rey 0:49
Hey, everyone, welcome back to Website Success. In the last episode, I talked about color psychology. And so you learned a little bit about how to choose that sort of “base” color that you’re going to use that you’re going to use for your website to your brand, based on the personality of your brand, and how you want that brand or your website to make your target audience feel how you want them to react emotionally to your website. In this episode, I’m going to take that a step further and talk about color theory. And specifically, I’m going to talk about how to choose colors that look well together. So creating a color palette. Let’s get started.
Chrissy Rey 1:32
And the first thing I want to answer is what is color theory. In a nutshell, it’s the science and art of using colors. So it’s kind of like grammar rules for colors. If you think about the rules of grammar, these are the rules for color. And it helps you to understand which colors look good together and why.
Chrissy Rey 1:51
And we’ll start with the basics, which would be the primary tool of color theory, that’s going to be the color wheel. If you think of a circle with all of the colors on the rainbow, that’s your color wheel. You’ve probably seen one before, maybe in your art class or something like that. But color the color wheel. If you haven’t seen one before, just search for a color wheel. And you’ll get lots of examples to come up.
Chrissy Rey 2:15
On your color wheel, you have your primary colors, which are red, blue, and yellow. You can’t use other colors, you can’t mix other colors together to create those primary colors. They only exist as those primary colors. So you can’t mix two other colors to make red for example.
Chrissy Rey 2:33
But if you mix those primary colors together, then you get what are called the secondary colors. So for example, if you mix red and blue together, you’ll get purple. If you mix blue and yellow together, you’ll get green. And then if you mix red and yellow together, you’re gonna get orange.
Chrissy Rey 2:50
You also have what are called tertiary colors. And those are going to be combinations of primary and secondary colors. So for example, you can take blue and green and create a bluish green or blue green, you can take yellow and orange and mix those together to make a yellowish orange or an orangish, yellow, and so on.
Chrissy Rey 3:08
There’s many, many combinations of colors that you can create using that wheel. The color wheel is going to be your best friend when picking these color combinations. And those combinations are often referred to as color schemes, or color palettes, you pick which one you want to use, I personally have the preference for color palettes, that’s what I’m going to use in this episode.
Chrissy Rey 3:30
Now using the color wheel as a reference, there are several what are called color harmonies, or color harmony rules that you can use to create aesthetically pleasing color combinations.
Chrissy Rey 3:42
And the first color harmony that I want to talk about is complementary. And a complementary color palette is going to have colors that sit opposite each other on the color wheel. So think of color combinations like red and green, blue and orange, etc. And when you use complementary colors, you’re going to create contrast and stability. So it sort of use like using the yin and yang of color combinations.
Chrissy Rey 4:08
A really good example of a company that uses a complementary color palette is going to be FedEx, they use purple and orange or at least in their current iteration, they use purple and orange and those are complementary colors. And they carry that that palette, they use it in their logo, but they carry it over to their website. And so if you go to fedex.com you’ll see that that website is primarily purple and orange along with black and white.
Chrissy Rey 4:34
And by the way, you’ll notice that a lot of brands do use black and white in their palettes along with those primary colors. Now, I tend to use I tend to use black and white but I don’t necessarily put them in my color palette. Some designers do put black and white in their color palette. I just sort of take it as a given that I’m going to be using it so it’s up to you if you want to include it when you’re creating your color palette if you want to include black and white in there.
Chrissy Rey 5:02
Now another color harmony that you might want to consider is analogous and analogous palettes consist of colors that are next to each other on the color wheel. So think of blue and green, or red and orange, or green and yellow, and analogous colors are going to create a cohesive look. It’s like the family of colors, it gets along really well.
Chrissy Rey 5:23
A really good example of a brand that uses analogous analogous colors is subway, they use green and yellow for their logo. And if you go to their website, you’ll see that they carry those colors over to their website, again, along with white and black.
Chrissy Rey 5:38
Another color harmony is triadic. And a triadic palette uses three colors that are more or less equally spaced around the color wheel. And you can think of maybe using all three primary colors. So for example, a palette that’s got red, blue, and yellow, or all of the secondary colors. So green, orange, and purple triadic colors tend to be very vibrant, and they can create dynamic visual contrast.
Chrissy Rey 6:04
There are a few brands that use triadic color palettes. Popsicle is a really good example, they use yellow, red and blue for their logo. And they carry that over onto their website. And another good example is Fanta. Fanta is the soda brand. They use a lot of orange and a sort of purplish blue and green for their logo. And again, both of those brands carry those color palettes over to their websites.
Chrissy Rey 6:30
Another color harmony that I want to talk about is monochromatic. And that’s all about using a single color, but using different shades of that color. So think of light blue, medium blue, dark blue, etc.
Chrissy Rey 6:44
An example of a brand that uses a monochromatic color palette would be Starbucks, they use green and white and their logo. And then if you go to their website, you’ll see that it includes several different shades of green along with the white in the black.
Chrissy Rey 6:59
Now there are other color harmonies that you can use to help you create a color palette. But I do think that these options are going to give you a good start.
Chrissy Rey 7:07
So how do you turn these different color harmony rules into a color palette for your website? Well, you start off with your base color based on the color psychology that we covered in the previous episode. So for example, you want to think about your target audience the brand voice that you want to achieve. And those that information should help you come up with a primary color that’s going to really speak to your target audience. Once you get in I’m sorry, I shouldn’t have said primary color because that’s a specific type of color, but your base color your main base color. And once you’ve got that base color, then you can use color harmony to come up with the other colors that will go with it.
Chrissy Rey 7:50
I recommend starting simple and create a color palette that’s got two, three, maybe four colors once you once you get a little bit more experienced, then you can add a few more but two or three colors is usually plenty to get started. And you can add those colors to your palette, use those those color harmony roles to create a pleasing palette.
Chrissy Rey 8:10
There are a lot of tools out there that can help you do this. One tool that I use a lot is coolers which you can get at coolors.co. Another tool is Adobe Color, which you can get to at color.adobe.com. Now with Coolors, which again, that’s my tool of choice, with a paid plan, which I have, you can pick the method that you want to choose the color palette with. So you can say that you want to choose monochromatic colors or analogous colors, complementary colors. So you can use the color harmony that speaks to you when you can play around with it from there.
Chrissy Rey 8:48
Now before you run over to Coolors or Adobe Color, I do want to talk a little bit about accessibility. Not everyone sees color the same way. Some people have color blindness, and some people have low vision or no vision. So when choosing colors, make sure there’s enough contrast between the text and the background color so people can read that text. And there are tools like the web aim contrast checker that can help you with this. So just look up WebAIM contrast checker. And if you’re using Coolors or Adobe Color, both of those has some accessibility tools that you can use to help you create an accessible color palette. So make sure you use them.
Chrissy Rey 9:33
Now before you finalize your colors, it’s a really good idea to test them out. Coolors has a really cool palette visualizer that you can use to see what your colors might look like on a website. So it doesn’t actually build the website for you but it just sort of puts them into an example website. And you can also create a brand board with your chosen colors using a tool like Canva or Photoshop or whatever your graphics tool choice is. Once you create that brand board, you can share that with some of your friends, your family, people whose opinions you trust, because sometimes a fresh set of eyes are going to catch something that you missed. I do also recommend sharing the palate with some of the members of your target audience to see what they think about it. If it speaks to them, great. If they don’t like it at all, then you can go back to the drawing board or the palette board.
Chrissy Rey 10:24
All right, so that’s a wrap on color theory. Remember, the colors you choose can make or break your website’s success. So take your time test different combinations. And don’t forget about accessibility. If you found this episode helpful, please leave a review and share it with someone else who could benefit from it. Until next time, I’m Chrissy Rey, and this is website success. Thanks for tuning in.