Understanding Color for UI Design
Color is an integral part of the design. We are surrounded by color, rendering them crucial to human experience. Every color used in a design is a choice made, which can help elevate any design. They create visuals that can invoke emotion, meaning and interest.
How does color impact user experience?
In UI design, color makes the first impression on the user. It sets the tone for the design. More importantly, they can help create engaging designs that keep the user’s attention.
Here is a guide to the basic principles about colors to help in decision making:
Basics
This color wheel is included because no article about color is complete without this.
- Primary colors: main colors that form literally every other color. They cannot be formed by any means.
- Secondary colors: derived from primary colors being mixed.
- Tertiary colors: derived from primary and secondary colors being mixed.
The main takeaway is that you know your primary, secondary and tertiary colors. This will come into play a little later.
This is a great segue into UI design’s more important color principle.
60–30–10 Rule
This is the ‘golden ratio’ for color proportions. The Rule comes from interior design; it works very well for UI design as it creates balance and helps the user to navigate with ease.
The goal is to have 3 colors — primary/main, secondary and tertiary/accent.
- Primary/main is used for 60% of the design. This neutral color gives room for the secondary and accent colors to stand out.
- The secondary is used for 30% of the design. This is a middle ground that compliments the primary and accent colors. When designing for a brand, this color tends to be the secondary color for the brand.
- The accent is used for 10% of the design. This helps ‘accessorize’ the site by giving pops of colors that keep the viewer’s attention.
Even if it feels inadequate, 3 colors are all you need to make an engaging design.
Sticking to the 60–30–10 Rule will be key to creating balance in circumstances where more color is needed.
Now, let us go back to the color wheel to better understand color properties and schemes that adhere to the above Rule.
Color Properties
Here is color are the essential color properties:
Hues is a fancy term for the word ‘color.’ Hues are pure colors without any other color properties. There are a limited number of hues. Most of the colors we interact with have any or all of the other color properties.
Tone is also a fancy term for the word ‘saturation.’ The tone of a hue is the hue mixed with black and white (a.k.a gray). A wide range of lighter and darker tones than the original hue can be created based on the amount of white and black added to the hue.
Shade is a term is often confused with the tone of a color. A shade of a color is the hue mixed with black; there is no white. Shades always darken the hue.
Tint is most often the forgotten term as it is grouped with shade. A tint of color is the hue mixed with white. Tint always lightens any color.
Now that we know the color properties let us look into color schemes that help pick a color palette.
Color Schemes
These are the main color schemes to know:
Analogous: a scheme with 3 colors next to one another on the color wheel.
Pros: consistent theme (e.g., warm, cool)
Cons: soft color contrast
Tips: avoid combining warm and cool colors, don’t have too many colors
Complementary: a scheme with 2 colors on the opposite ends of the color wheel.
Pros: provide the most contrast possible and draws the most attention
Cons: hardest to find balance
Tips: pair warm and cool colors, avoid desaturated warm colors, use one color dominantly and the second color as secondary/accent
Monochromatic: a scheme that only uses one color in different shades, tones and tints.
Pros: cohesive and clean look, easy to manage
Cons: lacks extreme contrast, no vibrance
Tips: use the color properties to your advantage and to create contrast
Split complementary: a scheme with a primary color and 2 adjacent colors.
Pros: provides the complementary contrast with the cohesiveness of analogous/monochromatic schemes
Cons: hard to find the balance
Tips: aim to use this as it offers the best of complementary and analogous color schemes, avoid desaturated colors
Triadic: a scheme with 3 colors that are equally spaced on the color wheel.
Pros: harmony within the colors
Cons: average/overpowering contrast based on the colors picked
Tips: avoid picking colors with the same color properties, use one color as primary, and the other 2 as secondary and accent colors
Tetrad/rectangle: a scheme with 4 colors that are equally spaced on the color wheel, forming a rectangle.
Pros: high color variety and vibrance
Cons: hardest to find balance
Tips: avoid pure color in equal amounts, try to balance scheme with varying the % of color used
Square: a scheme with 4 equally spaced colors such that they form a square.
Pros: high color variety and vibrance
Cons: hardest to find balance
Tips: avoid pure color in equal amounts, try to balance scheme with varying the % of color used
Diad: a scheme with 2 colors separated by one color on the color wheel.
Pros: cohesive
Cons: lacks extreme contrast
Tips: avoid combining warm and cool colors, don’t have too many colors
The color properties and color schemes can be combined in picking the best possible color scheme for your designs.
Other Tips for Picking Color:
Color Psychology + Perception
The colors are interesting. They have this duplex nature that induces ‘psychological’ effects that are considered universal; on the other hand, the perception of color is considered subjective, based on the person’s experience, culture, etc.
Color psychology can be used to one’s advantage and is one aspect of a color palette. Still, it shouldn’t be the end of all of picking colors.
As mentioned earlier, color perception varies based on the person. It would be hard to account for every person’s perception of color. This conundrum is only furthered by every culture having different associations for each color.
Another issue with relying on color psychology is the inevitable practicable cliche it would be categorized into. They are often oversimplified and ignore the contrasting meanings for every color.
However, this doesn’t mean one doesn’t research the used colors. Look into the potential meanings and psychology of color, assess them based on your design goals, and then decide what works best.
Grayscale
One of the easiest ways to check the contrast and harmony of your color is by converting the design/color palette into a black and white image. You can change the color properties or even the color scheme to achieve the best contrast based on the results.
Using Pure Black
Most of the print media we interact with tends to use pure black. However, using pure black (#000000) for digital media isn’t ideal, especially for user experience and accessibility. Pure black is overpowering, strains the eyes and reduces the reading stamina of users.
Instead, using darker shades of gray is more ideal and can still help achieve the goal.
Using Red and Green Without a 3rd color / Adequate Contrast
Other than the connotation of Christmas, red and green being the main colors affects accessibility for colorblind users. The most common is red-green color blindness, requiring another color for contrast or make decisions that will help in providing contrast.
It should be noted that there are other types of color blindness. They are less common than red-green color blindness. The red-green is a starting point and can be used as a foundation to accommodate users with lesser common color blindness.
Color Palette Generators
The internet is your friend. There is numerous color palette generators/inspiration. They can function as a starting point to build your color palette, find the missing piece, and provide inspiration.
Some color palette generators and inspiration sites will be linked below:
https://www.canva.com/colors/color-palette-generator/
https://color.adobe.com/create/color-wheel
Sources
https://creativemarket.com/blog/5-color-choices-you-absolutely-must-avoid-when-designing
https://www.behance.net/gallery/99933093/Color-Palette-Prototyping-with-the-60-30-10-Rule
