Using Color Psychology for Healthcare Web Design

Explore the use of color in healthcare and healthtech design and best practices for choosing colors based on psychology and color theory.

Color psychology is the study of how and why color impacts human emotions and behaviors. For instance, the color blue is commonly associated with tranquility and stability. In a field like healthcare, where patients are dealing with stressful and sometimes life-threatening matters, seeing the color blue may help ease their tension.

But does that mean that healthcare companies should all find a way to infuse their branding and web designs with shades of blue?

Not necessarily. Blue isn’t the only color that has a positive or helpful connotation in healthcare settings.

In this post, we’re going to look at how to use color psychology in healthcare web design. We’ll examine branding color trends in the industry, the significance of certain colors and real-world examples of creative and unique color choices that work well.

What the Data Says About Healthcare and Color

Let’s start by looking at healthcare company preferences and choices when it comes to color.

In data gathered by 99designs, these are the most popular colors used in industry-leading healthcare company logos:

• Blue: 85%
• White: 36%
• Green: 22%
• Red: 22%
• Black: 17%
• Gray: 10%
• Orange: 10%
• Yellow: 3%
• Brown: 2%
• Pink: 2%
• Purple: 0%

People who use 99designs to have their healthcare logos designed trend similarly:

“It’s also requested in over two out of every three healthcare logos sourced on 99designs. This choice makes perfect sense when we consider what customers associate with the color blue: knowledge, tranquility, security and trust. In the stress-filled environment of healthcare, where both well being and finances are vulnerable, blue is a tried-and-true way to show your competence.”

Now, this data only represents logos. Website color palettes are another story.

I did a bit of my own research to see if I could spot any major trends in logo colors as well as website color schemes. I looked around at the websites of 34 different companies in the healthcare and healthtech spaces. Specifically, I focused on the logo colors as well as the color schemes present above the fold.

Here is what I found:

In terms of website colors, 20 of the 35 sites I looked at had a shade of blue used in the color palette above-the-fold. That’s 57%. If you add in the sites that included teal coloring, it brings the total up to 22, or 62%.

I was hoping to find some clear trends when it comes to which types of healthcare companies use certain color palettes. There were really only two trends that I could nail down.

One was in insurance, which leaned strongly toward blue branding and color palettes. That makes a lot of sense considering how important it is for them to gain the trust of their customers.

For example, here’s what the top of the homepage on the UnitedHealth Group website looks like:

The other trend I found had less to do with the type of company and more to do with the composition of the color palette.

Fifteen of the 35 sites (or 42%) included a neutral tone like white, gray or beige within the color palette. Unlike some of the other sites that had super colorful palettes, there seems to be an almost equally popular trend toward a more balanced approach to color design.

Here’s an example from Hims of what that looks like:

I suspect this more muted approach to design has to do with studies like this one:

According to Color Theory: The Effects of Color in Medical Environments, researcher Sarah Babin found that a more tempered approach is what patients actually find pleasing in healthcare environments.

They were asked to choose from four categories. Here are the ones they preferred:

• Cool colors: 49%
• Warm colors: 29%
• Muted colors: 14%
• Bright colors: 7%

Now, her study looked at color and shade preferences in physical medical settings. However, I suspect these preferences translate just as well to digital, too, and that’s why we find many websites combining muted, natural colors with the occasional pop of color. It’s also why cooler colors like blue and green are so often the primary color in healthcare web design.

It’s not just about what people’s eyes prefer in terms of colors either. There’s a study from 2021 called “Effects on heart rate variability of stress level responses to the properties of indoor environmental colors: a preliminary study” that studied the impact of certain types of color on people’s heart rates.

Here’s a graphic from Psychiatry Advisor that sums up the findings:

In sum:

• Warm colors are usually associated with alertness. They have the potential to increase blood pressure, heart rates, as well as pupil dilation.
• Cool colors are usually associated with calmness. They have the ability to reduce one’s heart rate and blood pressure.
• Neutral colors do not usually evoke an emotional or physical response. Because of this, they’re a great way to balance out stronger colors and the emotions evoked by them.

