How do I choose colors that align with the app’s purpose and functionality?

TL;DR 

Align colors with the brand, consider the target audience, take into account principles of color psychology, prioritize accessibility, and establish a clear visual hierarchy.

Pick a primary color that matches this goal and resonates emotionally with your target audience, like blue for trust in finance apps or green for growth in wellness platforms. Complement this with two to five secondary colors that enhance but don’t overshadow the primary hue. Use complementary or analogous colors from a color wheel, including an accent color for calls-to-action. Opt for a background color that guarantees text readability and contrasts well with other colors, and choose a soft shade for text to ensure comfort.

Deep dive

When you select a color scheme, consider several key factors. 

Understand the brand’s purpose

To effectively select colors for a web application, start with a clear vision of the product's purpose. Is it to inform, sell, engage, or assist? Color choices should consistently reflect an established brand identity. 

Review the brand guidelines and extract the company's primary and secondary colors, if available. Use these predefined colors as the foundation for the application's color scheme to maintain a cohesive brand experience across all touchpoints.

If there is no branding yet, start searching for the right color fit to these primary criteria:

• Mission and values: What is your brand's core purpose? What values does it stand for? (e.g., sustainability, innovation, playfulness);
• Brand personality: What kind of image do you want to project? (e.g., trustworthy, luxurious, energetic).

Use common color palettes to understand the meaning of each color, but ensure they align with the perceptions of your app’s target audience.

Determine your audience and goals

Conduct user research to gain insights into your target audience's color preferences and associations. Understanding their demographics, interests, and cultural background is crucial. 

• Demographics: Age, gender, location, socioeconomic background. These factors can influence color preferences. Younger audiences might respond well to brighter, more energetic colors, while older audiences might prefer calmer tones;
• Interests and values: What are their hobbies, lifestyles, and priorities? Consider colors associated with those interests. A fitness app might benefit from colors associated with health and activity (e.g., green, blue);
• Cultural background: Color meanings can vary across cultures. Research how your target audience perceives specific colors.

Understand the UI’s purpose

Choosing app colors is about helping users interact with the app as intended. By selecting the right colors, apps can become much more user-friendly and even enhance user productivity. Let’s take a look at color scheme examples of two giants – Hubspot and Notion. 

Hubspot, with its many features, uses color to provide clear directions, helping users quickly find what they need. Think of traffic lights – bright colors highlight important elements, while less important ones use secondary colors and stay in the background. This prevents information overload. Hubspot also uses a few main colors, like a city with a consistent architectural style, giving it a professional look and making navigation easy.

Source

Notion focuses on making it easy to take notes, read, and think clearly. It’s akin to black text on white paper but also offers users pre-made color sets or the ability to mix their colors to personalize their note-taking space. The colors are primarily soft to keep the environment calm and free of distractions.

Source

Choose a primary color

Choose a primary color that reflects the application's purpose and the emotions you want to evoke in users. For example, blue can convey trust and professionalism, often used in finance and tech; green can represent growth and freshness, suitable for eco-centric or wellness apps.

Ask yourself the following questions: 

• Associations-related: What emotions or perceptions do the considered colors evoke? Are these associations consistent with the intended brand message and audience preferences?
• Purpose-related: How do the selected colors contribute to conveying the desired emotional response? Are there alternative color choices that might better align with the brand's purpose?

Duolingo, a language learning app, uses a vibrant green as its primary color, symbolizing growth and positivity. The bold, playful color palette complements its friendly, gamified approach to learning.

Source

Select secondary colors

Choose two to five secondary colors that complement the primary color. These secondary colors should not compete for attention but should help to create a cohesive and visually appealing hierarchical palette. Consider the following:

• Brand values: Choose a color palette to reflect your brand values through the secondary color. A fitness brand with a primary blue for trust might use a secondary yellow for energy and dynamism;
• Contrast: Ensure sufficient contrast between the primary and secondary colors for optimal UI elements hierarchy visibility. Use online contrast checkers like this one to ensure accessibility for users with visual impairments.

Trello, a popular project management tool, uses blue as its primary color, evoking a sense of trust and productivity. The use of bright, contrasting colors for labels and cards enhances usability and information hierarchy.

Use a color wheel to find complementary colors. Consider analogous colors for a subtle and harmonious color palette. Choose an accent color for call-to-action elements. Create neutral color and extended color palettes. Find more information on secondary colors in this article. 

Select a typeface color

Typeface color is crucial for readability. While solid black is common, it isn't always the best choice. It can be too harsh on the eyes, especially against a white background. Consider using softer shades like dark gray or a darkened version of your primary color, but be careful not to create a muddy color.

Follow Web Content Accessibility Guidelines (WCAG)

Prioritize accessibility. Use online tools like WebAIM's Contrast Checker or Adobe Color's Accessibility Tools to ensure your selected colors meet WCAG contrast ratio requirements for text and interactive elements.

Document your visual hierarchy

Create a color hierarchy that assigns specific colors to different types of information or actions. For example, use a bright, contrasting color for primary CTAs, and more muted tones for secondary actions.

Then develop a style guide that documents your chosen color palette, including hex codes, RGB values, and usage guidelines. Share this resource with a development team to ensure consistent implementation.

Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What emotions and associations do we want our audience to feel?
• How can we use color psychology to evoke the desired emotions and behaviors in our users?
• How do the chosen colors reflect and enhance our brand's mission and values?
• Do the chosen colors resonate with our target audience's preferences and expectations?
• Are there any cultural or industry-specific color considerations we should keep in mind?
• Are the chosen colors accessible and inclusive, meeting all necessary accessibility standards?
• How can we use color to create a clear visual hierarchy and guide user actions?
• How do our brand colors look on digital platforms?
• How can we ensure consistent color usage across different screens and devices?

Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Using too many colors, which can overwhelm users and create visual clutter.
• Relying solely on color to convey information, which can exclude colorblind users.
• Neglecting color contrast and accessibility guidelines, leading to readability issues.
• Overusing bright or saturated colors, which can be harsh on the eyes and fatiguing.
• Failing to consider the emotional and psychological impact of color choices.

Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• How To Choose An Eye-Catching Website Color Palette by Jacqueline Renouard
• Color Schemes for Apps – How to Choose One by UXPin

Keep exploring 

Never stop growing 🤓 Explore resources thoughtfully handpicked by Cieden’s designers. 

The Complete Guide For Choosing Colors, Color Theory for Designers, Part 1: The Meaning of Color

Useful tools 

These tools will make your job easier and more effective.

• Coolors – add the hex code of the color and get colors that complement it. 
• ColorSafe – search colors by type to find your perfect green, red, or blue. 
• ColorSpace – check out if there are better color schemes.