Following straight on from the last article in this series on color, Color Theory 101, we’re now going to take a better look at the RGB and CMYK color wheels.
I’m constantly amazed by the lack of respect that exists for the red, yellow, and blue primary color wheel. I’ve heard people call it invalid, archaic, and a kindergarten tool. It’s true that the red, yellow, and blue color wheel is not a scientifically accurate model of the perception of light. Many people want to eliminate the red, yellow, and blue color wheel from art curricula, and establish the CMYK (cyan, magenta, yellow, and black) color wheel, shown in Figure 1, “The CMYK color wheel”, as the universal color model. Note that the secondary colors in the CMYK color wheel are red, green, and blue, meaning that we could use the CMYK to illustrate both additive (using light) and subtractive (on paper) color.
Fig. 1, “The CMYK color wheel”
To illustrate the reasoning behind the push to move to CMYK, I’ve used gouache paints, which are basically watercolors that come in a tube. When mixed with water, they are fairly translucent and produce the colors you would expect to see on the modern CMYK color wheel, as Figure 2, “Playing with CMY gouache paints” shows. Magenta and yellow mix to produce nice shades of orangey reds, while cyan and yellow mix to produce green and minty tones. This is how CMYK printing works. The inks are translucent and the overlap between them (along with the use of black—don’t forget good ol’ K) gives us most of the colors we can see on an additive, light-emitting monitor or TV. As the famous TV painting instructor Bob Ross might have said, “That’s a happy little color model.”
Wait! What’s that purple splodge? Yes, equal amounts of cyan and magenta form a violet or purple, instead of the pure blue suggested by the CMYK color wheel. Numerous anomalies like this crop up when we mix opaque pigments. Basically, if your paint is so thick that you’re unable to see the white paper or canvas on which you’re painting, the concepts of a CMYK color wheel start to fail. In this regard, the traditional red, yellow, and blue color wheel developed by Goethe, Itten, and others over the last four centuries or so is a much better model.
But we’re using pixels, not paint! The reason many digital artists still keep a red, yellow, and blue color wheel handy is because the color schemes and concepts of traditional color theory are based on that model. As we’ll see shortly, the relationships between colors are largely determined by their relative positions on the color wheel. But those positions differ depending on the wheel; for instance, on the traditional color wheel, red and green are opposite, whereas on the CMYK wheel, cyan is opposite red. We can’t simply shift the red and blue around the color wheel and call it a day. Because of this, the color schemes that I’ll be discussing in the next few articles are based on the red, yellow, and blue color model.
There are flaws to be found in both color wheel models, and complementary colors are a prime example. But what’s really going to bake your noodle is when I tell you that there is no color wheel that can fully describe the complexities of the way in which we perceive color from light. Even though I design mostly for the Web—a medium that’s displayed in RGB—I still use red, yellow, and blue as the basis for my color selections. I believe that color combinations created using the red, yellow, and blue color wheel are more aesthetically pleasing, and that good design is about aesthetics. Therefore, I’m going to present color theory as I learned it in my sophomore design fundamentals class in college: from the traditional red, yellow, and blue color wheel.
The Principles of Beautiful Web Design
This article is from Jason Beaird’s The Principles of Beautiful Web Design book (second edition is out now!). Be sure to lookout for further articles from the book here on Design Festival.
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Prototyping
Researching UX: Analytics
Designing UX: Forms
- 1 How to Handoff Designs with Sketch and InVision
- 2 Introducing Portfolio WordPress Theme – and the Design Decisions Behind it
- 3 How Writing Our Book Taught Us About Killer Prototyping
- 4 How to Turn Your Sketch Files into Working Prototypes with Origami
- 5 Killer GIFs: How Can an Animated GIF Become a Weapon?