So while the color blue may have once been the go-to color for healthcare—and still is in some more traditional fields like insurance and hospitals—it doesn’t have to be. If you can balance out strong, emotional colors like red with neutral tones, you can create unique and memorable color palettes while still sticking to the tenets of color psychology.

What to Do with Colors in Healthcare Branding and Design

In healthcare web design, you have to be incredibly mindful of how your design and content affect your users on an emotional level. But just because a warm color like red might be more stimulating than a cool color like blue, that doesn’t mean you can’t infuse your branding and designs with strong emotion-inducing colors.

By striking the right balance with your color palette, you can do some really interesting things with color that healthcare brands may have been too nervous to do in the past.

Blue

Blue signifies:

• Stability
• Safety
• Intelligence
• Tradition
• Maturity
• Tranquility
• Trust

This overwhelmingly positive color is heavily used in healthcare because of its calming and trust-building properties.

Aspen Dental’s primary blue color is what many of us envision when we think of a healthcare “blue”:

The dark blue is a safe and strong choice for this dentistry chain. While there are bright pops up green used for the buttons, most of the design relies on either very dark blues or soft baby blues.

Healthcare and healthtech companies offering modern solutions like iRhythm go with more experimental uses of blue:

In this hero section, we see a blue gradient background that goes from dark blue in the top-left corner to pink in the bottom-right. The headline text uses a similar gradient, with light-blue text fading out to pink.

This color palette plays around with that strong, trust-building dark blue color we saw in the Aspen example. However, it adds some light and warmth to it by including a brighter blue and pink. These lighter colors help draw our eyes to both the headline as well as the woman wearing the monitor in the hero graphic.

White

White signifies:

• Cleanliness
• Purity
• Peace
• Virtue
• Truth
• Clarity

White is a neutral color. Although it doesn’t invoke emotions in onlookers, it does have some strong connotations associated with it that are very desirable in the healthcare space.

White is also a very useful color in web design. It provides us with a clear, simple backdrop for text. White space (although it’s not always white in color) is also an invaluable tool in web design as it brings focus to important aspects of our designs, keeps things organized and so on.

Here’s an example from Amwell of how to make good use of white in web design:

The white background does a great job of making the content in front of it pop. On the contrary, the white text used in the blue sections at the top and bottom allows for easy reading.

Also, the white is a good balance for all of the blue. This way, users can focus on each section one at a time instead of trying to decipher where one starts and the other ends.

Green

Green signifies:

• Growth
• Fertility
• Prosperity
• Nature
• Balance
• Tranquility

Although it’s not used as frequently as blue, this cool color is particularly effective in healthcare web design. Not only can you use it as your primary color, but you can use it when adding accent colors to your site. The key is to find the right shades of green.

For instance, this is the hero section on the Zealthy website:

There are three shades of green present above the fold:

• The lighter green in the notification bar at the top
• The dark forest green “Sign Up” button in the header
• The green “Start your visit today” button in the hero section

These distinct colors help draw the visitors’ eyes to each component one at a time. The header background is also a shade of green, though it’s very subtle.

Combined with a neutral beige website background, all of these colors give this website a health-centric vibe.

In healthcare, it’s best to stick to “friendlier” green colors like the ones used here as opposed to shocking lime and neon greens. While those shades might still be considered cool, they won’t invoke as many positive feelings about nature and growth as the ones used here.

This isn’t the only way to put green to use in web design either.

I saw a lot of teal coloring on the websites I looked at. Like on LetsGetChecked USA:

This combination of green and blue works really well in healthcare design. For starters, it stands out from the more traditional uses of blue and green. It’s also not as intense of a color as green. So you can use a lot more of it without it feeling overwhelming.

Red

Red signifies:

• Passion
• Speed
• Excitement
• Energy
• Hunger
• Power

Red also has some not-so-positive connotations, like anger, danger and dominance. Because of this, some will tell you only to use red for emergency medical services, like urgent care and blood donation websites. But the following health companies are proof that you don’t need to limit yourself that way:

Cardinal Health, for instance, uses a bright red as its primary color:

Red is all over the place:

• Logo emblem
• Call-to-action buttons
• Callout block
• Arrows and bullets
• Search form button

How does Cardinal Health get away with using so much red? It’s because it’s all been balanced out by neutral colors. The majority of what you see above the fold is white or gray. If you scroll down the page or peruse other pages, you’ll find that a calming blue has also been brought into the mix to even things out.

