After last week’s Memorial Day hiatus, I am more excited than ever to bring you this week’s installment of the color series. Today I’ll be telling you a bit about color theory and how you can use some aspects of color theory to impact the way others experience your site/ branding/ graphics by creating a certain “feeling.”
I actually don’t put much stock in color psychology because there are so many personal and cultural influences on how we each experience color. I try not to worry too much about whether purple is conveying a “rich” or “royal” vibe or red is going to make someone (a bull, maybe?) angry.
Instead, I consider hue, saturation, and brightness as I develop color schemes that are appropriate for different projects.
Hue
Hue is the technical term for what we usually call “color.” For example, blue is a hue. Light blue, navy, etc., are all still blue (the hue), but they look different because they have differences in saturation and brightness. Light blue is not a hue itself, it’s a shade of the hue blue. (Maybe I should have illustrated that with something that didn’t rhyme with “hue”?) See this in action here.
One way to use this concept is to bring a set of different colors closer to one hue using an overlay. In the example below, I’ve added the small purple swatch over the color palette with varying opacity levels (from 25% to 75%):
You can see how this creates new color palettes that get more and more unified as they closer to a single hue (purple). Pretty intuitive once you see it in action, but a cool trick nonetheless – using a low opacity (10-30%) on the overlay is a particularly useful way to get a cohesive color scheme out of a palette.
Brightness and Saturation
Brightness is about how close a color is to white, and it’s what we’re talking about when we call colors “light” or “dark.” Saturation had to do with the intensity of a color (a good way to think about this is to think about how the color of your favorite (bright) shirt looks in full daylight vs in a dark room). As you desaturate a color, you move closer to gray (this is where grayscale comes from – it’s removing all saturation).
As you get less saturated, colors tend to feel dreamier, more muted, calmer. Conversely, saturated colors are typically higher-energy in feeling. Similarly, colors that are brighter often feel younger, more playful, and sometimes are even lifting or lightening in the way they make us feel.
How can you use this?
As you’re working on your next color project, consider the way you want the end product to feel. If you’re going for spa-like, you probably want colors that are not very saturated. If you are creating a kid’s product, you likely want something bright. You can take it a level more specific, too – if that kid’s product is for newborns, you probably also want to keep it less saturated, whereas a toddler product might benefit from more saturated colors.
Of course, with anything you only need to know the rules to make educated choices when you go on to break them!
Previous posts from The Color Series:
1. 5 Sources of Color Inspiration
2. 4 Color Palette Tools
3. From One Color to a Color Scheme (3 Methods)
