In the world of design and development, you’d be hard-pressed to find anyone who doesn’t believe color is a foundational building block of both.
Color theory is an age-old science and art for those who work in these fields, but the “why” and “how” can often be hard for those who orbit their work to understand. Very few who go into a career outside of the creative field will take a Color Theory 101 course, and of those who somehow do, keeping that knowledge and applying it to future work can be an impossible task. But fear not! Cliff Notes is here to help. In this post, we’ll cover everything necessary for a basic knowledge of color theory and the process of creating a color palette.The Basics of Color Theory
Color theory is the concept and study of how colors are used and interact in art and design. It’s a base tenet of what designers and web developers use to create visually appealing work and an important part of the specialized education. However, a basic understanding of color theory can be useful to anyone, especially those who work in marketing or deal directly with designers and web developers. Ready for your beginner’s lesson? Let’s start with the basics!
Primary vs. Secondary vs. Tertiary Colors
All colors can be divided into three categories; primary, secondary, and tertiary.
Primary Colors
The foundational colors used to create all other colors. Red, yellow, and blue.
Secondary Colors
The colors created by mixing two or three of the primary colors. Orange (red+yellow), purple (red+blue), and green (blue+yellow).
Tertiary Colors
The colors created by mixing primary and secondary colors. Magenta (red+purple), vermilion (red+orange), violet (blue+purple), teal (blue+green), amber (yellow+orange), and chartreuse (yellow+green).
What is the Color Wheel?
The Color Wheel is the visual representation of the relationships between primary, secondary, and tertiary colors. Using the color wheel as a guide when creating a brand palette will ensure that the colors chosen complement or contrast each other in the most visually appealing way (more detail on this later in the blog post).
Colors are categorized into primary, secondary, and tertiary on the simple 12 segmented color wheel, but it’s common knowledge that there are far more than 12 colors. A more advanced color wheel is used to show the greater variance in color.
12 Segment Color Wheel
Advanced Color Wheel
Hue vs. Shade vs. Tint vs. Tone vs. Temperature
To better describe the variants in the advanced color wheel the following terms are used: hue, shade, tint, tone, and temperature.
Hue
Hue refers to a pure pigment of color, the base of any color; which are the six primary and secondary colors: red, yellow, blue, orange, purple and green. Any color you use will have a hue as its base, for example: teal has a blue/green hue.
Shade
Shade refers to how much black is added to a hue. Shade darkens a color, for example: eggplant/aubergine is a shade of purple.
Tint
Tint refers to how much white is added to a hue. Tint lightens a color, for example: mint is a tint of green.
Tone
Tone refers to a hue that has been mixed with a pure gray (as in, a gray created with only black and white). Tone makes color more subtle, and is generally considered easier on and more pleasing to the eye. For example, adding gray to yellow would make it less bright sunshine and more subtle flax.
Temperature
Temperature is a way to describe where a color is placed on the color wheel, using the terms warm, cool, and neutral. A warm color will contain yellow and/or red, a cool color will contain blue, green, and/or purple, and neutral colors are black, white, brown, and gray. For example: vermilion is a warm color, violet is a cool color, and gray is a neutral color.
The Color Models
Now that you have an understanding of color categorization and variance, let’s move on to color models. Color is perceived by the human eye in the form of energy waves of light. Color models refer to the two different ways in which color is processed, either the additive model of blending light or the subtractive model of absorbing light.
RGB
In the additive color model RGB, colors are created by mixing different light hues and the more hue that is mixed the lighter a color becomes. RGB color starts as black, with no light mixed (R=0 G=0 B=0) and ends as white, with equal amounts of all light mixed (R=255 G=255 B=255). This color model is used for digital devices because electronic screens combine three hues of light (red, green, and blue) to create color therefore, when more light is added colors appear lighter.
CMYK
In the subtractive color model CMYK, colors are created by absorbing light hues and the more hue that is absorbed the darker a color becomes. CMYK colors start as white, with no light absorbed (C=0 M=0 Y=0 K=0) and ends as black, with all light absorbed (C=0 M=0 Y=0 K=100). The color model is used for printing because ink is printed and layered to create different colors therefore, when more ink is added colors appear darker.
Hexadecimal
The hexadecimal system is used in web coding, it uses the same additive color model as RGB but displays color with hexadecimal values (16 symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). A hex code consists of 6 symbols that represent the three RGB colors and how much of those colors are used; the first two symbols represent red, the following two represent green, and the last two represent blue. For example, white uses the hex code #FFFFFF because the highest amount of color (or light) is used and black uses the hex code #000000 because the lowest amount of color (or light) is used. Hex codes are recommended to be used in coding because they are more efficient as they are easier and quicker to type. For example, #AEFFA3 vs. rgb (174, 255, 163).
Pantone
Pantone Matching System or Pantone or PMS, is a color system used in printing. It is a color system and brand that is universally consistent. That means a color can be printed anywhere, and if it is using a Pantone color and ink it will be the same. It uses the same base colors as CMYK but where generic CMYK can vary depending on how much pigment the ink/printer uses Pantone uses the same amounts of pigment in its ink and printers do not make any changes to the inks. Pantone is used in higher-end and large-order printing, particularly when the consistency of color is key. It’s recommended that all brands at least know what Pantone colors are used in their logo, and it’s even better to have the full palette.
Creating a Brand Color Palette
Creating a color palette for a brand of course requires an understanding of color theory. In addition to these, it’s important to understand color harmony, and can also be inspired by color psychology and standard color schemes. You now have a basic idea of color theory and the color systems; let’s move on to color harmony, color psychology, and the standard color schemes.
Color Harmony
Color harmony is the term used to describe the combining of colors in a way that is visually pleasing to the eye. It is crucial to understand color harmony if you want to create a color palette that is both professional and beautiful. Grouping colors in a palette creates contrast, consonance, or both, and if it is done well it will be harmonious.
Color Psychology
Another useful tool in creating a palette is color psychology. Color psychology refers to the influence of colors on mood and behavior. If you’re trying to target a specific audience, consider using a color that will best appeal to them. To be clear, this isn’t a hard rule of color theory especially if you have an international brand, colors can represent different things for different cultures. But color psychology can be a useful tool if you find yourself wondering where to start in creating a palette.
Some common color associations:
- Green: Nature, Fresh, Health, Money
- Red: Energy, Power, Love, Anger
- Blue: Trust, Competence, Calm, Security
- Black: Elegance, Authority, Mystery, Seriousness
- Yellow: Youth, Joy, Playfulness, Affordability
Traditional Color Schemes
Six color scheme standards are the basis for creating harmonious palettes, if you are new to the world of color theory you should use these as a reference when creating a harmonious palette.
Monochromatic
Monochromatic color schemes use various tints and shades of a hue. Using one color in different tints and shades makes it difficult to create a jarring or ugly palette, but if the application of the colors is not right can be seen as boring.
Analogous
Analogous color schemes use three colors that are located next to each other on the color wheel. Additional colors can be created by using different tints, shades, or tones of the main three. To keep analogous palettes interesting try making sure there’s enough contrast between your tints, shades, or tones.
Complementary
Complementary color schemes use colors that are placed opposite of each other on the color wheel. Typically these start with two colors, additional colors are created by using different tints, shades, or tones of those colors. Complementary colors can be visually overwhelming when placed next to each other, if needed to ensure that your palette is efficient your additional colors can be used to transition between them.
Split-Complementary
Split-complementary color schemes add complexity to a complementary color scheme by introducing additional colors that fall on either side of your main hues on the color wheel. This can alleviate some of the overwhelming visuals of complementary colors by introducing more transition shades.
Triadic
Triadic color schemes use three colors that are equally spaced around the color wheel. These can be more challenging to get right but offer a lot of diversity and can make a palette more visually interesting. You can pair these three colors with tints, shades, tones, or near neutrals of the three colors.
Tetradic
Tetradic color schemes use two sets of complementary colors. Introducing additional colors with tints, shades, or tones or near neutrals of these colors. These can be the most difficult to do right and are typically only used by more experienced designers. If you are less experienced the best way to make these work in application is to choose one of the colors to be the primary, and use the remaining colors as accents.
Brand Color Palette Final Steps
Once the more philosophical questions involved in creating a color palette are answered and the colors have been chosen, there are two additional key aspects to prioritize before using a color palette.
Confirming Print Values for Your Palette
These days it’s almost guaranteed that a color palette will be created first on screen, but what you see on screen is not what you’ll see in print. Remember that screens use the additive color model, whereas print uses the subtractive color model. The most obvious visual difference in these is that an RGB color will appear brighter than its exact CMYK conversion. Therefore, it’s important to not merely use a design program to auto-convert the RGB color codes to CMYK color codes.
Getting a perfect print match for your screen colors is not the easiest task if you don’t have access to a high-quality printer or a CMYK color book/process manual. Working with a designer (like us!) who has access to these is recommended if you want the best look for your printed materials.
Color Accessibility on Your Website
Another important piece of creating the perfect color palette is to keep in mind that if you want your website to be accessibility compliant your palette will need to have at least a few colors that will be high contrast enough for text. In America, the ADA and WCAG have guidelines for the specifics of accessibility; learn more here. The basic rule is that text should have a contrast ratio of 4.5:1 regardless of size to be readable by users with low vision. It’s important to keep this in mind and to make sure to test your palette colors to confirm their contrast ratio to know which are usable as text colors. There are lots of online accessibility testers that you can use if you know your palette’s hex codes, like this one.
Practice Makes Perfect!
Color theory, like all areas of expertise, is a learned skill. Designers take foundational classes in college and spend many years putting that knowledge into practice before being considered experts. While it might not be of utmost importance for someone outside the field to be an expert, a basic understanding of color theory can help anyone who deals directly with designers or who is in charge of their company’s brand/marketing. Color theory helps you understand why a designer chooses to prepare a brand palette with a certain set of colors, or why they might most often place certain colors of your brand palette together and keep others separate, and it will help you to make those decisions for yourself when necessary.
If you’re looking to continue refining your understanding of color theory, a great way to do that is to practice creating color palettes of your own. Color palette generators from Adobe Color, Canva, and Coolors are great resources to play around and perfect your knowledge. Some even have the option to choose a main color and build the rest of the palette based on a color scheme standard of your choice.
If you need guaranteed expertise, we can help!
Reach out to TCS today to set your brand up with a professionally concepted and perfectly tailored brand palette.
