Single Blog

Our Daily Vibes in our Ohana

UI/UX Design

Cracking the Color Code in UI/UX Design

Our working days have been filled with many interesting training sessions and workshops since the formation of our Learning Hub, A19 Academy. Thanks to the talented Thao Nguyen, who is one of our experienced UI/UX designers at DataHouse, we were able to add a very illuminating and informative knowledge session on “How to use Color in UI/UX in Design” to our library. 

The role of color in communication

In the same way, writers use words to communicate with their readers, designers use visual language to deliver the right experience. Color is one of the most powerful tools in our visual language.

The right color palette combination can influence our mood and motivate visitors to take action. Because there are so many possible color combinations, it can be a challenge to decide on the color scheme to convey the right message.

Where to start with color in UI/UX design?

Always start with greyscale

Designers spend a significant amount of time on this very first step, not only because it’s important, but because it can be a lot of fun too. It’s helpful to maintain focus because your attention will be on creating a great visual hierarchy for your layout, and not on selecting the color for call-to-action buttons. 

Select Primary Color and Keep it simple

The more colors you use, the harder it can be to achieve balance. However, using too many colors is a common design mistake. It can be a pitfall for non-experienced designers because colors are often chosen randomly and then one can end up with a rainbow effect, making the end result or product too distracting.

As a general rule, it’s recommended we stick to a maximum of 3 primary colors in the color scheme. 

A common rule to set the color in a design

After selecting the primary colors, we start focusing on the well-known decorating rules. In ordinary life, people apply the 60-30-10 rule in both interior and exterior design because it brings balance to the color vibe.

  • 60% Neutral color: White, light grey, light shade of primary background, decoration, etc.
  • 30% Secondary color: Supports the primary color, but is different enough to set the lower priority actions, etc.
  • 10% Main brand color: Create focal Highlight, key messages, CTA, etc.

This is not the only way one can be creative, as long as we find the solution to solving the problem.​

A Basic Color Scheme for a product

Color can also be an effective tool to highlight specific elements in the interface

Consider some aspects when choosing of color

It’s important to remember who the end-user is and take these things listed below into consideration while doing so:

  • The Emotional impact
  • The Purchasing Decision
  • Their Hobbies
  • The Genders
  • The Culture
  • Religion, Trust and Confidence etc.

Nuances in color:

  • Red – Power, passion, danger, importance
  • Orange – Playful, energetic, cheap
  • Yellow – Cheerful, friendly, attention-seeking
  • Green – Natural, safe, fresh
  • Blue – Calm, reliable, trustworthy
  • Purple – Luxury, romantic, spiritual
  • Pink – Femininity, youth, innocence
  • Black – Sophistication, edgy, mysterious
  • White – Cleanliness, purity, health
  • Gray – Neutral, formal, sophistication

Consider accessibility

Color blindness

Approximately 8% of men and 0.5% of women are affected by some form of color blindness. Red/green color blindness is the most common. 

Colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), and that’s why it’s important to use multiple visual cues to communicate important states in your product. 

In addition to color, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.

Color Contrast

When you’re using colors in text, be aware that placing two colors with low-value contrast next to each other can make your copy very difficult to read. 

  1. The following W3C recommends contrast ratios for body text and image text: Small text should have a contrast ratio of at least 4.5:1 against its background.
  2. Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors.

  1. Tools: https://webaim
  2. Figma plugin A11y – Color Contrast Checker
  3. Chrome extension Colorblindly

Color Inspiration

Here are some sources of inspiration where UI/UX Designer team figures the color scheme from Photographs of nature, Music videos, or ready-made color palettes

We hope the rules and guidelines mentioned above will be helpful to in your pursuit of the right color scheme. Always remember that the best way to become great at this art is to keep creating and practicing.