7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UI Design

10 Tips For Using Colors in UI Design

Scroll to top
Read Time: 8 mins

Color is one of the most critical tools in a designer’s toolkit. It is an essential part of the visual language that product designers use to communicate with their audience. User interface color can serve functional purposes, such as giving users visual hints about where they should look next when they scan a page, but it can also serve decorative purposes such as conveying a specific mood.

In this article, I want to share 10 practical tips on how to choose colors and use them in your user interface design.

1. Use Brand Colors as a Basis for Your Color Palette

Most brands have an established palette of brand colors. Those colors are typically used in the brand’s logo, print and promotional material, online presence, and packaging. It’s worth reusing brand colors in UI design because they make the UI look familiar to people familiar with your brand.

For example, you could use a brand’s primary color as a color for functional elements such as call-to-action buttons. Notice how McDonald’s uses the variant of its iconic yellow color for the Order Now and Download the App buttons on its website:

McDonalds actively uses tints of its yellow color on its website. Image by McDonalds.McDonalds actively uses tints of its yellow color on its website. Image by McDonalds.McDonalds actively uses tints of its yellow color on its website. Image by McDonalds.
McDonalds actively uses tints of its yellow color on its website

If you want to use a brand color as a decorative element, you could use it for the background. For example, below, you can see how Slack uses one of its primary colors (#4A154B) as a background color for the landing page. This purple reinforces Slack’s very strong visual identity.

Slack landing page. Image by Slack.Slack landing page. Image by Slack.Slack landing page. Image by Slack.
Slack landing page

How to Create Your Own Brand-Based Color Scheme

You can use tools like ColorBox by Lyft to create a ready-to-use user interface color scheme from your brand colors. Define Start and End colors from the list of your brand colors, and let the system generate a scheme for you.

Creating a color scheme from brand colors using ColorBox. Image by ColorBox. Creating a color scheme from brand colors using ColorBox. Image by ColorBox. Creating a color scheme from brand colors using ColorBox. Image by ColorBox.
Creating a color scheme from brand colors using ColorBox

2. Take Inspiration From Nature

What should you do if you don’t have established brand colors? You can take inspiration from nature. One good thing about the user interface color schemes created from nature is that they are well-balanced from the start. The process of creating a color scheme is straightforward— take a picture of nature and use tools like Adobe Extract Theme to extract colors from it.

Color extracted from the shot of the autumn forest. Original image by Sebastian Unrau (UnSplash)Color extracted from the shot of the autumn forest. Original image by Sebastian Unrau (UnSplash)Color extracted from the shot of the autumn forest. Original image by Sebastian Unrau (UnSplash)
Color extracted from the shot of the autumn forest. Original image by Sebastian Unrau (UnSplash)

3. Consider Color Psychology

Different colors can mean different things, and people unintentionally associate colors with all aspects of their own experiences. For example, in western countries, people typically associate red with energy and danger, while blue is generally associated with calm and relaxation.

If you design a meditation app, using red as a primary color might be a bad idea. That’s why it’s important to remember the specifics of the product and color meaning in the markets you aim to be in.

Meditation Mobile AppMeditation Mobile AppMeditation Mobile App
Calming blues in this meditation app UI kit

4. Stay Away From Pure Black Text

Pure black text (#000000) on white background (#FFFFFF) can easily cause eye strain when users have to read text for prolonged periods. This happens because pure black on a white background creates too much luminance contrast and makes the eye work harder. You can often replace pure black with dark gray without any problems with the user interface color scheme.

Using pure black vs. dark gray for reading. Image by Nick Babich.Using pure black vs. dark gray for reading. Image by Nick Babich.Using pure black vs. dark gray for reading. Image by Nick Babich.
Using pure black vs. dark gray for reading

5. Limit the Number of Primary Colors in Your Design System

Primary colors (as we’re referring to them here) are those most prevalent in your user interface. You might also see them called “base colors”.

Using too many primary colors is one of the critical mistakes that many UI designers make. Excess of everything is bad. Using too many primary colors in the UI is like sending many different signals to your users. Overuse of primary colors will cause users to ignore the colors they see. It’s recommended you start with a small number of primary colors–aim for one or two that perfectly represent your brand.

Figma Design SystemFigma Design SystemFigma Design System
Color variants in a design system template on Envato Elements

Every time you think that you need another primary or base color, you should stop yourself and experiment with already existing colors. It’s relatively easy to create lovely accents using your primary colors. All you need to do is mix the primary color with white (tint) or black (shade). For example, below are a few accents of a primary blue created using Adobe Color.

Accent colors created using Adobe Color. Image by Nick Babich.Accent colors created using Adobe Color. Image by Nick Babich.Accent colors created using Adobe Color. Image by Nick Babich.
Accent colors created using Adobe Color. Image by Nick Babich.

6. Define Rules for Using Individual Colors

Color can be used to guide users through the product and helps them understand the meaning of individual elements in the user interface. For example, when users learn that text colored in blue on your website represents links, they don’t have any problems finding links on your website. But this works only when you use color consistently.

Once you define colors and their rules in the UI, you should include those rules in your product’s design guidelines and share the guidelines with all people involved in product design. This will increase the chance that the team will follow the rules when designing a product.

The IBM Carbon Design system has well-defined rules for using colors. Image by IBM. The IBM Carbon Design system has well-defined rules for using colors. Image by IBM. The IBM Carbon Design system has well-defined rules for using colors. Image by IBM.
The IBM Carbon Design system has well-defined rules for using colors. Image by IBM.

7. Ensure Your Colors Are Accessible

Accessible design allows all users to use your product, and color plays a tremendous role in creating accessible products. Poor color contrast is a common accessibility issue of many user interfaces. It creates a terrible experience for people with visual impairment, making it harder to distinguish information on the screen.

You must constantly check color contrast for text and icons in your UI. There are plenty of tools that can help you with that. WebAIM Contrast Check is a tool that will help you to ensure that your UI complies with the Web Content Accessibility Guidelines (WCAG).

Testing color contrast using WebAIM Contrast Checker. Testing color contrast using WebAIM Contrast Checker. Testing color contrast using WebAIM Contrast Checker.
Testing color contrast using WebAIM Contrast Checker.

When testing your UI, pay special attention to disabled states. A disabled state is typically created with low contrast, creating bad readability for displayed text and icons. WCAG requires at least a 4.5:1 contrast for text and images of text, even for disabled states!

Poor color contrast vs proper color contrast for labels of disabled buttons. Image by Nick Babich.Poor color contrast vs proper color contrast for labels of disabled buttons. Image by Nick Babich.Poor color contrast vs proper color contrast for labels of disabled buttons. Image by Nick Babich.
Poor color contrast vs proper color contrast for labels of disabled buttons

Read up on color accessibility guidelines with these tutorials:

8. Don’t Use Color Alone to Communicate System Status

Never use color alone to communicate system states such as error, info, or success. Users who suffer from visual impairment, such as red-green color blindness, will struggle to understand what’s happening in the user interface simply because they cannot distinguish the colors.

When you show an error message, or a message about a successful operation, always add an accompanying label and/or icon to help users understand what’s happening. Chrome DevTools offers tools that allow you to experience your product the way people with disabilities experience it.

Using color alone to communicate an error message vs. using color along with an error message & icon. Image by Nick Babich. Using color alone to communicate an error message vs. using color along with an error message & icon. Image by Nick Babich. Using color alone to communicate an error message vs. using color along with an error message & icon. Image by Nick Babich.
Using color alone to communicate an error message vs. using color along with an error message & icon

9. Test Your Color Scheme

You must ensure that the colors you choose to use in your UI work harmoniously. While it’s technically possible to use automatic tools for testing your UI, it’s much better to conduct a manual observation. Most designers have a trained eye and can quickly tell when something doesn’t look correct. So it’s recommended to include color scheme testing as a part of manual QA activities that the team conducts before releasing a product to the market.

When testing a user interface color scheme, always check how your product’s color scheme works under various lighting conditions. A color scheme often looks bad when users access products outside, in sun glare.

10. Conduct Interface Inventory on a Regular Basis

The number of colors used in a product will grow as the project evolves. The more colors you use, the harder it will be to control how they are used. That’s why it’s recommended to conduct an interface inventory procedure at least once during the release cycle. This procedure allows you to categorize components and styles that make your product. 

This is a straightforward procedure; all you need to do is use a tool that will tell you how many unique fonts, colors, and components are used in your UI.

If you design a website, you can use tools like CSS Stats to see how many unique colors you have in your cascade style sheets (CSS). The next step is to understand how those colors are used. Remember that you need to understand both the context of use and the number of times the color is used. If you learn that a particular color is used only once in your UI and is nearly the same as the color used multiple times, you can make the first color a duplicate and eliminate it.

Conclusion

Color has a tremendous impact on the perception of a product. Along with typography, visual flow, and spacing, colors create a foundation upon which each product is built. Properly selected colors not only improve the product’s usability but also positively affect user experience.

But choosing the right colors is not a one-and-done activity. You will likely iterate a few times before finding a user interface color palette that works well for your audience. That’s why collecting feedback from your users and making changes based on that feedback is so important.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.