How do I choose the primary color for the app?
TL;DR
To choose the primary color for your app, start by considering any existing brand identity and colors. If a client already has an effective brand color, use that as your primary color, but adjust the hue, saturation, or brightness to suit the digital environment. If there's no established brand identity, understand your product and brand. The nature of your product, like a task-oriented platform or a content-focused app, greatly influences your color choice. Ensure the primary color resonates with your brand's identity, messaging, and values. Consider the emotional impact of colors, and choose one that conveys the desired emotions and enhances user experience.
Deep dive
Start by understanding if there's an established brand identity and colors. If the client has an effective brand color, that's your primary color. Remember, while consistency with brand identity is crucial, the color might need adjustments in hue, saturation, or brightness to suit the digital environment.
If there is no established brand identity, dive into understanding your product and brand. The nature of your product, whether it's a task-oriented platform like Jira or a content-forward app like Dribbble or Spotify, greatly influences your color choice.
Your primary color palette should resonate with your brand's identity, messaging, and values. It's essential to understand what your brand stands for and how you wish your app to be perceived. Is your app intended to be seen as innovative, trustworthy, or energetic? What emotions should the brand evoke? Each of these attributes can be subtly communicated through color. For example, a fitness app might use vibrant and energetic colors like red or orange, while a meditation app might opt for calming blues or greens.
Related reading: The Psychology of Color: How Valuable Web Designers Choose Colors
How the primary color impacts brand recognition
Choosing the right colors is crucial because it significantly influences how people perceive a brand. Using signature colors can boost brand recognition by up to 80%. Colors evoke specific emotions and shape consumer associations with a brand. By strategically selecting colors, businesses can enhance their brand's visual representation.
Take established brands, for example, McDonald's is instantly associated with red and yellow, while IKEA is known for its blue and yellow palette. Effectively using colors allows brands to express themselves compellingly.
Consider color psychology
Consider the emotional and psychological impact of colors to create the desired user experience. Assume your application aims to inspire a sense of trust, security, and productivity. Blues and greens can promote feelings of reliability and efficiency, while accents of yellow or orange can add energy and warmth to your interface.
Conduct competitor research
Look at the colors competitors use to ensure your app stands out in the market while staying within your niche’s recognizable standards. This will help you choose the best design colors for a web application that are both fresh and familiar to your users. Answer yourself the following questions:
-
- What colors are used by competitors: What are the main colors used in the product designs of competitors? How do these colors contribute to the competitors' brand identities and messaging?
- How can we stand out from competitors: In what ways can our color choices differentiate our brand from competitors? Are there opportunities to use unique or unconventional colors that set us apart?
- Are there industry trends: Are there any emerging trends or patterns in color usage within our industry? How can we use or diverge from these trends to position our brand effectively?
Spotify's branding position in the market
Analyze how your primary color works with other UI elements
The primary color, often used for key UI elements like buttons and links, should stand out without overwhelming the design.
In color theory, every color is defined by three key attributes: the hue, which is the name of the color; the saturation, which is the depth or intensity of the color; and the brightness, which measures the lightness or darkness of the color.
These attributes can significantly influence our psychological response to colors, making it important to experiment with them to achieve the desired effect. For example, a brighter hue can feel more energetic and lively, ideal for apps targeting a younger audience. In contrast, darker tones convey a sense of sophistication and seriousness, often preferred in business applications.
By experimenting with these properties, you can create a wide range of tones within a single hue, allowing for nuanced color schemes that align precisely with the app's purpose. Check out how it works in practice.
Modern design tools, such as Figma, offer a user-friendly way to manipulate these properties through the HSB (Hue, Saturation, Brightness) color system. This system is often more intuitive than the RGB model, which is primarily designed for digital screens, allowing for easier and more natural adjustments to color properties.
Ensure accessibility
Meeting accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), is crucial. The primary color should have a suitable contrast ratio to ensure readability and usability for all users.
How many primary colors should I have?
When it comes to selecting a primary color palette for your design, there's no hard and fast rule. However, it's common to choose from one to two primary colors. Usually, the first primary color works well on the light backgrounds, and the second one – on the dark backgrounds. Often, it's practical to include both dark (for example, #212121) and light (such as #f8f9fa) neutrals alongside your primary color for a well-rounded palette. We will talk more about neutrals further in this chapter.
Cieden’s primary colors on different backgrounds
Take Atlassian's design system as a real-world example. They use a primary color palette that includes neutrals, white, and blue. This combination not only adds boldness to their brand but is also strategically used across their products and marketing materials to guide the viewer's eye and emphasize key elements.
In their palette, blue (B400) is used for primary actions, buttons, and text links, as well as to signify progress and authentication. The neutral shade (N800) is predominantly used for body text and headings, while white (N0) serves as the background color for pages.
This approach illustrates how a thoughtfully chosen color scheme can effectively convey a brand's personality and highlight essential aspects of a design.
Atlassian's primary color scheme
Remember that a primary color will take approximately 60% of your UI, so pick it wisely.
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 pick the right colors for your website or app by Rachel How
- How To Select Colors: Step By Step by Flux Academy
- How to Build a Color Palette for Product Design by Maddy Beard
Keep exploring
Never stop growing 🤓 Explore resources thoughtfully handpicked by Cieden’s designers.