Another way to make red work for you is to pick a less severe form of red. For instance, this is what the homepage of SteadyMD looks like:

Red blankets the background of this webpage. It’s also the color used for the logo, buttons, links and highlights.

Despite this, the page doesn’t feel alarming or overwhelming. That’s because most of the shades of red used here are much softer and cooler than the fire engine red you see on the Cardinal Health website.

Similar to Cardinal Health, you’ll find a juxtaposition of blue colors with all the red, which helps to even out the warmth of the page. So while neutral colors like white, gray and beige can help give a webpage a balanced feel, so too can combining cool and warm colors.

Black

Black signifies:

• Luxury
• Authority
• Sophistication
• Formality
• Expertise
• Drama

Unlike other industries where black-themed websites may be a common sight, we don’t find this in healthcare. Sure, there are black logos, like in the case of Stryker:

However, we really don’t see large swaths of black on healthcare or even healthtech websites.

One reason this might be is because black is synonymous with luxury. And the last thing healthcare companies want patients to think of when seeking care is how expensive it’s going to be.

We also see shades of black used in logo and text design as in the case of Grow Therapy:

Because this is a more subdued black, the immediate association with the Grow Therapy brand won’t be luxury or formality. The bubbly, youthful-looking logo font, lilac purple accents and pastel yellow background also help keep users from associating the brand with extravagance.

So, when using black in healthcare design, keep this in mind. Unless you’re creating a site for a very high-end tech product that’s going to cost users thousands of dollars, make sure black is minimized and muted.

Gray/Neutrals

Neutral colors like gray signify:

• Conservativeness
• Calm
• Dispassion
• Wisdom
• Middle ground

Going too dark with gray or other neutrals can put you into negative territory with your users. For instance, a too-dark gray may make a UI look depressing or ominous.

So, when using neutrals, it’s best to stay on the lighter side of things and to let them do what they do best: Create balance for brighter colors.

The homepage for Iodine Software is a good example of how to do this:

Iodine Software’s branding is actually quite colorful. The logo alone has purple, blue, yellow and red colors within it. The website also uses purple and yellow buttons and graphics. So the gray and white backgrounds offer a nice counterbalance.

Neutrals aren’t only useful as flat background colors. This is the homepage for Click Therapeutics, for instance:

This animated hero section is all neutral color—white text atop a beige background. Aside from an orange section and some colorful images toward the bottom, the rest of the homepage remains neutrally colored as well. This color palette and a lack of brightly-designed CTAs makes it easier for users to focus on the content instead of allowing emotions to drive their focus or actions.

Yellow/Orange

Yellow and orange signify:

• Energy
• Youth
• Joy
• Playfulness
• Optimism
• Friendship

It’s not as though yellow and orange are absent from the websites I looked at. There were some sites and logos that included these colors, though it was usually in very, very small doses.

This could be because healthcare generally doesn’t always deal in the most positive of outcomes. And yellow and orange would create a digital environment that feels disconnected in that sense.

Designers might also want to avoid using these colors because of how energetic they feel, at least in their brighter forms. In healthcare, the goal is often to keep patients calm.

Another thing to consider is the audience. For example, this is the homepage for Brightline:

Yellow, in particular, is associated with youth. So, unless you’re designing a website for a youth-oriented healthcare brand like Brightline, yellow might be ill-suited to what you want to achieve.

Wrapping Up

Your choice of colors when designing logos and digital products for healthcare companies can make a difference in how those brands are perceived. Not only do colors make UIs more or less aesthetically pleasing, color psychology also tells us that certain colors invoke certain emotions—and, by proxy, behaviors—in people.

Color psychology, however, is just one thing to think about when choosing colors for your healthcare product and brand.

Before settling on a color palette, consider who your target audience is. Is there a specific gender or age range you’re targeting?

Also, think about what sort of healthcare services or products you’re dealing in. The seriousness of the situation will impact which colors and shades of colors you choose.

One last thing: Don’t forget about accessibility. With many healthcare services targeted at older users or users with impairments, you’ll want to be careful that your color choices don’t negatively impact their ability to access your information.