Colors tell the story of your product. They inform the consumer’s mind – emotionally – about what is happening, what decision to make. In short, colors can influence us, as we well know.
In addition to arousing emotions, colors attract the eye and communicate, sending messages.
The color of buttons, for example, affects how users interact with them. Brand colors, of course, also change the attitude of users.
The contrast between the depth and saturation of colors affects how a given element is communicated.
Basics of Color Theory
The basics of color theory are the following three factors:
- Hue – hues are different shades of the same color
- Saturation – refers to the intensity of the color; whether it is more vibrant or subtle
- Value – whether the color is light or dark
Not only does color change people’s moods, saturation and value do too. Don’t overdo it. Use them carefully to guide the viewer, tell a story, change the mood, or draw attention to a specific element of your design.
Temperature
According to their temperatures, colors are warm and cold:
- Warm colors – warm colors symbolize passion, happiness, enthusiasm. Warm colors are red, orange and yellow.
- Cold colors – cold colors symbolize calmness, stability, professionalism. Cold colors are – purple, blue, green.
Color models
According to color models, we divide colors in two main ways:
- RGB – comes from Red, Green, Blue and is optimized for displays, used on the web.
- CMYK – comes from Cyan, Magenta, Yellow, Black – is used in printing.
On the Internet we use RGB as the basic color model, but it can be passed to the browser (the one that actually reads the colors on your site) in two ways. One is with an rgb value. In CSS it is written rgb(xxx,xxx,xxx), where for example rgb(255, 255, 255) is white. The RGB notation allows for the addition of a so-called alpha channel, with which you can control the transparency of the color. This is done by writing for example rgba(255, 255, 255, 0.5), which will display a white color with a density reduced to 50%. A valuable tool, if you are placing text on an image, you can place a color layer that you can make semi-transparent so that both the image and the words are visible.
The other option for writing is using the so-called Hex code. It contains RGB and is written as follows:
#000000 – black
Hex can be “translated to RGB” as follows:
#RRGGBB
Where:
- #ff0000 is red
- #00ff00 – green
- #0000ff – blue
- #ffffff – white (255, 255, 255)
- #000000 – black (0,0,0)
In hex code, 0 is the lowest index and f is the highest.
Color Psychology
Like absolutely everything else around us, colors also send a certain kind of message, but, like any other sign, their meaning depends mainly on the context. Yes, white is always a symbol of goodness, freedom, life, but strictly in the context of Asian peoples, it could also symbolize death and sadness. In this sense, there is no absolutely unchanging meaning of colors.
However, this should not stop us from using the so-called color psychology and knowing that red is usually associated with something negative, while a message on a green background almost always means that the goal has been achieved, sending us positive feedback – “your message has arrived”.
As we mentioned a little above, colors could mean different things in different cultures and different contexts, so it is a good idea to study the cultures you are targeting so as not to make a mistake in the colors you use.
Don’t just put colors where you think they are needed, as they always communicate something to the user.
- Bright colors – usually give a light, fun and modern feel
- Desaturated, muted (desaturated) colors – are taken more seriously, more business-oriented, more formal
- Sometimes what colors communicate depends on the context
Brand values
The colors you use should be chosen to complement and demonstrate your brand values.
Your brand’s primary, secondary and tertiary (if any) colors should be arranged in a hierarchy of actions. As we have already mentioned, the color scheme you choose will give your brand a certain style: traditional, modern, more relaxed or more strict.
UI States
Remember that colors also serve to demonstrate the states of different elements, for example switches. Also, through colors, you can show users whether the message they see is a message of successful interaction, an error, or something that needs attention.
However, do not rely only on colors for this. Write the information well to explain what is happening.
Contrast
To see if the elements on your site are contrasting enough to be easily perceived, you should see how your project looks in grayscale. If even in gray all the elements are visible and distinguishable, then the contrast of your site is at a very good level.
Combinations
There are an infinite number of tools through which you can find the best combination of colors for you and your brand. Among the best is Adobe’s “color wheel”.
Color combinations are:
- Monochromatic – a color palette created from one primary color and its derivatives. For example, several shades of blue.
- Analogous – using colors that are next to each other on the color wheel.
- Complementary – colors that are directly opposite each other on the color wheel.
- Bifurcated complementary colors – this is a color palette that is built on the basis of one color, and both of them are located next to its complementary (opposite on the color wheel).
- Triadic color scheme – using three colors that are the same distance from each other.
- Quaternary color scheme – you create a square on the color wheel. Use one of the four colors as the main (dominant).
