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: https://webaim.org/resources/contrastchecker/)
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:
(These are in accordance to WCAG’s AA standard for accessibility)
Can:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot:
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:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot:
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:
Can:
Cannot: