I know what you might be thinking : “ I do n’t know how to design amazing visuals. I ‘m not creative. ”
Hi. I ‘m Bethany, and I will be the beginning to tell you that I ‘m not naturally aesthetic. And yet, I found a military capability in data visual image at HubSpot, where I ‘ve spent most of my days creating infographics and other visuals for blog posts .
so, while I would n’t say I ‘m naturally aesthetic, I have learned how to create compelling ocular content. therefore can you .
And you can do this by learning color theory. Consider this your introductory course, and we ‘ll be covering the pursuit topics :
- What is color theory?
- Why is color theory important in web design?
- Color Theory 101
- Additive & Subtractive Color Theory
- The Meaning of Color
- What are the seven color schemes?
- How to Choose a Color Scheme
- Color Tools
- Finding the Right Color Scheme
What is color theory?
Color hypothesis is the basis for the elementary rules and guidelines that surround coloring material and its use in creating aesthetically pleasing visuals. By understanding color theory basics, you can begin to parse the coherent structure of tinge for yourself to create and use color palettes more strategically. The result means evoking a particular emotion, vibration, or aesthetic .
Why is color theory important in web design?
color is an significant aspect, if not the most crucial view of design, and can influence the meaning of text, how users move around a particular layout, and what they feel as they do so. By understanding color theory, you can be more designed in creating visuals that make an impact .
While there are many tools out there to help even the most inartistic of us to create compelling visuals, graphic design tasks require a little more background cognition on purpose principles .
Take selecting the right color combination, for example. It ‘s something that might seem easy at first base but when you ‘re staring down a color roulette wheel, you ‘re going to wish you had some information on what you ‘re looking at. Understanding how colors work together, the shock they can have on mood and emotion, and how they change the attend and feel of your web site is critical to help you stand out from the crowd — for the right reasons .
From effective CTAs to sales conversions and market efforts, the correctly color option can highlight specific sections of your web site, make it easier for users to navigate, or give them a sense of familiarity from the first moment they click through .
But it ’ s not adequate to just select colors and hope for the best — from color theory to moods and schemes, finding the right HTML color codes, and identifying web-accessible colors for products and websites, the more you know about using color, the better your chances are for success .
Read on for our interior designer ’ s lead to color hypothesis, color wheels, and color schemes for your locate .
Color Theory 101
Let ‘s first go back to high school art class to discuss the basics of semblance .
Remember hearing about elementary, junior-grade, and tertiary colors ? They ‘re pretty significant if you want to understand, well, everything else about color .
primary colors are those you ca n’t create by combining two or more early colors in concert. They ‘re a lot like prime numbers, which ca n’t be created by multiplying two other numbers together .
There are three primary coil colors :
think of chief colors as your parent colors, anchoring your design in a general color dodge. Any one or combination of these colors can give your brand guardrails when you move to explore early shades, tones, and tints ( we ‘ll talk about those in just a minute ) .
When designing or even painting with elementary colors, do n’t feel restricted to fair the three elementary colors listed above. Orange is n’t a primary color, for example, but brands can surely use orange as their dominant color ( as we at HubSpot know this quite well ) .
Knowing which primary colors create orange is your tag to identifying colors that might go well with orange — given the right shadow, tone, or shade. This brings us to our following type of tinge …
secondary colors are the colors that are formed by combining any two of the three primary colors listed above. Check out the color hypothesis model above — see how each secondary color is supported by two of the three primary colors ?
There are three secondary colors : orange, purple, and green. You can create each one using two of the three basal colors. here are the general rules of secondary color initiation :
- Red + Yellow = Orange
- Blue + Red = Purple
- Yellow + Blue = Green
Keep in mind that the color mixtures above only work if you use the purest phase of each primary coil color. This arrant form is known as a semblance ‘s hue, and you ‘ll see how these hues compare to the variants underneath each color in the color roulette wheel below .
third colors are created when you mix a primary color with a secondary color .
From here, color gets a little more complicate, and if you want to learn how the experts choose color in their design, you ‘ve got to first understand all the early components of color .
The most important part of third colors is that not every primary color can match with a secondary color to create a tertiary color. For model, crimson ca n’t mix in harmony with green, and amobarbital sodium ca n’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 ) .
alternatively, tertiary colors are created when a chief discolor mixes with a secondary color that comes next to it on the color wheel below. There are six third colors that fit this requirement :
- 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)
The Color Theory Wheel
Okay, great. thus now you know what the “ main ” colors are, but you and I both know that choosing color combinations, specially on a computer, involves a much wider range than 12 basic colors .
This is the drift behind the color roulette wheel, a set graph that charts each primary coil, secondary, and tertiary color — a well as their respective hues, tints, tones, and shades. Visualizing colors in this way helps you choose color schemes by showing you how each color relates to the color that comes adjacent to it on a rainbow color scale. ( As you probably know, the colors of a rainbow, in order, are red, orange, yellow, green, blue, indigo, and violet. )
When choosing colors for a color scheme, the color wheel gives you opportunities to create bright, lighter, softer, and blue colors by mixing blank, black, and gray with the original colors. These mixes create the color variants described below :
Hue is pretty much synonymous with what we actually mean when we said the password “ discolor. ” All of the chief and secondary colors, for example, are “ hues. ”
Hues are important to remember when combining two primary colors to create a secondary color. If you do n’t use the hues of the two elementary colors you ‘re mixing together, you wo n’t generate the hue of the junior-grade color. This is because a imbue 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 concluding color dependent on the compatibility of more than two colors .
If you were to mix the hues of crimson and blasphemous together, for case, you ‘d get empurpled, correct ? But mix a shade of red with the hue of amobarbital sodium, and you ‘ll get a slenderly tinted purple in refund .
You may recognize the term “ shade ” because it ‘s used quite frequently to refer to light and benighted versions of the same hue. But actually, a shade is technically the color that you get when you add black to any given hue. The diverse “ shades ” precisely refer to how a lot black you ‘re adding .
A shade is the diametric of a shade, but people do n’t frequently identify between a color ‘s nuance and a coloring material ‘s shade. You get a different shade when you add white to a color. then, a color can have a range of both shades and tints .
Tone (or Saturation)
You can besides add both white and black to a color to create a tone. Tone and saturation basically mean the like thing, but most people will use impregnation if they ‘re talking about colors being created for digital images. Tone will be used more much for painting .
With the basics covered, let ‘s dive into something a small more complicate — like additive and subtractive color theory .
Additive & Subtractive Color Theory
If you ‘ve always played around with discolor on any calculator plan, you ‘ve credibly seen a module that listed RGB or CMYK colors with some numbers next to the letters .
always wondered what those letters mean ?
CMYK stands for Cyan, Magenta, Yellow, Key ( Black ). Those besides happen to be the colors listed on your ink cartridges for your printer. That ‘s no coincidence .
CMYK is the subtractive color model. It ‘s called that because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the close you get to black. Confusing, correct ?
Think about printing on a piece of paper. When you first put a plane in the printer, you ‘re typically printing on a white musical composition of newspaper. By adding color, you ‘re blocking the white wavelengths from getting through .
then, let ‘s say you were to put that printed piece of paper back into the printer, and print something on it again. You ‘ll notice the areas that have been printed on twice will have colors closer to black .
I find it easier to think about CMYK in terms of its match numbers. 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 peer 0, you end up with true white .
RGB color models, on the early pass, are designed for electronic displays, including computers .
RGB stands for Red, Green, Blue, and is based on the additive color model of light waves. This means, the more semblance you add, the close you get to white. For computers, RGB is created using scales from 0 to 255. indeed, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255 .
When you ‘re creating color on a computer, your tinge faculty will normally 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 vane programs will only give you the RGB values or a HEX code ( the code assigned to color for CSS and HTML ). indeed, if you ‘re designing digital images or for network design, RGB is probably your best bet for choosing colors .
You can constantly convert the design to CMYK and make adjustments should you ever need it for print materials .
The Meaning of Color
Along with varying ocular impact, different colors besides carry different emotional symbolism .
- 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
Worth noting ? Different audiences may perceive colors differently. The meanings listed above are coarse for north american audiences, but if your brand moves into other parts of the populace, it ’ s a good theme to research how users will perceive particular colors. For model, while crimson typically symbolizes passion or world power in the United States, it ’ randomness considered a semblance of mourning in South Africa .
While it ’ s potential to create your web site using a combination of every color under the rainbow, chances are the final examination product won ’ triiodothyronine expression great. Thankfully, discolor experts and designers have identified seven coarse discolor schemes to help jumpstart your creative process .
What are the seven color schemes?
The seven major semblance schemes are monochromatic, analogous, complementary, rip complementary color, triadic, straight, and rectange ( or tetradic ) .
Let ’ s test each in more detail .
monochromatic discolor schemes use a single coloring material with varying shades and tints to produce a consistent search and feel. Although it lacks color contrast, it much ends up looking very clean and polished. It besides allows you to well change the darkness and lightsomeness of your colors .
monochromatic color schemes are much used for charts and graph when creating high contrast is n’t necessary .
Check out all the monochromatic colors that fall under the red hue, a primary semblance .
analogous color schemes are formed by pairing one independent color with the two colors directly next to it on the color bicycle. You can besides add two extra colors ( which are found next to the two outside colors ) if you want to use a five-color system rather of merely three colors .
analogous structures do not create themes with eminent contrast colors, so they ‘re typically used to create a softer, less contrasting purpose. For model, you could use an analogous social organization to create a color system with fall or leap colors .
This color outline is great for creating warm ( bolshevik, oranges, and yellows ) or cooler ( purples, blues, and greens ) color palettes like the one below .
analogous schemes are frequently used to design images quite than infographics or banish charts as all of the elements blend together nicely .
You may have guessed it, but a complemental discolor scheme is based on the use of two colors directly across from each other on the color wheel and relevant tints of those colors .
The complementary color color scheme provides the greatest come of discolor contrast. Because of this, you should be careful about how you use the complementary color colors in a schema .
It ‘s best to use one color predominantly and use the second color as accents in your design. The complemental color system is besides great for charts and graph. high contrast helps you highlight authoritative points and takeaways .
4. Split Complementary
A split complementary color schema includes one dominant tinge and the two colors directly adjacent to the dominant color ‘s complement. This creates a more nuanced semblance palette than a complementary color schema while however retaining the benefits of contrasting colors .
The separate complemental color outline can be difficult to balance because unlike analogous or monochromatic color schemes, the colors used all supply contrast ( like to the complementary scheme ) .
The positive and minus aspect of the separate complementary coloring material model is that you can use any two colors in the scheme and get great contrast … but that besides means it can besides be catchy to find the right balance between the colors. As a consequence, you may end up playing around with this one a piece more to find the right combination of line .
Triadic color schemes offer high contrasting discolor schemes while retaining the lapp tone. Triadic color schemes are created by choosing three colors that are evenly placed in lines around the color wheel .
Triad color schemes are utilitarian for creating high contrast between each color in a plan, but they can besides seem overpowering if all of your colors are chosen on the same point in a note around the color wheel .
To subdue some of your colors in a triadic dodge, you can choose one dominant semblance and use the others meagerly, or plainly subordinate the other two colors by choosing a softer shade .
The triadic color schema looks great in graphics like cake or pie charts because it offers the contrast you need to create comparisons .
The squarely color outline uses four colors equidistant from each early on the color wheel to create a square or diamond shape. While this evenly-spaced tinge scheme provides substantial contrast to your design, it ’ s a adept idea to select one dominant allele coloring material rather than trying to balance all four .
Square tinge schemes are great for creating pastime across your web designs. not certain where to start ? Pick your darling color and work from there to see if this system suits your stigmatize or web site. It ’ s besides a dependable estimate to try feather schemes against both black and white backgrounds to find the best fit .
besides called the tetradic color schema, the rectangle set about is similar to its square counterpart but offers a more insidious set about to color excerpt .
As you can see in the diagram above, while the blue and loss shades are quite bold, the green and orange on the other side of the rectangle are more muffle, in bend helping the bold shades stand out .
No matter which color system you choose, keep in mind what your graphic needs. If you need to create line, then choose a color dodge that gives you that. On the other pass, if you barely need to find the best “ versions ” of certain colors, then play around with the monochromatic semblance scheme to find the perfect shades and tints .
Remember, if you build a color scheme with five colors, that does n’t mean you have to use all five. sometimes just choosing two colors from a color schema looks much better than cramming all five colors in concert in one graphic .
How to Choose a Color Scheme
- Prioritize the user experience, first.Leverage natural inspiration.
- Set a mood for your color scheme.
- Consider color context.
- Refer to your color wheel.
- Use the 60-30-10 rule.
- Draft multiple designs.
1. Prioritize the user experience, first.
Before you add color to your web site, app, intersection, or box, get the basic design downpat in greyscale .
This lets you focus on what matters most : User experience. rather of focusing on the color scheme of your overall web site or the imbue of particular buttons or links, make sure everything works like it ’ s supposed to. Make certain links aren ’ thymine broken, product pages are up-to-date and e-mail opt-ins are ready to go .
here ’ mho why : even the best-looking web site or product with perfect color choice won ’ thymine be enough to keep visitors if they can ’ thyroxine find what they ’ re looking for .
2. Leverage natural inspiration.
once your locate operations are solid, it ’ s time to start selecting colors .
not sure what looks good ? Take a spirit outside. nature is the best model of colors that complement each other — from the green stems and bright blooms of flowering plants to azure skies and white clouds, you can ’ t go wrong pulling context from natural colors and combinations .
3. Set a mood for your color scheme.
With a few semblance choices in mind, consider the mood you want your color scheme to set. If passion and energy are your priorities, lean more toward red or bright yellows. If you ’ re looking to create a feel of peace or tranquillity, course toward lighter blues and greens .
It ’ mho besides worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling besides cluttered with color .
4. Consider color context.
It ’ mho besides deserving considering how colors are perceived in contrast .
In the visualize below, the middle of each of the circles is the lapp size, human body, and color. The alone thing that changes is the background color .
so far, the middle circles appear softer or brighter depending on the contrasting color behind it. You may evening notice drift or depth changes precisely based on one color change .
This is because the means in which we use two colors in concert changes how we perceive it. so, when you ‘re choosing colors for your graphic designs, think about how much contrast you want throughout the design .
For case, if you were creating a simple barroom chart, would you want a dark background with dark bars ? probably not. You ‘d most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background .
5. Refer to your color wheel.
future, consider your color bicycle and the schemes mentioned above. Select a few different color combinations using schemes such as monochromatic, complemental, and common chord to see what stands out .
here, the goal international relations and security network ’ thyroxine to find precisely the right colors on the first base try and create the perfect design, but preferably to get a sense of which dodge naturally resonates with your personal percept and the spirit of your locate .
You may besides find that schemes you select that look thoroughly in theory don ’ thymine make with your locate design. This is separate of the process — trial and mistake will help you find the color palette that both highlights your content and improves the drug user experience .
6. Use the 60-30-10 rule.
frequently used in home design, the 60-30-10 rule is besides utilitarian for web site or app design. The estimate here is to use three colors : A main color for 60 % of your design, a secondary color for 30 % of your design and an dialect color for the last 10 % .
While these aren ’ deoxythymidine monophosphate hard-and-fast numbers, they help give a sense of proportion and proportion to your site by providing a primary color with secondary coil and stress colors that all work in concert .
7. Draft multiple designs.
enlist and apply multiple color designs to your web site and see which one ( sulfur ) stand out. then, take a footfall back, wait a few days and check again to see if your favorites have changed .
here ’ mho why : While many designers go in with a vision of what they want to see and what looks dear, the finished product much differs on digital screens that physical tinge wheels — what seemed like a perfect complement or an ideal color pop may end up looking drab or dated .
Don ’ metric ton be afraid to draft, review, draft again and throw out what doesn ’ deoxythymidine monophosphate influence — color, like web site universe, is a constantly-evolving artwork form .
Put plainly ? Practice makes perfect. The more you play with color and practice design, the better you get. No one creates their masterpiece the first time around .
There ‘s been a batch of theory and hardheaded information for actually understanding which colors go best in concert and why. But when it comes down to the actual tax of choosing colors while you ‘re designing, it ‘s constantly a bang-up mind to have tools to help you actually do the exploit promptly and well .
fortunately, there are a number of tools to help you find and choose colors for your designs .
One of my favorite color tools to use while I ‘m designing anything — whether it ‘s an infographic or just a pie graph — is Adobe Color ( previously Adobe Kuler ) .
This free on-line joyride allows you to cursorily build color schemes based on the color structures that were explained earlier in this post. once you ‘ve chosen the colors in the scheme you ‘d like, you can copy and paste the HEX or RGB codes into whatever program you ‘re using .
It besides features hundreds of premade color schemes for you to explore and use in your own designs. If you ‘re an Adobe user, you can well save your themes to your history .
Illustrator Color Guide
I spend a bunch of time in Adobe Illustrator, and one of my most-used features is the coloring material guide. The discolor guide allows you to choose one color, and it will automatically generate a five-color outline for you. It will besides give you a range of tints and shades for each semblance in the scheme .
If you switch your independent coloring material, the color guidebook will switch the corresponding colors in that scheme. so if you ‘ve chosen a complementary color discolor scheme with the main color of blue, once you switch your independent color to red, the complemental color will besides switch from orange to green .
Like Adobe Color, the color scout has a number of preset modes to choose the kind of color scheme you want. This helps you pick the right semblance scheme expressive style within the plan you ‘re already using .
After you ‘ve created the color scheme that you want, you can save that scheme in the “ Color Themes ” module for you to use throughout your project or in the future .
Preset Color Guides
If you ‘re not an Adobe exploiter, you ‘ve credibly used Microsoft Office products at least once. All of the Office products have preset colors that you can use and play approximately with to create color schemes. PowerPoint besides has a number of color dodge presets that you can use to draw inspiration for your designs .
Where the color schemes are located in PowerPoint will depend on which interpretation you use, but once you find the tinge “ 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 to be used in whatever program you ‘re using to do your design influence.
Finding the Right Color Scheme
There ‘s a lot of hypothesis in this post, I know. But when it comes to choosing colors, understanding the theory behind color can do wonders for how you actually use color. This can make creating branded visuals easy, specially when using design templates where you can customize colors .