There’s a clear science to picking colors that work together. Color psychology is all about analyzing the effects produced by colors and combinations.
Color temperature
There are two different color temperatures:
- Warm colors such as red, yellow orange, pink, brown and burgundy, which represent warmth and motion.
- Cool colors go from green to blue but also include shades of violet. Those colors are great for backgrounds because they are rather calming.
Chromatic value
Pure colors
Pure colors are used to make websites cheerful, energetic or ‘cool’.
Tints
Tints are colors mixed with white. They make a website lighter and more peaceful and are less energetic than pure colors.
Shades
Shades are colors mixed with black. They are used to make websites more mysterious and communicates dark, dangerous moods.
Saturation
Color saturation refers to the intensity of the color of an image. When a color is fully saturated it is considered pure. Increasing saturation makes the color richer and darker, while reducing saturation makes it look faded and lighter.
Color theory 101
Primary colors
Primary colors are the basis for all other shades. There are three base colors: cyan, magenta and yellow. Every other color we see are combinations of those three colors.
RGB model
The colors on our computer screens are based on an additive color system, which means that colors are displayed in percentages of red, green and blue light. When all colors are put together we get white light.
CMYK model
Printers use a subtractive color model – also known as CMYK (cyan, magenta, yellow and black). If you combine all the colors of this model you will get a greyish-black.
Color psychology
Every color has a different meaning to people but can vary across cultures and regions. When designing websites, it’s good to have an understanding of certain meanings and characteristics of color groups. Here are a couple examples:
- Red – is vibrant, aggressive, powerful
- Orange – warm, hard to miss, gives energetic atmosphere
- Yellow – very eye-catching, can be irritating
- Green – represents wealth and finance, growth and health
- Brown – creates sense of earthiness and luxury
- Purple – associated with royalty and power
- White – shows purity and innocence
- Black – strength, luxury, the unknown
Grid theory and anatomy 