Color theory is the science and art of color. Discovered by Isaac Newton who created the first color wheel in 1666, color theorists have, for centuries, studied how colors work together and how they affect human emotions.
If you want to create visually appealing designs or art pieces that inspire, knowing the fundamentals of color theory will serve you well. Lucky for you – in this Chart, we tell you through everything you need to know about color theory.
In particular, we study the various color models used by artists and designers today, including CMYK, RGB, RYB, HSB, HSL and Grayscale. We also look at how color properties (such as tints & tones) can open up your creative horizons as a color professional.
In addition, we also delve a little into the fascinating psychology of colors, and explore the various color schemes you can spot on a color wheel.
Now, let’s dive into our Chart in more detail:
Color Spectrum
In this part, we include a linear representation of what the color spectrum for each color model looks like. This will give you a better idea of how colors transition from one to the next. Color spectrums are extremely useful tools for color matching, color location, and color pattern matching.
As you can see, for CMYK, the spectrum starts and ends with Cyan, showing the full color cycle you can achieve with CMYK inks.
The RGB spectrum starts and ends with Red, cycling through all RGB colors to complete a full color loop.
Lastly, the RYB spectrum begins and ends with Red, covering all RYB colors in a smooth transition.
Note: The order of colors in an RYB spectrum is unique, starting from Red, moving through Orange, Yellow, Dark Green, Dark Blue, Purple, Dark Red, and back to Red. This contrasts with the RGB spectrum, where colors transition differently.
The grayscale spectrum only uses shades of white, gray and black to define the element of lightness, allowing you to play around only with the light and dark of the color.
All in all, these visuals provide a quick reference for how colors blend and relate to each other in each system.
Color Models
Following are the color models:
RYB
First up, we have the RYB color wheel also known as the artistic color wheel, where we use Red, Yellow and Blue as the primary colors, and secondary colors are created by blending two primary colors (say, Red + Yellow = Orange).
As shown in the color wheel, tertiary colors are formed by mixing primary and secondary colors – filling the RYB wheel with additional colors.
CMYK
In the CMYK model, our primary colors are cyan, magenta, and yellow. When you mix equal parts of these, you create secondary colors (Blue, Red and Green) which can then be mixed to create 6 tertiary colors to create additional shades within the wheel.
CMYK is a subtractive color model where pigments produce color using reflected light. As shown, black is the final end product when you mix all three primary colors.
Adding black to any color (primary, secondary or tertiary ) will create shades and deepen the overall color. To learn more about CMYK color mixing, download our free Chart here.
RGB
In an RGB model, Red, Green, and Blue are the primary colors which create Yellow, Cyan and Magenta when mixed. Tertiary Colors are formed when you mix primary and secondary colors, filling out the RGB color wheel with more hues.
Be aware that adding different proportions of each primary color will give different color outputs.
HSL
The HSL color model uses three component values of Hue, Saturation and Lightness to create a variety of colors where:
- Hue refers to color defined by wavelength, measured here as an angle on the wheel from 0° to 360° (e.g., 0° = red, 240° = blue)
- Saturation shows how intense or pure a color is, 0% being a shade of gray and 100% being the full color.
- Lightness speaks to the element of white in a color, defined as a % from black (0%) to white (100%).
HSB
The HSB color model is another way to represent colors on a digital screen using three component values: Hue, Saturation, and Brightness.
This color model is widely used to select colors in image editing or other graphics applications.
Color Schemes
In this section, we look at the 6 main color schemes you can spot on a color wheel:
Monochromatic
A monochromatic scheme uses a single color. While it lacks a striking contrast, you can use varying shades, tints and tones to create a more dramatic and visually appealing palette.
These color schemes are used in home decor to create a smooth visual feel, or in product packaging to create a signature, customized look for your brand.
Complementary
A complementary scheme is based on any two colors that are opposite to each other.
Naturally, this scheme offers a high level of color contrast such as blue and orange, or yellow and purple. You can adjust intensity by using different tints, tones, and shades, to make your design look more seamless.
Analogous
An analogous scheme is when you pair a main color (your base hue) with the two colors next to it on the color wheel.
This scheme has a harmony you find in monochromatic designs, with a soft and gently graduating color palette that makes it perfect for catering to one kind of emotion or aesthetic, such as seasonal clothing lines or gothic makeup looks.
Square
A square color scheme is based on two pairs of color complements, say, red, yellow-green, and blue-green.
Without the proper color balance and harmony, a double complementary scheme can look busy and mismatched – so you might want to be extra careful in order to create visual balance in your work,
Triadic
Triads are based on colors equally placed around the wheel. For example, yellow, blue and green, as shown in our Chart:
Triadic schemes are ideal if you want to add a high-energy effect which also explains why most cartoons and cartoon characters have this scheme.
But here’s the tricky part – thanks to their striking contrast, triadics can be overwhelming. To avoid this, try to build some form of color hierarchy in your work. For example, you can choose a dominant color and use the others sparingly, or you can go for a softer hue for one of the colors to balance out the other two.
Tetradic
The tetradic color scheme is based on two pairs of complementary colors. For example, green with red, or blue with yellow, forming a square or diamond shape on your color wheel.
This rich scheme adds visual interest and vibrancy, making it perfect for logos, website headers, and promotional flyers.
To sum up, whether you go for a loud complementary scheme or the calm, tonal hues of a neutral one, there’s a type of color scheme for every mood. If you want to have some fun creating your own palette, feel free to check out this interactive online tool.
Warm Vs. Cool Color Wheel
This wheel in our Chart is organized around color temperature, with warm colors like red and purple shown on the right and a cooler range of colors from orange to green on the left.
Understanding how color temperature works is important for photographers and filmmakers, who use it to balance light and color. The right temperature balance helps you create the right kind of color harmony or contrast in your work
Color Meanings
When you’re using a color, there’s one more thing you might want to think about – what kind of emotional response does that color evoke?
To help you out, we have inserted a section that describes the different meanings associated with each color.
Color symbolism is the subjective meaning we attach to various colors. It speaks to the emotions they evoke and other intangible ideas or messages a color conveys.
With this color meaning guide, you can learn how to use color psychology to amplify your message with impactful designs that evoke the right emotional response in your viewer.
Color Value Scales
This part of our chart is dedicated to 6 key color properties. Here’s a quick overview of each of these properties entail:
Grayscale: Grayscale is a color property that uses only one component to define color – lightness. Each pixel of three primary colors shown is made up of shades of white, gray, and black.
Saturation is a measure of how pure a color is based on its environment, especially the light. Saturated colors are bright and tend to attract attention, such as cadmium red and ultramarine blue.
Chroma speaks to how vivid or dull a color is. A high-chroma color has no black, white, or gray in it. Chroma: Refers to the purity of a color, with high chroma indicating vibrant colors and low chroma indicating more muted shades.
Value is directly linked to the amount of light a color reflects. In other words, it speaks to how light or dark a color is. For example, black has a low value, while white has a high value.
Tint is the lighter version of a pure color made by adding white. In this case, when white is added to red, we end up with a soft pastel pink.
Tone is what you are left with if you mix a color with gray. Being a neutral color, gray is equal parts black and white. Adding gray to your base hue will make it less intense and vibrant.
Closely related to these value bars, we also include 6 separate color wheels to show essential color properties. This part categorizes colors into cool, warm, bright, dark, saturated, and desaturated groups, showing how these qualities can influence design.
Color Theory Wrap-Up
To sum up, this Chart is a useful and handy guide tool for professionals and students who want to learn how to apply the insights and principles of color theory in everyday design work. To help you practice, a blank version of the chart has also been provided to help you refine your own design or artistic skills.
Don’t forget to pin this article to one of your Pinterest boards for easy future reference!
Our professionally designed Tri-Model Color Wheel Chart: CMYK, RGB & RYB is just a click away, and downloadable in PDF and ADOBE formats.
Please note that combinations and schemes shown in these charts may vary significantly based on the medium used (e.g., watercolor, acrylic, digital) and the color model (e.g., CMYK, RGB, HSL).
In addition, display settings (such as night mode and resolution) can also affect color appearance. To avoid errors, always test colors in your specific context for more accurate results.
