Everything You Need To Know About The Color Theory
Color theory is the study of how colors work together and how they affect each other. Designers can use color theory to understand what emotions colors evoke when applied within their designs.
Now let’s get into a fundamental aspect of Color Theory, which will lay the foundation of everything that I’ll talk about…
The Color Wheel
The color wheel is a tool that defines colors and their unique relationships with each other. The color wheel consists of three primary colors, three secondary colors, and six tertiary colors, and a direct split through the middle would divide the whole thing, one side consists of the cool colors, and the other side consists of the warm colors.
Confused about the terms? Let’s get into some definitions
Primary Colors:
This color’s true pigment can’t be created by combining any other colors, these colors are Red, Blue, and Yellow. Or in printing and other further research studies Cyan, Magenta and Yellow (CMY), seem to be a more accurate presentation of how humans perceive and experience these colors, CMY is a subtractive color model which means when used in printing it subtracts Red, Green and Blue hues from the white light.
Secondary Colors:
These colors are created by combining two primary colors together the colors that come out of this are Green(Yellow and Blue), Orange(Red and Yellow), and Purple(Blue and Red).
Tertiary Colors:
These colors are created by combining primary and secondary colors together, at least that’s the first definition, while doing research for this post I found out that there is a second definition, that is combining a secondary color with another secondary color.
First definition;
Vermilion: Red-Orange, Amber: Yellow-Orange Chartreuse: Yellow-Green, Teal: Blue-Green, Violet: Blue-Purple, Magenta: Red-Purple.
Second Definition;
Olive: Orange-Green), Brown: Purple-Orange), Slate: Green-Purple.
Color Schemes
Complimentary Colors: These are two colors that are directly across from each other in wheel, the pairings are usually high contrast.
Split Complementary Colors: A variant of complementary colors, in which colors are added from either of the complementary color pairs, this is to soften the contrast between them.
Analogous Colors: These are three neighboring colors, one color and two colors that are adjacent to it, making the color scheme harmonious and subtle.
Triadic Colors: These are three colors that are equally spaced, the pairings are bolder than analogous and also more vibrant.
Tetradic Colors: These are 4 colors that are two complementary color pairs, and choose a dominant color. This pairing is vibrant although there has to be a vibrant between warm and cool colors
Square Colors: A variation of tetradic but the only difference is that the colors are evenly spaced along the wheel.
Monochromatic Colors: This refers to the shades, tints, and saturation of a base color either one of the Primary, Secondary, or Tertiary colors.
Color Temperatures
Warm Colors: Warm colors consist of a higher amount of reds, yellows, and oranges, warm colors are associated with the warmth of the summer and the color of fire hence the name.
Cool Colors: Cool colors consist of higher amounts of blue, greens, and purples, these colors are associated with the chill of winter, nighttime, or even death, they are also considered a soothing color.
The RGB Color Model
RGB(Red, Green, and Blue) is an additive color model, which means that the more colors that are added the closer you get to white, primarily used for digital design rather than print, a representation RGB should look something like this rgb(0,0,128) which is you guessed it, Navy Blue or rgb(255,255,255) which is pure white.
Ever heard of Hex codes?, yeah me too, I have one saved as a password and no I won’t tell you what that is!
For those who have absolutely no idea what a Hex code is; A hex code is a color system that converts these rgb values into hexadecimal(base 16), a formula that is used to convert rgb to hex is;
R/16 = x + y/16
G/16 = x’ + y’/16
B/16 = x” + y”/16
This will give a whole number 0–15 for x, and a remainder for y represented as a whole number 0–15 over 16.
The format would then be # x y x’ y’ x’’ y’’, in hexadecimal calculations we need to count all the way to 15 before double digits are used which means after the last single digit which is 9 we use the alphabet to replace the double digits up until 15, from A to F(10–15).
An example so you won’t be confused:
Consider an rgb(0,0,128) to be a hex code using the specified formula above;
0/16= 0 + 0/16
0/16= 0 + 0/16
128/16= 8 + 0/16
#000080 Yup this is the hex code for navy blue you can verify if you want.
I you get a decimal for the remainder multiply the decimal by 16 to get a whole number.
Other Things That Manipulate How Colors Look
Shades: Shades are created by adding black to the color, making the hue darker, darker shades can be used to replace black.
Tints: Tints are created by adding white to the color, very light color hues are referred to as pastels, Pastel tints are sometimes used to create a more feminine design although they can also be used for some masculine designs, maybe vintage designs.
Tones: Similar to Shades and Tints, Tones are created when adding grey to the color tones are softer than the pure hue of the color.
Shades and Tints are ideal for creating a single-colored graphic by using different values of shades and tints.
Saturation: Saturation is the intensity of the color, an increased saturation is more darker and richer(vibrant), and a reduced saturation is more washed out and faded(greyed).
Hue: Hue is the degree of comparison to which it looks similar to any of the primary, secondary, or tertiary colors, when you say a color like sky blue then you are describing it in terms of hues.
Chroma: Chroma is the purity of the color, a high chroma means that there is no black, white or grey added to it, it is most certainly the reverse if they are added.
Lightness(value): The lightness of a color is the perceived brightness of a color compared to pure white.
SO! How do we create our own color palette?
Creating a custom color palette is quite complex, it doesn’t follow the predefined schemes discussed above, it is not based on any custom rule or anything like that, when creating the palette use manipulative techniques like Hue, Tints, Shades, and Saturation.
An understanding of how colors work and interact with each other is mostly important to know of course, although for most designs these predefined patterns may not be followed strictly.
Now let’s create a palette;
1. Define what the palette is for, what project is it for and who is the target audience, also what type of feeling you want to evoke.
2. Choose a starting point, use an existing color scheme for inspiration, or use a photograph related to the audience.
3. Build your palette by either using a neutral base with an accent (like for instance grey palette with a blue accent), by applying shades, tints and tones(picking a color and using variations of that color for a cohesive look) or by experimenting and adjusting with online palette generators like Coolors or Canva.
5. Refer to the color wheel to ensure that you get the colors right.
4. Refine the color palette, consider using between 3–5 colors in the palette and ensure the colors work well together.
Overall creating a new palette comes down to your exploration of colors and your imagination.
You’ve created a new palette! Awesome so now how do you use it?
Remember you created your palette with intent, knowing the feeling you want to evoke, that means you know where you want to use it. The following a ways you can use your color palette;
The 60–30–10 rule.
60% main color
30% secondary color and
10% accent color
Start design with greyscale; this is to find out how much contrast the colors need, low contrast designs are god awful to read. How your design looks in greyscale determines how good it will look in color.
Recommended Books For Understanding Colors More
I have told you all I know about colors and how they work, these recommended books are great to even understanding them more and to create more intriguing palettes.
The Secret Lives Of Colour by Kassia St Clair
Color Problems: A Practical Manual for the Lay Student of Color by Emily Noyes Vanderpoel
The Designer’s Dictionary of Color by Sean Adams
Interaction of Color by Josef Albers
The Elements of Color by Johannes Itten
Color Choices: Making Color Sense Out of Color Theory by Stephen Quiller
The Secret Language of Color by Arielle and Joann Eckstut
A Dictionary of Color Combinations by Sanzo Wada
Palette Perfect for Graphic Designers and Illustrators: Colour Combinations, Meanings and Cultural References by Sara Caldas
Thanks for reading, That’s just about it for colors. Subscribe to the email to know what’s coming next.
Follow us on socials for more types of design content.
