How to use colors in software

Colors have a bigger impact on software than you might think: they help you quickly see if you did something wrong, if you succeeded, and they can make you feel calm, energized, or even tired.

Through colors, you can consolidate your app’s visual branding - you know Spotify is green and YouTube is red, for instance - and you can reach your target audience easier. You can use it in UX to highlight links, to give error messages or to show an action went through.

And so, colors are a powerful tool in software, it can help guide users through your app, as well as make your app easier to identify & more memorable.

So in this article, we’re going to have a proper conversation about colors in software - how to make the best use of them & how to use them to your advantage.

Here are a few ideas we’re going to cover:

1. Using colors in app branding - the psychology of colors
2. Using colors in app UX - communicating through color
3. Usability rules for colors in software
4. The good old debate: dark mode or light mode? Which one to use and why

Using colors in app branding - the psychology of colors

Colors are a great way to express certain emotions and to make it clear who your audience is. Colors set your app’s tone (happy, calm, energetic), your audience’s age (vibrant colors for younger users and muted, neutral colors for mature users), and they can also act as an identifier for your app among users.

What different colors represent, psychologically. Source: https://www.pyperinc.com/blog/the-psychology-of-color

Here is what major colors can communicate in software:

Black

Typically considered a non-color, black is minimalistic, classic and elegant. It’s great for serious software or apps that don’t need any punchy colors. Great for mature audiences and a staple for text, borders and shadows.

Red

Starting off in all color wheels, red is a bold, energetic, fiery color. Red is most commonly used in error messages, but some brands use it for their branding as well. It exudes power and urgency, and it’s also often associated with love.

Orange

Orange is another joyful, energetic color. It’s punchy and vibrant, so it’s great for younger audiences. It’s a versatile color you can use in a variety of apps, and you can easily combine it with earthy tones like green or brown.

Yellow

Yellow is another color you’d often use for warnings. Yellow is a moderate warning color - the situation is bad but can still be fixed. Otherwise, it’s yet another energetic, fun, cheerful color. Due to its low contrast, we don’t recommend using it too much against white backgrounds.

Green

Green communicates energy, vitality, nature, and peace. You can use green in a lot of apps relating to nature, the environment, agriculture, food&wellness, health, and so on. It’s also used for success alerts in app UIs.

Blue

Blue is a calm color, it exudes trust, stability and confidence. It’s a great color to use in both software and branding. You can often combine it with pink or purple, or go across the color wheel towards orange.

Purple

Purple is another fun, power-inducing color - depending on what shades you end up using. It can be calm and soothing in pastel tones, but stylish and energetic in punchier tones.

Pink

Pink is often associated with femininity, softness, calm and romance. It’s a great color to use if you’re specifically going for a feminine-centered audience (as cliche as that might sound, pink has regained popularity in recent years).

How to make use of colors in software

In the case of building software, it’s common practice to pick a primary brand color, a secondary highlight color, and a series of neutral shades to use for text, shadows and borders. And so, the complex color palettes you might have seen online (containing 4 or 5 colors) are actually overkill for a piece of software, especially admin panels.

Most commonly, especially in SaaS software or business-facing apps, your neutral shades will be used the most while your primary color will be that occasional pop of color, or a piece of branding.

Source: https://digitalsynopsis.com/design/how-to-apply-color-to-user-interface/

How about customer-facing apps? Use the 60-30-10 rule. This rule states how much of each of your colors you should use in your designs. Your primary color should cover 60%, the secondary 30%, and your accent color 10%.

This ensures that your color palette isn’t used chaotically or in an overpowering way, and that customers can tell what the main brand color is, vs accent colors. Using all of them evenly can lead to a color-block effect which isn’t pleasing to the eye in software.

How to pick what colors to use in your software

There are rules to how to distribute colors in a piece of software, but what about what colors to choose in the first place?

Colors are a major part of a company’s branding, and if you want your software products to be consistent, it’s best you stick to a specific color palette that matches that branding. If your main brand colors are blue and white, those will also be the main colors used in your software products.

But if you don’t have a specific color palette already, here’s how to make that choice:

1. Decide who your audience is. Here is an example of a target audience: 20 to 30 somethings who have busy schedules but have trouble staying organized, upbeat people with a lot of energy and time to manage but have trouble actually managing it. The younger and more upbeat your audience, the more tones of orange, yellow, purple or red you can use in your branding.
2. Decide what your tone is. Does your business deal with serious things like documents, taxes, maybe even funerals? Or does your business handle animals, travel, food or entertainment? As we’ve already said, the more upbeat, the more color you can use. Is your business serious, does it express black and white? Is it fun and colorful? Sit down with your team and decide what your tone is. If you can’t decide, or your tone isn’t a clear “extreme” - such as happy or sad - go for neutral tones such as cream, blue, or black & white. In the apps we’ve worked with, these colors have been the most universal.
3. Decide your brand’s identity. What does your business & software stand for? What do you actually do? Who actually are you and what do you bring to the table? Aside from picking colors to suit your audience, you can also pick colors that simply suit your business. If you’re in agriculture, go for green and orange. If you’re in education, dark navy or burgundy works well. If you’re doing something health-related, pastel blue or pink might work.

