Ï㽶ÊÓƵ

Color

Ï㽶ÊÓƵ

Differences in  can have an . Many personal and cultural factors affect human experience of color, but some perceptions are widely shared: 

  • Warm colors (red, orange, yellow) are typically associated with passion, energy, and positivity.

    • Red is particularly interesting. Its connotations can be positive (passion, luck) and negative (anger, danger).

    • Red can have , including increased metabolism, heart rate, and respiration rate. 

  • Cool colors (green, blue, purple) are often associated with calm, order, and relaxation.

    • Blue is one of the most popular cool colours in product design. Blue has a wide spectrum of connotations depending on its depth and saturation.

    • Darker blues can feel serious and professional, while brighter blues can feel playful and energizing. Light blues are often perceived as soothing. 

  • Neutrals like black, white, gray, and brown are often associated with elegance or professionalism.

    • The personality of a neutral color is strongly influenced by the colors around it. Neutrals can feel serious if paired with darker or less saturated colors, or more playful when paired with brighter colors.

    • High-contrast combinations of neutrals can feel bold (or overwhelming, if taken too far). Combinations with less contrast create a softer look, but they can also feel boring if there's not enough contrast. 

Here are two layouts that start with the same neutral palette, but achieve different personalities through use of color:

Colorful homepage design

In the example above, colorful photography in a range of shades adds a playful personality to the site. The use of color in the announcements box contributes to an energetic, friendly look.

Layout with subdued colors

In the example above, the largest photo is black and white and the other photos are dominated by deeper blues. This gives a restrained, professional feel to the layout. This is supported by the neutral colors in the header and text overlays. 

When working with color, it helps to plan ahead. Consider:

  • Which colors align well with your site's personality? Which colors do you think will resonate with your audience?
  • Make sure your photography and other elements (like icons or illustrations) use color in a way that's consistent.
  • Consider using icons or illustrations to bring color into your site. Illustrations can be a great way to convey concepts and emotions that are hard to capture in photography.

Since color is subjective, it's helpful to gather feedback from your users to refine your color strategy.  is helpful for this, because you can easily target color as the differentiating factor.

Back to top