When I sat down at my laptop to update this article, I thought I had at least a fifth-grader’s grasp of color wheels.
I certainly didn’t expect to uncover a completely contradictory view of color theory. Nor did I expect this new theory to lead me down an existential rabbit hole and question everything I thought I knew about color.
So let’s take a journey through color theory, both traditional and perceptual (remember that word), with a marketer’s eye toward harmonious color schemes, accessible UX, and eye-catching visuals.
We'll cover the following topics:
- Color Theory and Marketing
- What is color theory?
- Why is color theory important in web design?
- Color Theory 101: Traditional Color Theory
- Additive & Subtractive Color Theory
- Color Theory 201: The Theory of Color Perception
- The Meaning of Color
- What are the seven types of color schemes?
- Examples of Color Schemes
- How to Choose a Color Scheme
- How to Use Color Palettes
- Color Tools
Color Theory and Marketing
Is a picture still worth a thousand words if its color scheme makes you queasy?
We all know that infographics, charts, graphs, and animated GIFs can attract and keep an audience’s attention — but not if you pair neon green with khaki (look up hex codes #02ff00 and #d2c08e if you want proof. Don’t say I didn’t warn you.)
A working knowledge of color theory and design can help keep readers’ eyes on your content.
We’ll start with traditional color theory, and then we’ll turn everything inside out and explore another way of approaching color and accessibility.
What is color theory?
Let’s start with what it isn’t: Color theory is not a fixed, monolithic body of knowledge.
I’ll use the term “traditional color theory” to refer to the common guidelines and rules that are rooted in the red-yellow-blue model, and also to distinguish it from perception color theory (that word again!).
Those are most relevant to the modern marketer, but color theory has fascinated philosophers, artists, and scientists for many centuries.
Aristotle wrote about color theory around 330 BCE, and the Arab scientist Ibn al-Haytham, the father of modern optics, made significant contributions to color theory in the 9th century, during the Islamic Golden Age.
Traditional color theory is the basis for the primary rules and guidelines that surround color and its use in creating aesthetically pleasing visuals.
Understanding these basics can, according to former HubSpotter Bethany Cartwright, give you a logical structure to create and use color palettes more strategically. The results will let you deliberately evoke a particular emotion, vibe, or aesthetic — essentials for good marketing.
There are many tools to help marketers — even those of us who daydreamed through art class — create compelling visuals. But graphic design requires a little more background knowledge of design principles.
Take selecting the right color combination, for instance. It might seem easy at first, but when you‘re staring down a color wheel, you’re going to wish you had a little more information. In fact, brands of all sizes use color psychology to learn how color influences decision-making and affects design.
Understanding how colors work together, the impact they can have on mood and emotion, and how they change the look and feel of your website is critical if you want to stand out from the crowd — for the right reasons.
Whether your goal is more effective CTAs, higher sales conversions, or just raising your marketing game, the right color choice can highlight specific sections of your website, make it easier for users to navigate, or give them a sense of familiarity from the moment they click through.
But it’s not enough to simply select colors and hope for the best — color theories, moods and schemes, finding the right HTML color codes, and identifying web-accessible colors for products and websites are key to your success.
Read on for our guide to traditional color theory, perception color theory, color wheels, and color schemes for your site.
Color Theory 101: Traditional Color Theory
Let's go back to high school art class for the basics of traditional color theory, starting with primary, secondary, and tertiary colors.
What are primary colors?
Primary colors can’t be created by combining two or more colors. Cartwright compares them to prime numbers, which can't be created by multiplying two numbers.
There are three primary colors in the traditional color system:
- Red
- Yellow
- Blue
“Think of primary colors as your parent colors, anchoring your design in a general color scheme,” says Cartwright. Any one — or a combination — of these colors can give your brand guardrails when you explore other shades, tones, and tints (we'll talk about those in just a minute).
“When designing or even painting with primary colors, don‘t feel restricted to just the three primary colors listed above,” says Cartwright. “Orange isn’t a primary color, for example, but brands can certainly use orange as their dominant color (as we at HubSpot know quite well).”
Knowing which primary colors create orange is your ticket to identifying colors that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of color ...
What are secondary colors?
Secondary colors are the colors that are formed by combining any two of the three primary colors listed above. In the traditional color theory model above, you can see how each secondary color is supported by two of the three primary colors.
The three secondary colors are orange, purple, and green. You can create each one using two of the three primary colors. Here are the general rules of secondary color creation:
- Red + Yellow = Orange
- Blue + Red = Purple
- Yellow + Blue = Green
Keep in mind that the color mixtures above only work if you use the purest form of each primary color.
This pure form is known as a color‘s hue, and you’ll see how these hues compare to the variants underneath each color in the color wheel below.
What are tertiary colors?
Tertiary colors are created when you mix a primary color with a secondary color.
“From here,” Bethany Cartwright says, “color gets a little more complicated.”
“If you want to learn how the experts choose color in their design, you've got to understand the other components of color.”
“The most important component of tertiary colors is that not every primary color can match with a secondary color to create a tertiary color,” says Cartwright.
For example, red can‘t mix in harmony with green, and blue can’t mix in harmony with orange — both mixtures would result in a slightly brown color (unless, of course, that‘s what you’re looking for).
Instead, tertiary colors are created by mixing a primary color with the secondary color next to it on the traditional color wheel below. There are six tertiary colors in this model:
- Red + Purple = Red-Purple (magenta)
- Red + Orange = Red-Orange (vermillion)
- Blue + Purple = Blue-Purple (violet)
- Blue + Green = Blue-Green (teal)
- Yellow + Orange = Yellow-Orange (amber)
- Yellow + Green = Yellow-Green (chartreuse)
Designers use a color wheel to pick the best and most compatible colors to ensure the combinations achieve the desired visual effect.
The Color Wheel
Now that we’ve identified the 12 main colors in the traditional color wheel, let’s get real: Choosing color combinations, especially on a computer, involves a much wider range than a dozen basic colors.
The color wheel is a circle graph that charts each primary, secondary, and tertiary color, as well as their respective hues, tints, tones, and shades.
Isaac Newton — the same one whose head was apocryphally hit by an apple as he lounged under a tree — is widely considered the first person to develop a color theory based on this color wheel.
And even in 1704, the primary colors were disputed. Whereas Newton (red, green, blue) studied pigments in a lab, the German writer Johann Wolfgang von Goethe (yellow, blue) relied on perception and experience.
Using a traditional color wheel helps you choose color schemes by illustrating the relationships between each color on a rainbow scale (red, orange, yellow, green, blue, indigo, violet — ROY G BIV).
When choosing colors for a color scheme, the color wheel gives you opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors.
These mixes create the color variants described below:
Hue
“Hue” is what we usually mean when we say the word “color.” All of the primary and secondary colors, for instance, are hues.
Hue identifies the color family — like red, green, or blue — but you need more information to identify a specific color. For instance, sky blue, midnight blue, cornflower blue, and royal blue can’t all be simply described as “blue.”
Hues are important to remember when combining two primary colors to create a secondary color. “If you don‘t use the hues of the two primary colors you’re mixing, you won't generate the hue of the secondary color,” Cartwright says.
This is because a hue has the fewest other colors inside it. By mixing two primary colors that carry other tints, tones, and shades inside them, you're technically adding more than two colors to the mixture, making your final color dependent on the compatibility of more than two colors.
If you mixed the hues of red and blue, for instance, you‘d get purple, right? But mix a tint of red with the hue of blue, and you’ll get a slightly tinted purple in return.
The term “shade” often refers to light and dark versions of the same hue. But a shade is technically the color that you get from adding black to any given hue. The various shades just refer to how much black you're adding.
Tint
A tint is the opposite of a shade, but people don‘t often distinguish between a color’s shade and its tint. Adding white to a color can give you a different tint. So, a color can have a range of both shades and tints.
Tone (or Saturation)
You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but “saturation” is more common in digital design. “Tone” will be used more often for painting.
Chroma
Chroma describes how vivid or muted a color appears. The Colour Literacy Project notes that “‘colorfulness’ is often used to describe the vividness or chroma in everyday language.”
Color theory educator Peter Donahue explains chroma as “a measure of how different a color appears from a gray of the same lightness.”
With the basics covered, let's dive into something a little more complicated — additive and subtractive color theory.
Additive & Subtractive Color Theory
If you‘ve played around with color on any computer program, you’ve probably seen a module that listed RGB or CMYK colors with some numbers next to the letters.
Ever wondered what those letters mean?
CMYK
CMYK stands for cyan, magenta, yellow, and key (black). Those also happen to be the colors listed on your ink cartridges for your printer. That's no coincidence.
CMYK is the subtractive color model, so called because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black.
Think about printing on a piece of paper. When you first put a sheet in the printer, you‘re typically printing on a white piece of paper. By adding color, you’re blocking the white wavelengths from getting through.
Then, let‘s say you were to print something else over that printed piece of paper. You’ll notice the areas that have been printed twice will have colors closer to black.
“I find it easier to think about CMYK in terms of its corresponding numbers,” says Cartwright. “CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with black. But, if all four colors equal 0, you end up with true white.”
RGB
RGB color models, on the other hand, are designed for electronic displays like computers.
RGB stands for red, green, and blue, and it’s based on the additive color model of light waves.
This means that the more color you add, the closer you get to white.
“For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255,” says Cartwright.
When you're creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice, you can use either one to find colors, and the other color model will adjust accordingly.
However, many web programs will only give you the RGB values or a hex code (the code assigned to color for CSS and HTML). So, if you're designing digital images for web design, RGB is probably your best bet for choosing colors.
You can always convert the design to CMYK and make adjustments should you ever need it for printed materials.
Color Theory 201: The Theory of Color Perception
What if everything we thought we knew about color was wrong — or at least outdated?
When I sat down with Peter Donahue, an artist and color theory educator, to talk about color perception theory, I quickly realized that it runs contrary to almost everything else in this article.
That doesn’t mean you have to let go of everything you thought you knew about color theory — and in fact, if you’re using common graphic design tools, you’re likely working in RGB or CMYK color spaces, so it’s useful to understand how they work.
But — as befitting a subject that has piqued the world’s greatest minds for two millennia — it’s complicated.
To help me understand it, Donahue starts with color meanings or associations. “It’s not the hue that we respond to on an unconscious level,” he tells me.
Even people who can’t see color know that red is associated with passion (in some cultures). It “kind of proves that [color associations or meanings] have nothing to do with the color itself, but the idea of color.”
Perceiving Color
Donahue says that a big part of what he does as an educator is to “unteach people the red-yellow-blue model” and instead use perception science to find color harmonies.
“Perceiving” means that color isn’t a physical property — it’s a complex interaction involving light wavelengths and our brains. It’s something we experience, not something we observe.
Put another way: I perceive my tabby cat as orange because of how light hits his fur and how my eyes and brain interpret that information. He’s not intrinsically orange, because “orange” isn’t a property that exists out in the world.
If your brain is beginning to melt: Welcome. Color is all in your mind, literally. Perceiving color is all about light, rods and cones, and gray matter.
I did an experiment from the Colour Literacy Project to make the abstract a little more tangible.
All four of these circles were originally white. I picked a color — the nice, bright HubSpot orange (#FF5C35, if you’re playing along at home) — and filled it in the top left circle. I stared at the black dot inside the orange circle for 30 seconds, and then looked at the white circle below it.
When I stared at the white circle, a pale blue emerged. I found the closest match and used it to fill in the top right circle, which you can see above.
But that pale blue only existed because of the way that light activated my entire visual system and how my brain interpreted that data — it’s not something I could take a photo of. Color exists inside my brain, not outside of it.
Using Perceptual Color Theory
Let’s look at how you might use the perceptual model to select, say, new brand colors.
The perceptual model isn’t concerned with what Peter Donahue calls “the traditional hue-first approach,” which he says “offers no guidance in terms of how to manage value or chroma.”
(Chroma, remember, refers to how vivid or muted a color is.)
![“What I really wish [web designers] knew was that traditional color theory actually contributes to inequality when it comes to UX design and accessibility issues.”—Peter Donahue, Artist and color theory educator](https://knowledge.hubspot.com/hubfs/color-theory-8-20240709-3783296.webp)
Adhering to a hue-first approach can have real-world implications, particularly with respect to UX and accessibility.
I asked Donahue what advice he’d give to somebody new to color theory, and he said, “What I really wish [web designers] knew was that traditional color theory actually contributes to inequality when it comes to UX design and accessibility issues.”
A color wheel based on perception science. On a traditional color wheel, yellow would be opposite purple, green opposite red, and so forth. Donahue, who made the colordisk above, says that the hue intervals on the traditional color wheel aren’t useful in design and accessibility.
That is, because of the way the hues are spaced on a traditional color wheel, you could select colors opposite each other, thinking that they’re complementary, when in fact they could result in poor contrast or muddied visuals.
“The interval of the hues you’re choosing” — that is, how far apart they are on the color wheel — “is the traditional approach.” But Donahue says that “the more recent studies and ideas are all saying [that approach] is completely bogus.”
The idea that these three colors “are inherently harmonious is just false,” he tells me. “Because if you choose those three hues and represent them all as very vivid, chromatic colors, they’re actually very disruptive.”
I tested this — albeit crudely — starting with Canva’s (traditional) color wheel and a cheery red, represented by hex code #e51a25. I then selected a triadic color combination.
This gave me a green (#25E51A) and blue (#1A25E5). Already, the combination is not giving “brand color” vibes.
I put each of those hex codes into the OKLCH color picker and converter and cranked up the chroma to make them as vivid as the tool allowed. It returned a color palette best described as “headache.”
Pass the Advil.
If you’re picking brand colors, Donahue says to ask yourself what you’re aiming for, like a certain mood or emotion. “Am I going to choose all colors that are deep, meaning they are low in value, but still saturated?”
My best approximation of a triadic color scheme using Donahue’s Colordisk above. Much better.
“Rather than hue, think about the other dimensions, like chroma and value. Plan your color schemes according to these intuitive responses that even somebody who hasn’t studied color theory will be able to respond to.”
“You’ll be much more effective at communicating that mood or emotion than if you were trying to choose certain hues.”
My colleague Ramona Sukrahj echoed this when she told me about helping a friend select brand colors for a new therapy and wellness practice: “What are you trying to make people feel when they walk away from your brand?”
Her friend wanted people to feel “safe and grounded.” She liked orange, but instead of choosing something like the bright HubSpot orange, they went with a more subdued terracotta hue.
Alex Cristache, Director of Digital Design at CurbCutOS, uses the social media platform X for his #MindfulPalettes series. He’ll suggest a color palette and will often note whether it lends itself to a particular industry.
I was excited to find out how he uses traditional color theory to arrive at those conclusions.
“It doesn’t necessarily come from color theory,” he told me.
“It’s that gut feeling people have because we’re used to associating colors with certain things.”
Peter Donahue recommends using a perceptual color picker like OKLCH color picker and converter. It’s made with digital in mind, and will alert you if you pick a chroma, hue, or lightness that isn’t available on any devices.
Bonus: Playing with the chroma and hue graphs was the easiest way for me to visualize those characteristics.
The Meaning of Color
Along with varying visual impact, colors also carry different emotional symbolism.
The Colour Literacy Project says that “the way we respond to certain colors is profoundly impacted by both our individual experiences and our past history, as well as our culture.”
This list is a guide for many Western cultures, but if something doesn’t ring true for you — trust your gut.
- Red — typically associated with power, passion, or energy, and can help encourage action on your site
- Orange — joy and enthusiasm, making it a good choice for positive messaging
- Yellow — happiness and intellect, but be wary of overuse
- Green — often connected to growth or ambition, green can help give the sense that your brand is on the rise
- Blue — tranquility and confidence, depending on the shade — lighter shades provide a sense of peace, darker colors are more confident
- Purple — luxury or creativity, especially when used deliberately and sparingly on your site
- Black — power and mystery, and using this color can help create necessary negative space
- White — safety and innocence, making it a great choice to help streamline your site
“Color psychology varies widely between the Western world and the Eastern world,” notes Cristache, who’s based in Romania.
If your brand moves into other parts of the world, it’s a good idea to research how users will perceive particular colors. For example, while red typically symbolizes passion or power in the United States, it’s considered a color of mourning in South Africa.
And sometimes, entire color schemes are more or less palatable depending on the country and culture. Sukrahj tells me about working on a logo for an India-based company that wanted to use bright magenta and navy.
That combination of colors “doesn’t necessarily land in the U.S.,” she says, “the same way it would in India.” As with everything in marketing: Know your audience.
Let’s examine the seven color schemes in more detail.
1. Monochromatic
Monochromatic color schemes use a single color with varying shades and tints to produce a consistent look and feel.
Although it lacks color contrast, it’s often very clean and polished. It also allows you to easily change the darkness and lightness of your colors.
Monochromatic color schemes are often used for charts and graphs, where high contrast isn't necessary.
Check out all the monochromatic colors that fall under the red hue, a primary color.
2. Analogous
Analogous color schemes are formed by pairing one main color with the two colors directly next to it on the color wheel.
You can also add two more colors (found next to the two outside colors) if you want to use a five-color scheme instead of just three colors.
Analogous structures do not create themes with highly contrasting colors, so they're typically used to create a softer, less contrasting design.
For example, you could use an analogous structure to create a color scheme with autumn or spring colors.
This color scheme is great for warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) color palettes like the one below.
Analogous schemes are often used to design images rather than infographics or bar charts, as all of the elements blend nicely.
3. Complementary
You may have guessed it, but a complementary color scheme is based on two colors directly across from each other on the color wheel and the relevant tints of those colors.
The complementary color scheme provides the greatest amount of color contrast. Because of this, you should be careful about how you use complementary colors in a scheme.
It's best to use one color predominantly and use the second color as the accent color in your design. The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.
4. Split Complementary
A split complementary scheme includes one dominant color and the two colors directly adjacent to the dominant color's complement. This creates a more nuanced color palette while still retaining the benefits of contrasting colors.
The split complementary color scheme can be difficult to balance, because unlike analogous or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).
The positive and negative aspect of the split complementary color model is that you can use any two colors in the scheme and get great contrast ... but that also means it can be tricky to find the right balance between the colors.
As a result, you may end up playing around with this one to find the right combination of contrast.
Alex Cristache echoes the need to play with split complementary schemes, comparing it to programming music on a computer.
“If every drum hits at the perfect millisecond, it just doesn’t feel right. A true drummer will slightly lose a cadence or add a flourish somewhere.”
So don’t be afraid to adjust the scheme to get the color combination you want, even if it’s not perfectly aligned on the color wheel.
When working with a split complementary scheme, he says, “Don’t force the color.”
5. Triadic
Triadic color schemes offer highly contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed in lines around the color wheel.
Triad color schemes are useful for creating high contrast between each color in a design, but they can also seem overpowering if all of your colors are chosen from the same point in a line around the color wheel.
To subdue some of your colors in a triadic scheme, you can choose one dominant color and use the others sparingly, or simply subdue the other two colors by choosing a softer tint.
The triadic color scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.
6. Square
The square color scheme uses four colors equidistant from each other on the color wheel to create a square or diamond shape.
While this evenly spaced color scheme provides substantial contrast to your design, it’s a good idea to select one dominant color rather than trying to balance all four.
Square color schemes are great for creating interest across your web designs.
Not sure where to start? Pick your favorite color and work from there to see if this scheme suits your brand or website.
It’s also a good idea to try square schemes against both black and white backgrounds to find the best fit.
7. Rectangle
Also called the tetradic color scheme, the rectangle approach is similar to its square counterpart but offers a more subtle approach to color selection.
As you can see in the diagram above, while the blue and red shades are quite bold, the green and orange on the other side of the rectangle are more muted, making the bolder shades stand out.
No matter which color scheme you choose, keep in mind what your graphic needs.
If you need to create contrast, then choose a color scheme that gives you that.
On the other hand, if you just need to find the best “versions” of certain colors, then play around with the monochromatic color scheme to find the perfect shades and tints.
Remember, if you build a color scheme with five colors, you don’t have to use all five. Sometimes just choosing two colors from a color scheme looks much better than cramming all five colors together in one graphic.
Designer Alex Cristache uses the seven types of color schemes for his palettes — with a catch. “Once you’re comfortable with the rules — start bending them.”
Now that you’re familiar with color scheme types, let’s take a look at some in the wild.
Examples of Color Schemes
1. Canva
Type: Monochromatic
The use of blues and purples make this monochromatic blueberry-inspired template stand out. Each shade builds on the next and provides ample contrast despite remaining within the same color family.
2. Newfoundland and Labrador Tourism
Type: Triadic
As we mentioned earlier, nature is a great way to get inspiration for your color palette. Why? Because mother nature already has it figured out. Newfoundland and Labrador Tourism took advantage of these triadic shades to showcase the region’s natural beauty.
3. Your Daye
Type: Analogous
Eco-friendly women’s health company Your Daye uses a blend of pastels and earthy tones for its analogous color scheme. The effect is soothing and pleasing to the eye.
Still want more inspiration? We got you. Here are 25 logo color schemes, along with tips from HubSpot’s brand team.
1. Leverage natural inspiration.
Once your site operations are solid, it’s time to start selecting colors.
Not sure what looks good? Take a look outside. Nature is the best example of colors that complement each other — think green stems and bright blooms of flowering plants, azure skies, and white clouds.
Pulling context from natural colors and combinations is a great way to start building color schemes.
2. Set a mood for your color scheme.
With a few color choices in mind, consider the mood you want your color scheme to set.
If passion and energy are your priorities, lean toward red or brighter yellows. If you’re creating a feeling of peace or tranquility, trend toward lighter blues and greens.
It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with color.
3. Consider color context.
Consider how colors are perceived in contrast.
In the image below, the middle of each circle is the same size, shape, and color. The only thing that changes is the background color.
Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes based on one color change.
This is because we perceive two-color combinations differently. So, when you're choosing colors for your graphic designs, think about how much contrast you want throughout the design.
For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not.
You'd likely want a contrast between your bars and the background itself, since you want your viewers to focus on the bars, not the background.
4. Refer to your color wheel.
Next, consider your color wheel and the schemes mentioned above. Select a few different color combinations using schemes such as monochrome, complementary, and triad to see what stands out.
Here, the goal isn’t to find exactly the right colors on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.
You may also find that some of your schemes look good in theory but don’t work with your site design. This is part of the process — trial and error will help you find the color palette that highlights your content and improves the user experience.
5. Draft multiple designs.
Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.
Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often looks different on digital screens than on physical color wheels. What seemed like a perfect complement or an ideal color pop may end up looking drab or dated.
Don’t be afraid to draft, review, draft again, and throw out what doesn’t work — color, like website creation, is constantly evolving.
Cristache, who’s been working in digital design for 20 years, adds, “The more you work with color, the better you get. There’s no other way around it.”
Pro tip: Use HubSpot's Brand Kit Generator to help. You can generate a color palette for your business, natch. You can also generate free logo designs, favicons and social media icons, and other brand elements.
How to Use Color Palettes
While color schemes provide a framework for working with different colors, you’ll still need to use a color palette — the colors you will select to use for your project.
If you’re stumped about what colors to use, consider using HubSpot’s palette generator to get your creativity flowing.
Here are some best practices to make the most out of your color palette:
1. Work in grayscale.
This may sound counterintuitive, but starting with black and white can help you see exactly how much contrast exists in your design.
Before you add color, lay out elements like text, CTAs, illustrations, photos, and any other design features. The way your design looks in grayscale will determine how well it looks in color.
Without enough light-and-dark contrast, your design will be harder to view, leaving your audience with a less-than-satisfactory user experience. Low-contrast designs are inaccessible for those with vision impairments.
2. Use the 60-30-10 rule.
Often used in home design, the 60-30-10 rule is also useful for website or app design.
- 60% primary or main color
- 30% secondary colors
- 10% accent colors
While you’re not limited to using just three colors, this framework will provide balance and ensure your colors work together seamlessly.
Cristache says, “You cannot work with four accent colors at the same time. Marketing material usually gives you very limited space, right? Be very intentional about how and where you use colors.”
3. Experiment with your palette.
Once you’ve selected colors, experiment to discover which combinations work better together. Consider how copy or type looks on top of your main color (60% is typically used as the background color).
Try not to use your main colors for buttons since you’re already using it everywhere else. Consider one of your accent colors instead.
4. Get feedback or conduct A/B testing.
So you’ve finished your draft. Now it’s time to test it. Before sending your design to market, you’ll want to test how users interact with it. What may look good to you, may be difficult to read for others.
Some things to consider when asking for feedback:
- Are the CTAs generating attention?
- Are the colors you chose distracting?
- Is there enough color contrast?
- Is the copy legible?
Getting another set of eyes on your design will help you spot errors or inconsistencies you may have missed in the creation process. Take their feedback in stride and make adjustments where needed.
Put simply? Practice makes perfect. The more you play with color and practice design, the better you get. No one creates a masterpiece the first time around.
Color Tools
There‘s been a lot of theory and practical information to help you understand which colors go best together and why. But when it comes down to choosing colors, it’s always a great idea to have tools that help you work quickly and easily.
Alex Cristache also suggests paying attention to how color is used on other websites.
“Learn from the failures of others before you fail yourself — because a lot of people have failed, and they’re all over the internet. And that’s a really good learning structure.”
There are a number of other tools to help you find and choose colors for your designs.
OKLCH Color Picker & Converter
If you want to experiment with perceptual color models, OKLCH is an excellent starting point. Just playing with the graphs of color characteristics (like chroma and hue) is a huge help in understanding some of the more complex relationships we’ve talked about here.
Khroma
Khroma is an AI color palette tool trained to your specific tastes.
You begin by selecting 50 (!) colors that you like — it says that such a large sample will keep the AI from suggesting colors you don’t like. You can search by hue, chroma (muted, rich, bright, deep), and even hex and RGB codes.
The tool returns several hundred two-color combinations. Here’s a selection of mine:
If you select the palette icon in the Khroma toolbar, it will create a four-color palette. Clicking on the information icon on each palette provides the hex and RGB codes as well as a bias percentage that measures how close the palette is to the colors you like.
Fun for days!
WhoCanUse.com
Accessibility is paramount when creating color palettes, especially for digital marketing materials. WhoCanUse.com isn’t a traditional color picker, but once you have some ideas for a color scheme, it makes solving for accessibility a breeze.
Input hex codes for background and text colors, and it will give you 14 ratings based on different types of colorblindness, vision loss, and even situational events like night shift mode and direct sunlight.
Adobe Color
Adobe Color (formerly Adobe Kuler) is a popular choice for creating color schemes.
This free online tool allows you to quickly build color schemes based on traditional color theory. Once you‘ve chosen the colors in the scheme you’d like, you can copy and paste the hex or RGB codes into the program you're using.
It also features hundreds of premade color schemes to explore and use in your own designs. If you're an Adobe user, you can easily save your themes to your account.
Illustrator Color Guide
“I spend a lot of time in Adobe Illustrator, and one of my most-used features is the color guide,” says former HubSpotter Bethany Cartwright.
The color guide automatically generates a five-color scheme based on one color of your choice. It will also give you a range of tints and shades for each color in the scheme.
If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you've chosen a complementary color scheme with blue as the main color, switching it to red will make the complementary color change from orange to green.
Like Adobe Color, Illustrator’s color guide has preset modes to choose the color scheme you want. This helps you pick the right color scheme style within the program you're already using.
After you've created your color scheme, you can save it in the “Color Themes” module to use throughout your project or in the future.
Preset Color Guides
If you‘re not an Adobe user, you’ve probably used Microsoft Office products at least once. All Office products have preset colors you can use to create color schemes. PowerPoint also has color scheme presets that you can use to draw inspiration for your designs.
Where the color schemes are located in PowerPoint depends on which version you use, but once you find the color themes of your document, you can open up the preferences and locate the RGB and hex codes for the colors used.
You can then copy and paste those codes into the program you're using for your design work.
Finding the Right Color Scheme
There's a lot of theory in this post — and some of it is contradictory.
But when it comes to choosing colors, understanding various color theories can do wonders for your design know-how. It can make creating branded visuals easy, especially when using design templates where you can customize colors.
from Marketing https://blog.hubspot.com/marketing/color-theory-design
When I sat down at my laptop to update this article, I thought I had at least a fifth-grader’s grasp of color wheels.
I certainly didn’t expect to uncover a completely contradictory view of color theory. Nor did I expect this new theory to lead me down an existential rabbit hole and question everything I thought I knew about color.
So let’s take a journey through color theory, both traditional and perceptual (remember that word), with a marketer’s eye toward harmonious color schemes, accessible UX, and eye-catching visuals.
We'll cover the following topics:
- Color Theory and Marketing
- What is color theory?
- Why is color theory important in web design?
- Color Theory 101: Traditional Color Theory
- Additive & Subtractive Color Theory
- Color Theory 201: The Theory of Color Perception
- The Meaning of Color
- What are the seven types of color schemes?
- Examples of Color Schemes
- How to Choose a Color Scheme
- How to Use Color Palettes
- Color Tools
Color Theory and Marketing
Is a picture still worth a thousand words if its color scheme makes you queasy?
We all know that infographics, charts, graphs, and animated GIFs can attract and keep an audience’s attention — but not if you pair neon green with khaki (look up hex codes #02ff00 and #d2c08e if you want proof. Don’t say I didn’t warn you.)
A working knowledge of color theory and design can help keep readers’ eyes on your content.
We’ll start with traditional color theory, and then we’ll turn everything inside out and explore another way of approaching color and accessibility.
What is color theory?
Let’s start with what it isn’t: Color theory is not a fixed, monolithic body of knowledge.
I’ll use the term “traditional color theory” to refer to the common guidelines and rules that are rooted in the red-yellow-blue model, and also to distinguish it from perception color theory (that word again!).
Those are most relevant to the modern marketer, but color theory has fascinated philosophers, artists, and scientists for many centuries.
Aristotle wrote about color theory around 330 BCE, and the Arab scientist Ibn al-Haytham, the father of modern optics, made significant contributions to color theory in the 9th century, during the Islamic Golden Age.
Traditional color theory is the basis for the primary rules and guidelines that surround color and its use in creating aesthetically pleasing visuals.
Understanding these basics can, according to former HubSpotter Bethany Cartwright, give you a logical structure to create and use color palettes more strategically. The results will let you deliberately evoke a particular emotion, vibe, or aesthetic — essentials for good marketing.
There are many tools to help marketers — even those of us who daydreamed through art class — create compelling visuals. But graphic design requires a little more background knowledge of design principles.
Take selecting the right color combination, for instance. It might seem easy at first, but when you‘re staring down a color wheel, you’re going to wish you had a little more information. In fact, brands of all sizes use color psychology to learn how color influences decision-making and affects design.
Understanding how colors work together, the impact they can have on mood and emotion, and how they change the look and feel of your website is critical if you want to stand out from the crowd — for the right reasons.
Whether your goal is more effective CTAs, higher sales conversions, or just raising your marketing game, the right color choice can highlight specific sections of your website, make it easier for users to navigate, or give them a sense of familiarity from the moment they click through.
But it’s not enough to simply select colors and hope for the best — color theories, moods and schemes, finding the right HTML color codes, and identifying web-accessible colors for products and websites are key to your success.
Read on for our guide to traditional color theory, perception color theory, color wheels, and color schemes for your site.
Color Theory 101: Traditional Color Theory
Let's go back to high school art class for the basics of traditional color theory, starting with primary, secondary, and tertiary colors.
What are primary colors?
Primary colors can’t be created by combining two or more colors. Cartwright compares them to prime numbers, which can't be created by multiplying two numbers.
There are three primary colors in the traditional color system:
- Red
- Yellow
- Blue
“Think of primary colors as your parent colors, anchoring your design in a general color scheme,” says Cartwright. Any one — or a combination — of these colors can give your brand guardrails when you explore other shades, tones, and tints (we'll talk about those in just a minute).
“When designing or even painting with primary colors, don‘t feel restricted to just the three primary colors listed above,” says Cartwright. “Orange isn’t a primary color, for example, but brands can certainly use orange as their dominant color (as we at HubSpot know quite well).”
Knowing which primary colors create orange is your ticket to identifying colors that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of color ...
What are secondary colors?
Secondary colors are the colors that are formed by combining any two of the three primary colors listed above. In the traditional color theory model above, you can see how each secondary color is supported by two of the three primary colors.
The three secondary colors are orange, purple, and green. You can create each one using two of the three primary colors. Here are the general rules of secondary color creation:
- Red + Yellow = Orange
- Blue + Red = Purple
- Yellow + Blue = Green
Keep in mind that the color mixtures above only work if you use the purest form of each primary color.
This pure form is known as a color‘s hue, and you’ll see how these hues compare to the variants underneath each color in the color wheel below.
What are tertiary colors?
Tertiary colors are created when you mix a primary color with a secondary color.
“From here,” Bethany Cartwright says, “color gets a little more complicated.”
“If you want to learn how the experts choose color in their design, you've got to understand the other components of color.”
“The most important component of tertiary colors is that not every primary color can match with a secondary color to create a tertiary color,” says Cartwright.
For example, red can‘t mix in harmony with green, and blue can’t mix in harmony with orange — both mixtures would result in a slightly brown color (unless, of course, that‘s what you’re looking for).
Instead, tertiary colors are created by mixing a primary color with the secondary color next to it on the traditional color wheel below. There are six tertiary colors in this model:
- Red + Purple = Red-Purple (magenta)
- Red + Orange = Red-Orange (vermillion)
- Blue + Purple = Blue-Purple (violet)
- Blue + Green = Blue-Green (teal)
- Yellow + Orange = Yellow-Orange (amber)
- Yellow + Green = Yellow-Green (chartreuse)
Designers use a color wheel to pick the best and most compatible colors to ensure the combinations achieve the desired visual effect.
The Color Wheel
Now that we’ve identified the 12 main colors in the traditional color wheel, let’s get real: Choosing color combinations, especially on a computer, involves a much wider range than a dozen basic colors.
The color wheel is a circle graph that charts each primary, secondary, and tertiary color, as well as their respective hues, tints, tones, and shades.
Isaac Newton — the same one whose head was apocryphally hit by an apple as he lounged under a tree — is widely considered the first person to develop a color theory based on this color wheel.
And even in 1704, the primary colors were disputed. Whereas Newton (red, green, blue) studied pigments in a lab, the German writer Johann Wolfgang von Goethe (yellow, blue) relied on perception and experience.
Using a traditional color wheel helps you choose color schemes by illustrating the relationships between each color on a rainbow scale (red, orange, yellow, green, blue, indigo, violet — ROY G BIV).
When choosing colors for a color scheme, the color wheel gives you opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors.
These mixes create the color variants described below:
Hue
“Hue” is what we usually mean when we say the word “color.” All of the primary and secondary colors, for instance, are hues.
Hue identifies the color family — like red, green, or blue — but you need more information to identify a specific color. For instance, sky blue, midnight blue, cornflower blue, and royal blue can’t all be simply described as “blue.”
Hues are important to remember when combining two primary colors to create a secondary color. “If you don‘t use the hues of the two primary colors you’re mixing, you won't generate the hue of the secondary color,” Cartwright says.
This is because a hue has the fewest other colors inside it. By mixing two primary colors that carry other tints, tones, and shades inside them, you're technically adding more than two colors to the mixture, making your final color dependent on the compatibility of more than two colors.
If you mixed the hues of red and blue, for instance, you‘d get purple, right? But mix a tint of red with the hue of blue, and you’ll get a slightly tinted purple in return.
The term “shade” often refers to light and dark versions of the same hue. But a shade is technically the color that you get from adding black to any given hue. The various shades just refer to how much black you're adding.
Tint
A tint is the opposite of a shade, but people don‘t often distinguish between a color’s shade and its tint. Adding white to a color can give you a different tint. So, a color can have a range of both shades and tints.
Tone (or Saturation)
You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but “saturation” is more common in digital design. “Tone” will be used more often for painting.
Chroma
Chroma describes how vivid or muted a color appears. The Colour Literacy Project notes that “‘colorfulness’ is often used to describe the vividness or chroma in everyday language.”
Color theory educator Peter Donahue explains chroma as “a measure of how different a color appears from a gray of the same lightness.”
With the basics covered, let's dive into something a little more complicated — additive and subtractive color theory.
Additive & Subtractive Color Theory
If you‘ve played around with color on any computer program, you’ve probably seen a module that listed RGB or CMYK colors with some numbers next to the letters.
Ever wondered what those letters mean?
CMYK
CMYK stands for cyan, magenta, yellow, and key (black). Those also happen to be the colors listed on your ink cartridges for your printer. That's no coincidence.
CMYK is the subtractive color model, so called because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black.
Think about printing on a piece of paper. When you first put a sheet in the printer, you‘re typically printing on a white piece of paper. By adding color, you’re blocking the white wavelengths from getting through.
Then, let‘s say you were to print something else over that printed piece of paper. You’ll notice the areas that have been printed twice will have colors closer to black.
“I find it easier to think about CMYK in terms of its corresponding numbers,” says Cartwright. “CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with black. But, if all four colors equal 0, you end up with true white.”
RGB
RGB color models, on the other hand, are designed for electronic displays like computers.
RGB stands for red, green, and blue, and it’s based on the additive color model of light waves.
This means that the more color you add, the closer you get to white.
“For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255,” says Cartwright.
When you're creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice, you can use either one to find colors, and the other color model will adjust accordingly.
However, many web programs will only give you the RGB values or a hex code (the code assigned to color for CSS and HTML). So, if you're designing digital images for web design, RGB is probably your best bet for choosing colors.
You can always convert the design to CMYK and make adjustments should you ever need it for printed materials.
Color Theory 201: The Theory of Color Perception
What if everything we thought we knew about color was wrong — or at least outdated?
When I sat down with Peter Donahue, an artist and color theory educator, to talk about color perception theory, I quickly realized that it runs contrary to almost everything else in this article.
That doesn’t mean you have to let go of everything you thought you knew about color theory — and in fact, if you’re using common graphic design tools, you’re likely working in RGB or CMYK color spaces, so it’s useful to understand how they work.
But — as befitting a subject that has piqued the world’s greatest minds for two millennia — it’s complicated.
To help me understand it, Donahue starts with color meanings or associations. “It’s not the hue that we respond to on an unconscious level,” he tells me.
Even people who can’t see color know that red is associated with passion (in some cultures). It “kind of proves that [color associations or meanings] have nothing to do with the color itself, but the idea of color.”
Perceiving Color
Donahue says that a big part of what he does as an educator is to “unteach people the red-yellow-blue model” and instead use perception science to find color harmonies.
“Perceiving” means that color isn’t a physical property — it’s a complex interaction involving light wavelengths and our brains. It’s something we experience, not something we observe.
Put another way: I perceive my tabby cat as orange because of how light hits his fur and how my eyes and brain interpret that information. He’s not intrinsically orange, because “orange” isn’t a property that exists out in the world.
If your brain is beginning to melt: Welcome. Color is all in your mind, literally. Perceiving color is all about light, rods and cones, and gray matter.
I did an experiment from the Colour Literacy Project to make the abstract a little more tangible.
All four of these circles were originally white. I picked a color — the nice, bright HubSpot orange (#FF5C35, if you’re playing along at home) — and filled it in the top left circle. I stared at the black dot inside the orange circle for 30 seconds, and then looked at the white circle below it.
When I stared at the white circle, a pale blue emerged. I found the closest match and used it to fill in the top right circle, which you can see above.
But that pale blue only existed because of the way that light activated my entire visual system and how my brain interpreted that data — it’s not something I could take a photo of. Color exists inside my brain, not outside of it.
Using Perceptual Color Theory
Let’s look at how you might use the perceptual model to select, say, new brand colors.
The perceptual model isn’t concerned with what Peter Donahue calls “the traditional hue-first approach,” which he says “offers no guidance in terms of how to manage value or chroma.”
(Chroma, remember, refers to how vivid or muted a color is.)
Adhering to a hue-first approach can have real-world implications, particularly with respect to UX and accessibility.
I asked Donahue what advice he’d give to somebody new to color theory, and he said, “What I really wish [web designers] knew was that traditional color theory actually contributes to inequality when it comes to UX design and accessibility issues.”
A color wheel based on perception science. On a traditional color wheel, yellow would be opposite purple, green opposite red, and so forth. Donahue, who made the colordisk above, says that the hue intervals on the traditional color wheel aren’t useful in design and accessibility.
That is, because of the way the hues are spaced on a traditional color wheel, you could select colors opposite each other, thinking that they’re complementary, when in fact they could result in poor contrast or muddied visuals.
“The interval of the hues you’re choosing” — that is, how far apart they are on the color wheel — “is the traditional approach.” But Donahue says that “the more recent studies and ideas are all saying [that approach] is completely bogus.”
The idea that these three colors “are inherently harmonious is just false,” he tells me. “Because if you choose those three hues and represent them all as very vivid, chromatic colors, they’re actually very disruptive.”
I tested this — albeit crudely — starting with Canva’s (traditional) color wheel and a cheery red, represented by hex code #e51a25. I then selected a triadic color combination.
This gave me a green (#25E51A) and blue (#1A25E5). Already, the combination is not giving “brand color” vibes.
I put each of those hex codes into the OKLCH color picker and converter and cranked up the chroma to make them as vivid as the tool allowed. It returned a color palette best described as “headache.”
Pass the Advil.
If you’re picking brand colors, Donahue says to ask yourself what you’re aiming for, like a certain mood or emotion. “Am I going to choose all colors that are deep, meaning they are low in value, but still saturated?”
My best approximation of a triadic color scheme using Donahue’s Colordisk above. Much better.
“Rather than hue, think about the other dimensions, like chroma and value. Plan your color schemes according to these intuitive responses that even somebody who hasn’t studied color theory will be able to respond to.”
“You’ll be much more effective at communicating that mood or emotion than if you were trying to choose certain hues.”
My colleague Ramona Sukrahj echoed this when she told me about helping a friend select brand colors for a new therapy and wellness practice: “What are you trying to make people feel when they walk away from your brand?”
Her friend wanted people to feel “safe and grounded.” She liked orange, but instead of choosing something like the bright HubSpot orange, they went with a more subdued terracotta hue.
Alex Cristache, Director of Digital Design at CurbCutOS, uses the social media platform X for his #MindfulPalettes series. He’ll suggest a color palette and will often note whether it lends itself to a particular industry.
I was excited to find out how he uses traditional color theory to arrive at those conclusions.
“It doesn’t necessarily come from color theory,” he told me.
“It’s that gut feeling people have because we’re used to associating colors with certain things.”
Peter Donahue recommends using a perceptual color picker like OKLCH color picker and converter. It’s made with digital in mind, and will alert you if you pick a chroma, hue, or lightness that isn’t available on any devices.
Bonus: Playing with the chroma and hue graphs was the easiest way for me to visualize those characteristics.
The Meaning of Color
Along with varying visual impact, colors also carry different emotional symbolism.
The Colour Literacy Project says that “the way we respond to certain colors is profoundly impacted by both our individual experiences and our past history, as well as our culture.”
This list is a guide for many Western cultures, but if something doesn’t ring true for you — trust your gut.
- Red — typically associated with power, passion, or energy, and can help encourage action on your site
- Orange — joy and enthusiasm, making it a good choice for positive messaging
- Yellow — happiness and intellect, but be wary of overuse
- Green — often connected to growth or ambition, green can help give the sense that your brand is on the rise
- Blue — tranquility and confidence, depending on the shade — lighter shades provide a sense of peace, darker colors are more confident
- Purple — luxury or creativity, especially when used deliberately and sparingly on your site
- Black — power and mystery, and using this color can help create necessary negative space
- White — safety and innocence, making it a great choice to help streamline your site
“Color psychology varies widely between the Western world and the Eastern world,” notes Cristache, who’s based in Romania.
If your brand moves into other parts of the world, it’s a good idea to research how users will perceive particular colors. For example, while red typically symbolizes passion or power in the United States, it’s considered a color of mourning in South Africa.
And sometimes, entire color schemes are more or less palatable depending on the country and culture. Sukrahj tells me about working on a logo for an India-based company that wanted to use bright magenta and navy.
That combination of colors “doesn’t necessarily land in the U.S.,” she says, “the same way it would in India.” As with everything in marketing: Know your audience.
Let’s examine the seven color schemes in more detail.
1. Monochromatic
Monochromatic color schemes use a single color with varying shades and tints to produce a consistent look and feel.
Although it lacks color contrast, it’s often very clean and polished. It also allows you to easily change the darkness and lightness of your colors.
Monochromatic color schemes are often used for charts and graphs, where high contrast isn't necessary.
Check out all the monochromatic colors that fall under the red hue, a primary color.
2. Analogous
Analogous color schemes are formed by pairing one main color with the two colors directly next to it on the color wheel.
You can also add two more colors (found next to the two outside colors) if you want to use a five-color scheme instead of just three colors.
Analogous structures do not create themes with highly contrasting colors, so they're typically used to create a softer, less contrasting design.
For example, you could use an analogous structure to create a color scheme with autumn or spring colors.
This color scheme is great for warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) color palettes like the one below.
Analogous schemes are often used to design images rather than infographics or bar charts, as all of the elements blend nicely.
3. Complementary
You may have guessed it, but a complementary color scheme is based on two colors directly across from each other on the color wheel and the relevant tints of those colors.
The complementary color scheme provides the greatest amount of color contrast. Because of this, you should be careful about how you use complementary colors in a scheme.
It's best to use one color predominantly and use the second color as the accent color in your design. The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.
4. Split Complementary
A split complementary scheme includes one dominant color and the two colors directly adjacent to the dominant color's complement. This creates a more nuanced color palette while still retaining the benefits of contrasting colors.
The split complementary color scheme can be difficult to balance, because unlike analogous or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).
The positive and negative aspect of the split complementary color model is that you can use any two colors in the scheme and get great contrast ... but that also means it can be tricky to find the right balance between the colors.
As a result, you may end up playing around with this one to find the right combination of contrast.
Alex Cristache echoes the need to play with split complementary schemes, comparing it to programming music on a computer.
“If every drum hits at the perfect millisecond, it just doesn’t feel right. A true drummer will slightly lose a cadence or add a flourish somewhere.”
So don’t be afraid to adjust the scheme to get the color combination you want, even if it’s not perfectly aligned on the color wheel.
When working with a split complementary scheme, he says, “Don’t force the color.”
5. Triadic
Triadic color schemes offer highly contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed in lines around the color wheel.
Triad color schemes are useful for creating high contrast between each color in a design, but they can also seem overpowering if all of your colors are chosen from the same point in a line around the color wheel.
To subdue some of your colors in a triadic scheme, you can choose one dominant color and use the others sparingly, or simply subdue the other two colors by choosing a softer tint.
The triadic color scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.
6. Square
The square color scheme uses four colors equidistant from each other on the color wheel to create a square or diamond shape.
While this evenly spaced color scheme provides substantial contrast to your design, it’s a good idea to select one dominant color rather than trying to balance all four.
Square color schemes are great for creating interest across your web designs.
Not sure where to start? Pick your favorite color and work from there to see if this scheme suits your brand or website.
It’s also a good idea to try square schemes against both black and white backgrounds to find the best fit.
7. Rectangle
Also called the tetradic color scheme, the rectangle approach is similar to its square counterpart but offers a more subtle approach to color selection.
As you can see in the diagram above, while the blue and red shades are quite bold, the green and orange on the other side of the rectangle are more muted, making the bolder shades stand out.
No matter which color scheme you choose, keep in mind what your graphic needs.
If you need to create contrast, then choose a color scheme that gives you that.
On the other hand, if you just need to find the best “versions” of certain colors, then play around with the monochromatic color scheme to find the perfect shades and tints.
Remember, if you build a color scheme with five colors, you don’t have to use all five. Sometimes just choosing two colors from a color scheme looks much better than cramming all five colors together in one graphic.
Designer Alex Cristache uses the seven types of color schemes for his palettes — with a catch. “Once you’re comfortable with the rules — start bending them.”
Now that you’re familiar with color scheme types, let’s take a look at some in the wild.
Examples of Color Schemes
1. Canva
Type: Monochromatic
The use of blues and purples make this monochromatic blueberry-inspired template stand out. Each shade builds on the next and provides ample contrast despite remaining within the same color family.
2. Newfoundland and Labrador Tourism
Type: Triadic
As we mentioned earlier, nature is a great way to get inspiration for your color palette. Why? Because mother nature already has it figured out. Newfoundland and Labrador Tourism took advantage of these triadic shades to showcase the region’s natural beauty.
3. Your Daye
Type: Analogous
Eco-friendly women’s health company Your Daye uses a blend of pastels and earthy tones for its analogous color scheme. The effect is soothing and pleasing to the eye.
Still want more inspiration? We got you. Here are 25 logo color schemes, along with tips from HubSpot’s brand team.
1. Leverage natural inspiration.
Once your site operations are solid, it’s time to start selecting colors.
Not sure what looks good? Take a look outside. Nature is the best example of colors that complement each other — think green stems and bright blooms of flowering plants, azure skies, and white clouds.
Pulling context from natural colors and combinations is a great way to start building color schemes.
2. Set a mood for your color scheme.
With a few color choices in mind, consider the mood you want your color scheme to set.
If passion and energy are your priorities, lean toward red or brighter yellows. If you’re creating a feeling of peace or tranquility, trend toward lighter blues and greens.
It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with color.
3. Consider color context.
Consider how colors are perceived in contrast.
In the image below, the middle of each circle is the same size, shape, and color. The only thing that changes is the background color.
Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes based on one color change.
This is because we perceive two-color combinations differently. So, when you're choosing colors for your graphic designs, think about how much contrast you want throughout the design.
For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not.
You'd likely want a contrast between your bars and the background itself, since you want your viewers to focus on the bars, not the background.
4. Refer to your color wheel.
Next, consider your color wheel and the schemes mentioned above. Select a few different color combinations using schemes such as monochrome, complementary, and triad to see what stands out.
Here, the goal isn’t to find exactly the right colors on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.
You may also find that some of your schemes look good in theory but don’t work with your site design. This is part of the process — trial and error will help you find the color palette that highlights your content and improves the user experience.
5. Draft multiple designs.
Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.
Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often looks different on digital screens than on physical color wheels. What seemed like a perfect complement or an ideal color pop may end up looking drab or dated.
Don’t be afraid to draft, review, draft again, and throw out what doesn’t work — color, like website creation, is constantly evolving.
Cristache, who’s been working in digital design for 20 years, adds, “The more you work with color, the better you get. There’s no other way around it.”
Pro tip: Use HubSpot's Brand Kit Generator to help. You can generate a color palette for your business, natch. You can also generate free logo designs, favicons and social media icons, and other brand elements.
How to Use Color Palettes
While color schemes provide a framework for working with different colors, you’ll still need to use a color palette — the colors you will select to use for your project.
If you’re stumped about what colors to use, consider using HubSpot’s palette generator to get your creativity flowing.
Here are some best practices to make the most out of your color palette:
1. Work in grayscale.
This may sound counterintuitive, but starting with black and white can help you see exactly how much contrast exists in your design.
Before you add color, lay out elements like text, CTAs, illustrations, photos, and any other design features. The way your design looks in grayscale will determine how well it looks in color.
Without enough light-and-dark contrast, your design will be harder to view, leaving your audience with a less-than-satisfactory user experience. Low-contrast designs are inaccessible for those with vision impairments.
2. Use the 60-30-10 rule.
Often used in home design, the 60-30-10 rule is also useful for website or app design.
- 60% primary or main color
- 30% secondary colors
- 10% accent colors
While you’re not limited to using just three colors, this framework will provide balance and ensure your colors work together seamlessly.
Cristache says, “You cannot work with four accent colors at the same time. Marketing material usually gives you very limited space, right? Be very intentional about how and where you use colors.”
3. Experiment with your palette.
Once you’ve selected colors, experiment to discover which combinations work better together. Consider how copy or type looks on top of your main color (60% is typically used as the background color).
Try not to use your main colors for buttons since you’re already using it everywhere else. Consider one of your accent colors instead.
4. Get feedback or conduct A/B testing.
So you’ve finished your draft. Now it’s time to test it. Before sending your design to market, you’ll want to test how users interact with it. What may look good to you, may be difficult to read for others.
Some things to consider when asking for feedback:
- Are the CTAs generating attention?
- Are the colors you chose distracting?
- Is there enough color contrast?
- Is the copy legible?
Getting another set of eyes on your design will help you spot errors or inconsistencies you may have missed in the creation process. Take their feedback in stride and make adjustments where needed.
Put simply? Practice makes perfect. The more you play with color and practice design, the better you get. No one creates a masterpiece the first time around.
Color Tools
There‘s been a lot of theory and practical information to help you understand which colors go best together and why. But when it comes down to choosing colors, it’s always a great idea to have tools that help you work quickly and easily.
Alex Cristache also suggests paying attention to how color is used on other websites.
“Learn from the failures of others before you fail yourself — because a lot of people have failed, and they’re all over the internet. And that’s a really good learning structure.”
There are a number of other tools to help you find and choose colors for your designs.
OKLCH Color Picker & Converter
If you want to experiment with perceptual color models, OKLCH is an excellent starting point. Just playing with the graphs of color characteristics (like chroma and hue) is a huge help in understanding some of the more complex relationships we’ve talked about here.
Khroma
Khroma is an AI color palette tool trained to your specific tastes.
You begin by selecting 50 (!) colors that you like — it says that such a large sample will keep the AI from suggesting colors you don’t like. You can search by hue, chroma (muted, rich, bright, deep), and even hex and RGB codes.
The tool returns several hundred two-color combinations. Here’s a selection of mine:
If you select the palette icon in the Khroma toolbar, it will create a four-color palette. Clicking on the information icon on each palette provides the hex and RGB codes as well as a bias percentage that measures how close the palette is to the colors you like.
Fun for days!
WhoCanUse.com
Accessibility is paramount when creating color palettes, especially for digital marketing materials. WhoCanUse.com isn’t a traditional color picker, but once you have some ideas for a color scheme, it makes solving for accessibility a breeze.
Input hex codes for background and text colors, and it will give you 14 ratings based on different types of colorblindness, vision loss, and even situational events like night shift mode and direct sunlight.
Adobe Color
Adobe Color (formerly Adobe Kuler) is a popular choice for creating color schemes.
This free online tool allows you to quickly build color schemes based on traditional color theory. Once you‘ve chosen the colors in the scheme you’d like, you can copy and paste the hex or RGB codes into the program you're using.
It also features hundreds of premade color schemes to explore and use in your own designs. If you're an Adobe user, you can easily save your themes to your account.
Illustrator Color Guide
“I spend a lot of time in Adobe Illustrator, and one of my most-used features is the color guide,” says former HubSpotter Bethany Cartwright.
The color guide automatically generates a five-color scheme based on one color of your choice. It will also give you a range of tints and shades for each color in the scheme.
If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you've chosen a complementary color scheme with blue as the main color, switching it to red will make the complementary color change from orange to green.
Like Adobe Color, Illustrator’s color guide has preset modes to choose the color scheme you want. This helps you pick the right color scheme style within the program you're already using.
After you've created your color scheme, you can save it in the “Color Themes” module to use throughout your project or in the future.
Preset Color Guides
If you‘re not an Adobe user, you’ve probably used Microsoft Office products at least once. All Office products have preset colors you can use to create color schemes. PowerPoint also has color scheme presets that you can use to draw inspiration for your designs.
Where the color schemes are located in PowerPoint depends on which version you use, but once you find the color themes of your document, you can open up the preferences and locate the RGB and hex codes for the colors used.
You can then copy and paste those codes into the program you're using for your design work.
Finding the Right Color Scheme
There's a lot of theory in this post — and some of it is contradictory.
But when it comes to choosing colors, understanding various color theories can do wonders for your design know-how. It can make creating branded visuals easy, especially when using design templates where you can customize colors.
via Perfecte news Non connection
No hay comentarios:
Publicar un comentario