Refer to the color descriptions we offered earlier and pick what suits your business & software the best. You can also look at your competition for inspiration, but be original - stealing someone else’s branding can lead to legal trouble.

Using colors in app UX - communicating through color

Colors are a great way to communicate visually. Sometimes it’s enough to add a pop of red to let users know they’re doing something wrong. Through colors, you can quickly communicate without words and help users move faster.

Here are places where you can communicate through color in your software’s UX:

• Alerts are the most common place you’d communicate through color in an app’s UX. Once a user fulfills a task and they see a green alert, they’ll know they did it right. The opposite goes for red or orange.
• Error messages. You can turn input borders red when users fill them wrong. It’s a quick way to visually let them know they need to re-type something.
• Links or text buttons. It’s easy to figure out what element is a button - it’s common knowledge. But if you’re adding a link or creating text buttons, those will need to be in an unique, highlight color. It can be your secondary color or whichever is used a little bit less.
• Info boxes. Medium tones of gray can be used for info boxes that have to stand out from regular text. You can also add info icons to make it stand out even more.
• Status indicators. In some app types, it’s easier to use color instead of text to indicate status. The best practice is using traffic light colors - green, yellow and red.
• Yes or no buttons or save/cancel buttons. You can quickly guide users through positive vs negative options, such as buttons that say “yes” or “no”, meaning green and red. Or you can use your primary color for “save” buttons, a neutral shade for “cancel” and red for “delete”.

Through color, you can alert users much faster & easier without needing text or sound. It’s a quick way to visually guide them through your software.

Here are a few tips on using colors in UX:

• Don’t make your greens and reds overpowering. Yes, we want to catch users’ attention through these colors, but we don’t need to blind them as we do so. Use soft shades that fit your primary and secondary colors.
• Avoid low contrast. Don’t put white text over pastel backgrounds unless you’re marking a disabled element. You can use this tool to check if your elements pass common accessibility rules.
• Pick colors that are neither too vibrant, nor too desaturated. Intense, vibrant colors are great in print, fashion or TV. But not as much in software. Go for soft shades that work well against white and dark grays. Test multiple color combinations until you find one that both looks good & works well. 

Colors in dark mode vs light mode

Your choice of colors in software can change drastically if you use dark mode vs. light - which is to be expected. From black text against light gray backgrounds to white text against dark backgrounds: this switch isn’t just about inverting colors but also about finding the right balance between hue, saturation and color intensity.

When building software, whether you go for dark or light mode shouldn’t be based on your personal preferences. Here’s how to choose which one to go for:

• Think how people will use your software. Video and photo editing software always come in dark mode: it helps colors pop out better and it doesn’t tire one’s eyes after hours of using them. And so, if your software is usually used for many hours on end and can feature strong, punchy colors, dark mode is a better choice. Content management systems, mobile apps, productivity software, wellness apps, all of these can go for light mode.
• Think about your audience type. Younger people tend to prefer dark mode as they look at screens more often - which causes more eye strain - whereas older people are accustomed to seeing dark text on top of light backgrounds and are more likely to be wearing prescription glasses already. Setting aside eye health, it’s also a question of familiarity.
• Consider your visual branding. Your visual branding should help guide your software’s branding. And so, if your current branding looks better against light backgrounds, that’s your cue to go for light mode.

Design by: Bac Nguyen

But it’s not just the choice between dark and light that we have to think about. When discussing colors in software, there are rules you should follow when choosing either side.

Here are rules to follow when building software in dark mode:

• Don’t go full black. Go for dark gray tones, as lots of white text against a fully black background can hurt people’s eyes.
• Make sure your accent colors are visible. A darker color as the primary shade means clashing with your background. Since accent colors are supposed to stand out, go for lighter tones in dark mode.
• Revert text colors. Stick to the lightest tones for important pieces of text and light grays for subtitles or subheadings.
• Don’t go too neon. You might feel tempted to pick stronger, punchier accent colors to make sure they stand out. But that can be tiring to the eye, and it could make user experience worse.

Here are rules to follow when building software in light mode:

• Follow contrast rules. Using very light grays for text decreases readability. Anything you want to be visible should be visible enough - especially for users with disabilities.
• Don’t do too much white. Using light gray backgrounds instead of pure white and mixing those with white headers and sidebars add more movement and dimension to your pages. It makes apps look less stale to users.
• Use soft-toned colors. Neon colors are hard on the eye regardless of background. Go for mid-toned, soft colors.

And last but not least, if you can’t decide between light or dark mode - do both. Offer users a switch so they can make the choice for themselves. This helps user experience as you let everyone pick what works best for them. It’s more work for you, but if your audience is split in half regarding this issue - it might be your best choice.

In conclusion, colors have a major impact upon software, and you need to choose them wisely. With colors, you can express emotions, warnings, set the difference between different elements, or cause eye strain, scare or confuse users. The key is finding a good middle ground, knowing your users and their needs, and being consistent.

If you’re looking for help managing colors in your own software, contact us and let’s see what we can do together.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.