1. select from the colors in the subject in front of you, or
Why We Need Color Theory
Color theory is an immensely complicated subject, and is understood differently by scientists, printers, web designers and painters. Subtractive color (where mixing the hues will create black) is what oil painters generally use, and some grasp of the theory will help you understand:
1. Why some colors ‘work’ together, and others don’t.
2. How paintings are designed: color is a vital element of composition.
Contents3. The principles that have guided successful painters, and which are still useful.
4. How to mix colors — if only very broadly: pigments have individual properties.
Hue, Purity and Value
Colors are classified by three properties: hue, purity and value — terms that are often misunderstood. Experimenting with a graphics program will get the distinctions into your head, though colors mix differently on screen.
Hue
The intrinsic color; the wavelength of the light concerned. The strips shows primary, secondary and tertiary hues.
Purity
The freedom from other color admixtures. Saturation is the degree of purity. Chroma is the purity in relationship to gray. (N.B. Some authors also use intensity to mean color purity, whereas for others it means tone/value.)
Value
The luminance — brightness or dullness — of a hue, as measured by the amount of light reflected. Also called tone or tonal value.
A tint is made by adding white to a hue, and shade is made by adding black. As far as oil painting pigments are concerned, mixing in white or black will usually lower the purity of a hue, making it chalkier or muddier.
Primary, Secondary and Tertiary Colors
primary & secondary
tertiary hues
Red, yellow and blue are the primary colors, which can’t be derived from still more basic colors. Mixing two primary colors will create one of the secondary colors: orange, green or purple. A secondary color mixed with an adjacent primary (on the color wheel) will create a tertiary color.
Tints, Tones, and Shades
First, a little background about tints, tones, and shades. Stated simply, these color variations are created by adding white, gray, or black to a hue (or pure color) to alter its lightness. More specifically:
- Tint: is the mixture of a color with white, which increases lightness
- Tone: is produced either by the mixture of a color with gray, or by both tinting and shading
- Shade: is the mixture of a color with black, which reduces lightness
In Fives
I like to apply tints, tones, and shades to hues in sets of five. I start with the hue as a middle value and then go lighter and darker in two steps. This way you create a range that looks like this:
Darkest > Darker > Hue < Lighter < Lightest
Here’s why I like this method: when you create tints, tones, and shades, and then apply the More Colorful Naming concept, you avoid naming colors “darker dark blue” or “lightest light orange.” Instead, you get something like this:
Darkest Coral > Darker Coral > Coral < Lighter Coral < Lightest Coral
Note: in this example the gray tone is defined as 50% of black (or middle gray) set to 20% opacity to create the “darker” effect.
In establishing a range of five values from lightest to darkest, you also allow for contrast flexibility and soft background coloring as needed.
Contrast Options
I find that in order to use white text on a background color I need to increase the contrast between the two colors for better legibility. Having pre-established values for darkening a color makes it easier to quickly test that contrast.
Alert Notifications
Similarly, light values of colors are often used as backgrounds for alerts and notifications, and having a lighter option at the ready makes creating those alerts easier.
Button Gradients
Lastly, gradient fills from “lighter” to “darker” help create tactile button effects while retaining a pure hue in the middle of the gradient.
In Summary
Tints, tones, and shades can help you create varying levels of color brightness without altering hue. I hope this method is as useful for you as it has been for me.
For a CSS friendly approach, I highly recommend Chris Coyier’s Yay for HSLa article and HSLa Explorer tool as well as Kyle Fiedler’s Controlling color with Sass color functions.
See also:
- Using Word Association to Select Brand Colors
- Add Colors To Your Palette With Color Mixing
- Shades of Gray — Yes, Really
- Giving Colors More Colorful Names
- Using HSB Inputs in Photoshop’s Color Picker
- Yay for HSLa
- Controlling color with Sass color functions
- Color Contrast for Better Readability
Related Articles
Article
Our Variable Wishlist to Figma
Haroon Matties
Article
Building Motion for the Web: Recipes for Design Success
Nathan Long
Article
Use Ecosystem Maps to Show, Not Tell
Melissa Foley
The Viget Newsletter
Nobody likes popups, so we waited until now to recommend our newsletter, featuring thoughts, opinions, and tools for building a better digital world. Read the current issue.
What is Hue?
As artists we are constantly mixing new colors and calling them different names like Alizarin Crimson or Cerulean Blue.
Each of these colors can however be derived from 3 primary colors, red, yellow and blue.
Let’s take these 3 yellows for example:
Although they are three different colors, they are all still yellow.
This “base” or majority or dominant color is called it’s hue. In this case the hue of these three colors is yellow.
At it’s most basic there are only 3 hues – red, yellow and blue.
For practical reasons though hue has been expanded to included also the secondary colours.
So you can describe the hue of a color as being either red, orange, yellow, green, blue or purple.
Here is another example to drive the point home:
Each of the different colors above have a green hue.
What is Tint?
The first way to modify a color is to add white to it. When we do this, we are tinting the color.
Here are a few tints mixed from the green above:
As you can see a tint is related to the lightness of a color.
One thing to note is the effect of adding white to a color. The white reduces the darkness of the color, but it doesn’t influence how bright or luminous that color is. It is simply paler than the original color.
A well-known example of tinted colors are pastel colors. Pastel colors are made by adding a large amount of white to a pure color. The result is softer colors that can be used to create a variety of effects.
What is Shade?
A shade involves adding black to a pure color or a mixture of colors. In this way, it is similar to a tint but instead of adjusting the lightness, it changes the darkness. This means that a shade is the same as a pure color, but it is darker thanks to the effect of the black.
The more black you add to a color, the darker it becomes. If you add a large quantity of black, the mixture will be almost completely black with very little of the original color still visible. When you’re mixing shades, it’s a good idea to add only a very small amount of black at a time to help you find your desired shade.
Shades are often more intense than pure colors. They can be used to create a richer effect in your artworks and can be a helpful tool for influencing the atmosphere of your work.
Of course, the term ‘shade’ also has another meaning. Shade refers to spaces where sunlight doesn’t fall directly. Shade is the darker area, usually in the shadows. This can be a useful way to remember the definition of the term shade in color theory. Shade is color with more black added, it is darker than the pure color.
