Color is a huge element to design. It can evoke different reactions and emotions from each person. In consideration of time, culture, and personal preference, each person views color in their own unique way. By keeping all this in mind, be wise in your color choices and use them appropriately to bring the right feeling and message to your designs.
What is Color Theory? “The interaction of colors in a design through complementation, contrast, and vibrancy.”
—John Cannon
The primary colors of red, blue, and yellow are colors that can't be mixed or created by the combination of other colors. However, all other colors are created from these three hues.
The secondary colors of orange, purple, and green are colors created from the combination of primary colors.
The colors yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green are colors created from the combination of primary colors and secondary colors. That is why these hues have a two word name.
Redis a powerful color of passion, violence, strength, importance (think of blood, life, heat). In design, red can be an accent color or it can be the main focus, making it very versatile. Depending on the hue, it can be energetic as a bright red. Or it can be powerful and elegant as a dark red.
Blueis a very calming color (think of the water and the sky). It can be associated with sadness, peace, and responsibility. Depending on the hue, it can have different feelings. Light blues can be friendly and relaxing. Dark blues can be strong and reliable.
yellowoften gives positive, happy energy and growth (think of the sun). Its usually considered the brightest of the colors and can definitely uplift your design. Bright yellows are cheery and softer yellows are cam
orangeis a bright and energetic color that's usually associated with autumn. It's a strong color without being overwhelming, so it works well as accents on a webpage. In design, its a nice color to direct attention without overwhelming the viewer.
purple has long given a sense of royalty and wealth. Depending on the hue, it can give different feelings to your design. Darker purples create a feeling of luxury. Lighter purples create a feeling of romance, spring, and softness.
green is a very earthy color. It represents growth, nature, and renewal. In design, its a very stable and harmonizing color with others. In design, using brighter greens create more vibrance and energy. Dark greens represent prosperity and the natural world.
How do we use color theory? Well, right now we are applying complementation, contrast, and vibrancy on this webpage!
Complementation is how we see colors in relation to others. By using this color scheme, I've created a harmonious balance so your eyes are not visually strained. There is a balance between the color of the content with the color of the accents and headers.
By using contrast, I can focus the users attention where I want to. Here, I've clearly divided elements throughout the page to bring the right amount of attention to each area. Even the simple choice of a white background forces your eye to concentrate on the dark text, which also makes it easier to read.
Vibrancy dictates the feeling of your design. Here, I've used a dark subtle purple and grey to compliment all the colors used on this page. Darker shades are relaxing to the viewer and allows them to focus on other things. Also by using this darker text, it doesn't clash with the variety of colors I've used throughout this project.
An Introduction to Color Theory for Web Designers
Color Theory for Designers, Part 1: The Meaning of Color
Color Index by Jim Krause