10 Color Combos for UI Inspiration (That are User-Friendly & Accessible)

We all want to make those pixel-perfect mockups, right?

 

However, choosing the right color combination isn’t always easy. You need to find colors that not only look good together but are also accessible and user-friendly.

 

(Here’s a great, free tool for checking WCAG acceptable color contrasts

 

If done right, you can really impress your client, boss, and users. That’s what I want to help you with in this article.

 

Here are 10 color combinations for my fellow designers that need some inspiration, and want to avoid the standard blue.

Dark Candy Apple Red: #A40606 Ochre: #D98324

Feeling warm? Dark Candy Apple Red and Ochre are Analogous (Sitting next to each other on the color wheel) meaning they’ll blend together smoothly and feel comfortably balanced. This pairing also invokes feelings of fall, nature, and keeps things bright and alerting, without being too saturated. Since Ochre is the lighter hue, consider using it as your highlight color to bring attention where you need it.

 

Companies Using Similar Hues:

  • Harley Davidson – Ochre
  • Etsy – Ochre

(These are in accordance to WCAG’s AA standard for accessibility)

Can:

  • Put white text on top of Dark Candy Apple Red
  • Put black text on top of Ochre

Cannot:

  • Put black text on top of Dark Candy Apple Red
  • Put white text on top of Ochre

Pink Raspberry: #9C0D38 Magic Potion: #FF4F65

You’ll find a number of Analogous colors on this list, due to how easy it is to pair in many ways. If you want something with a little more spunk, Pink Raspberry and Magic Potion offer vibrancy that sits between cool and warm. Consider Magic Potion as your highlight color to pop against the richness of Pink Raspberry.

 

Companies Using Similar Hues:

  • LG

Can:

  • Put white text on top of Pink Rasberry
  • Put black text on top of Magic Potion

Cannot:

  • Put black text on top of Pink Rasberry
  • Put white text on top of Magic Potion

Pink Raspberry: #9C0D38 Magic Potion: #FF4F65

UCLA Blue: #577590

Sandstorm: #F3CA40

 

We might have a bias for blue & yellow pairings (Go Blue!) but that doesn’t mean you shouldn’t also consider using them. UCLA Blue and Sandstorm offer a unique feeling, with blue bringing gentle calm, and yellow keeping you alert. Bright and dark juxtapositions can be hard to balance, but UCLA Blue and Sandstorm are both primary colors, ensuring you success since they are not at full saturation.

 

Companies Using Similar Hues:

  • Amazon – UCLA Blue & Sandstorm
  • Lego – UCLA Blue & Sandstorm
  • Sketch – Sandstorm

Can:

  • Put white text on top of UCLA Blue
  • Put black text on top of Sandstorm

Cannot:

  • Put black text on top of UCLA Blue
  • Put white text on top of Sandstorm

Feldgrau: #4C6356 Spanish Pink: #FDBDC0

Feeling modern? Feldgrau and Spanish pink are a popular and surprising pairing for your design. These shades of pink and green are nearly complimentary colors, meaning they are scientifically a balanced pairing with each other. They’re also commonly used in tropical prints, where Spanish Pink brings the party, and Feldgrau sets up the scene with is rich darkness. Try mixing these colors in exciting ways for your product.

 

Companies that use similar hues:

 

Can:

  • Put white text on top of Feldgrau
  • Put black text on top of Spanish Pink

Cannot:

  • Put black text on top of Feldgrau
  • Put white text on top of Spanish Pink

Rich Black: #003B36 Glitter: #EAE8FF

Complete calm – that’s what describes Rich Black and Glitter. Despite its name, Rich Black is actually a Rich Green, even more densely hued than Feldgrau. This dusting of purple and dark green are again a unique take on their complimentary foundation. Playing with saturation and lightness/darkness will give you interesting pairings such as this. Because of its lightness, consider using Rich Black as your accent color to alert users of pertinent information.

 

Companies that use similar hues:

  • Starbucks – Rich Black
  •  

Can:

  • Put white text on top of Rich Black
  • Put black text on top of Glitter

Cannot:

  • Put black text on top of Rich Black
  • Put white text on top of Glitter

Cool Black: #0F2A62 Granny Smith Apple: #B4DA9B

Without a doubt, blue and green are power colors that are seen in a lot of popular products. They’re calming, not aggravating to look at, and bring the user a sense of comfort and trust. Despite their ubiquitous use, there are still ways to make this pair unique so you can stand out in a crowd. Cool Black and Granny Smith Apple offer alternative versions of these popular colors. Cool Black sets the scene, while Granny Smith Apple highlights important information. Since they are Analogous colors, why not combine their power instead of relying on one?

 

Companies using similar hues:

  • Android – Granny Smith Apple
  • NVIDIA – Granny Smith Apple
  • Spotify – Granny Smith Apple
  • Figma – Granny Smith Apple 

Can:

  • Put white text on top of Cool Black
  • Put black text on top of Granny Smith Apple

Cannot:

  • Put black text on top of Cool Black
  • Put white text on top of Granny Smith Apple

Cadet Blue: #58A4B0 Diamond: #BCE7FD

You’ve seen lots of cool color pairings mixing hues – but why not stay within the same vein? Much like our pink and magenta counterparts earlier, it’s hard to go wrong pairing colors from the same part of the spectrum. Cadet Blue’s deeper hue + saturation help balance out Diamond’s white-mixed tone. Together they play off each other beautifully without diverting a user’s gaze too much.

 

Companies using similar hues:

  • Busch Light

Can:

  • Put black text on top of Cadet Blue
  • Put black text on top of Diamond

Cannot:

  • Put white text on top of Cadet Blue
  • Put white text on top of Diamond

Tyrian Purple: #700548 Deep Lilac: #9448BC

Don’t be afraid to go bold on colors that aren’t often found in the product wilderness. Tyrian Purple and Deep Lilac are both shocking hues that won’t stand to be unnoticed. Keep your product popping by using Deep Lilac as the accent color, which still lights up against the Tyrian Purple. Regardless, your product will be remembered by new users because of how off the wall this pairing is.

 

Companies using similar hues:

  • Slack – Tyrian Purple
  • Sketch – Tyrian Purple

Can:

  • Put white text on top of Tyrian Purple
  • Put white text on top of Deep Lilac

Cannot:

  • Put black text on top of Tyrian Purple
  • Put black text on top of Deep Lilac

Mardi Gras: #861388 Nadeshiko: #EEABC4

If you still want something in the pink and magenta range that isn’t too in-your-face, consider a lighter pink and magenta combination. Mardi Gras and Nadeshiko are once again analogous colors, playing into each other beautifully in most situations. Layer them on top of each other, or use one as a highlight and the other as the alert. 

 

Companies Using Similar Hues:

  • Asana – Nadeshiko

Can:

  • Put white text on top of Mardi Gras
  • Put black text on top of Nadeshiko

Cannot:

  • Put black text on top of Mardi Gras
  • Put white text on top of Nadeshiko

Blush: #DA667B Glitter: #EAE8FF

 

You’ll notice a lot of companies following a trend of bold and stand-out colors. Therefore if you adopt a softer palette, you may actually stand out more than the bright colors permeating the market. Blush and Glitter are soft hues that relax a user without fading into the background. Bush has just enough power to keep your attention, and when juxtaposed with Glitter, brings out its purple essence. Experiment with combinations to create something truly extraordinary!

 

Companies Using Similar Hues:

  • Dribbble

Can:

  • Put black text on top of Blush
  • Put black text on top of Glitter

Cannot:

  • Put white text on top of Blush
  • Put white text on top of Glitter

Related Posts

Case Study: The UX of Dating Apps

The number of dating apps and online dating candidates have flourished over the past decade.  Facebook Dating, Bumble, Tinder, Grindr,

[convertkit form=1525239]
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x

Pin It on Pinterest