🎨 Colors - Basics
This note is about the usage of colors in various contexts but mostly focuses using colors in visual design like logos.
Color is the first thing a person sees. Whether they want to look at it first or not. And people make snap judgments based on the color alone, depending on context.
Colors speeds up visual search. Because of this, colors are used for identity in data visualization and branding.
Same color makes us logically link the associated subjects. This is why the color is usually used to show structure, e.g., books sometimes have different color outer edges on each page base on the chapter.
Using dark text on light background relays textual information the best. But it might not be compelling enough to get a person to start reading it. Use color contrast to highlight parts of the text. Use colorful pictures to relay messages.
Be careful when using pure colors. Pure colors are, e.g., black (#000000) and red (#FF0000). The problem is that pure colors overpower everything else on screens. When you are designing prints, pure colors are more useful as environmental lightning will soften them.
#222222 Dark
#111111 Darker
#130f30 Blueish Dark
Pastel colors are the easiest colors to use. Pastel colors (low saturation, high color value) work the best if you have little design background.
Picking the right color depends on multiple things. For example:
- Era: What looked good in the seventies may look terrible now.
- Culture: A color used in a specific context might be offensive in some cultures.
- Medium: Colors used in a movie poster would make a lousy street sign.
- Popularity: You should avoid using competitor's colors if possible. Avoid color schemes that companies use in the media, e.g., flat UI bright colors. But this is a double-edged sword. A pink television will stand out between all black TVs, but will it make it look more appealing?
- Context: Brown enforces the message of nature when it is used in a logo with a tree, but imposes lust when used in an ad with a chocolate bar. What is the surrounding theme? How does it make us look?
Functional Colors
Colors affect our bodily functions:
- Red increases heart and respiratory rate.
- Blue decreases heart and respiratory rate.
Relaxing colors have a blue hue, low saturation, and high brightness. You can use this to your advantage. Being relaxed while you wait makes you perceive the interaction as faster. So using blue colors on loading sections makes websites seem faster.
Use bright, bluish and low-arousal color schemes for utility websites. Consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high arousal one, e.g., Google.
Use colorful, high-arousal color schemes for hedonistic sites. Consumers with hedonistic motivations find a high-arousal environment more pleasurable than a low-arousal one, e.g., nightclubs.