Color Theory 101
Hue – Color in its purest form.
Saturation – intensity of color expressed as the degree to which it differs from white.
Value – how light or how dark the color is.
The degree to which colors differentiate from each other in terms of their hue, saturation and color.
If contrast is too high it can cause strain on the eye of the user.
If contrast is too low – low contrast limits legibility.
Primary Colors are Blue, Red & Yellow
Secondary colors are created by mixing two adjacent primary colors.
- Primary + Primary = Secondary
- Blue + Yellow = Green
- Red + Yellow = Orange
- Blue + Red = Purple
Tertiary colors made by mixing Adjacent Primary and secondary colors.
- Primary + Secondary = Tertiary Color
- Blue + Purple = Blue Violet
- Red + Purple = Red Violet
- Red + Orange = Red Orange
- Yellow + Orange = Yellow Orange
- Blue + Green = Blue Green
- Yellow + Green = Yellow Green
Light and dark values and tones of a single color.
Use tints, shades and tones as complementary colors.
Taking three colors that are adjacent from one-another.
Taking three colors next to each other.
You choose a main color and then select the two colors either side. If yellow was your main color you’d also have green and orange as your complementary colors.
Two color on opposite sides of the pallet.
When placed together the boarder can look like its vibrating which can be jarring. So break the colors up with neutral colors or find different tints and tones of the color to avoid this.
Taking one color and selecting the complementary colors either side of the color directly opposite.
The square color model takes four colors evenly spaced around the color wheel. In the example above, the colors are blue, orange, red-violet, and yellow-green. This color scheme is really nice and would work well with one strong color and muted versions of the other colors.
Tetradic color schemes are built by creating a rectangle on the color wheel. Select two opposites on the color wheel and then select another color two spaces over and its compliment across the color wheel.
Tints & Shades
A tint of a color is when you take a color, such as blue, and add white to it. A shade is a hue that has black added to it. You can create a monochromatic color scheme buy using tints and shades of the same hue.
Warm colors (Red > Yellow) create a sense of warmth and heat in an image or a design. When you see warm colors, you think of the sun, heat, fire, and love (passion). Red is the color of blood, which is warm, and orange and yellow go along with summer. Adding an orange photo filter to an image instantly makes it look warmer and happier.
Cool colors (Purple > Green) carry connotations of cool climates, winter, death, sadness, ice, night, and water. Cool colors can be associated with calmness, tranquility, trust, cleanliness. Purple is associated with royalty, because they are supposed to be reserved.
Psychology of Color
Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness, the sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.
Selecting UI Colors
A simple strategy for selecting web pallet is to select a hero image and accent color and support with neutrals.
This pallet would look like this:
- Hero Color
- Accent Color
- Dark gray
- Light gray
- Adobe Color Palettes: https://color.adobe.com/explore/?filter=most-popular&time=month
- Adobe Color Wheel: https://color.adobe.com/create/color-wheel/
- Dribble: https://dribbble.com/colors/c67d53 Click color to help select colors. You can enter your own starting color for selecting complementary colors and values etc…
- CSS Tricks: https://css-tricks.com/grabbing-hex-codes-for-colors/ Show you how to work out hex codes from other websites
- Paletton: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF Helps you select a accent color. Enter your hero color hex and it will suggest a accent. If your not happy you can use the nav to find other complementary colors using your color theory (triad, analogous, complemntary etc…)
- WCAG Guidelines: https://webaim.org/blog/wcag-2-0-and-link-colors/
- Contrast Checker 1: https://webaim.org/resources/contrastchecker/
- Contrast Checker 2: http://contrast-ratio.com/
- A Simple Web Developer’s Color Guide by Laura Elizabeth
- Color Theory 101 by James George
- Color Matters. Six Tips on Choosing UI Colors. by Tubik Studio
- Josef Albers: The Interaction of Color by Infinite Dictionary
- An Introduction to Color Theory for Web Designers by Thomas Cannon
- Pantone®, Color, and What I Wish I Had Known by Josh Collinsworth
- Color Theory for Designers: How To Create Your Own Color Schemes by Cameron Chapman