The Designers Republic Guide to Catchy Color Combinations

The Designers Republic Guide to Catchy Color Combinations

Do you want your designs to stand out more? A catchy color combination is a great, simple way to do that. And what better way to find eye-catching combination than to look to some masters of design: The Designers Republic.

Instead of using trial and error, or facing an endless array of choices, you can simply use a source of design inspiration to quickly hone in on a color combination that works. Hence, this article was born: The Designers Republic guide to catchy color combination.

The Designers Republic Guide to Catchy Color Combinations

The Designers Who?

Don’t know who The Designers Republic is? It’s one of the most iconic and influential graphic design studios from the late 20th/early 21st century. It was founded in 1986 in Sheffield, England by Ian Anderson, who started off designing band flyers. TDR’s rise to fame came with designing seminal electronic record label Warp’s covers (who are also from Sheffield), creating the style for the Wipeout video game series, and work for corporations such as Sony and Coca Cola.

The Designers Republic became a hugely influential graphic design studio. The entire electronic music scene used many of TDR’s futuristic elements for album covers and such, as did a lot of the web design community. It’s safe to say TDR knows a thing or two on effective design – and that includes catchy color combinations.

The Designers Republic has a knack for picking simple but very eye-catching color combinations. And that’s the theme of this article: what we can learn from TDR’s color selection.

The Designers Republic Guide to Catchy Color Combinations

1. Blue + Brown + Black + White

This color combination evokes a fun yet serious attitude. Perfect for when you have something that’s down to business but with a playful grin.

The fun part comes from the colors reminding you of ice cream (white is the vanilla, brown is the chocolate, blue is the candy or blueberry topping). And the serious part comes from none of the colors being too bright (such as red, orange, yellow).

Blue Brown Black White

The Chocolate Blues
Blue Brown Black White Showcase

2. Blue + Grey + White

This color combination is sleek, professional, light, and cool. If it was just grey and white, then it would be sleek and professional but nothing more. However, the dab of blue gives not just some more color but the airiness and fresh feeling as well.

Great for when you want to keep your design ultra-clean but still have some flavor to it.

Blue Grey White

Blue Grey White Showcase

3. Blue + White

When white text is over a straight up blue background, it gives an oceanic feeling. Like the content is floating in an endless canvas. Usually this hue of blue isn’t chosen often for a background, since it is quite intense. But unlike a hotter color like red, blue remains calm, which makes the text more readable for longer copy.

If you want to create an intense yet calm, focused yet floating energy, this is the color combination to go with.

Blue White

Blue White Showcase

4. Blue-green + White

A variation on the preceding #3. Instead of straight up blue, you can use blue-green to give an even calmer, more pastoral feel. A less floating and more reflective vibe.

Bluegreen White

Early Morning Child Theme
Bluegreen White Showcase

5. Dark Grey + Light Grey + Green

Dark grey text and objects over a light grey background gives a softer professional vibe than black and white. The lesser contrast is the reason for this. But, as with #2, the dab of green creates a technological yet natural fusion.

The green creates a certain grounding, due to the earth/grass/nature association. It keeps all the shades of grey from taking over.

Darkgrey Lightgrey Green

Darkgrey Lightgrey Green Showcase

6. Orange + White

Nothing shocking here – white text and objects over an intense color. But orange is an oft-unused color for the background, with red being the more popular pick. Orange makes the background less intense and warmer than red.

Perfect for either designing something warm, associating with autumn or food, or using it ironically to subvert an otherwise child-like image (as The Designers Republic did with this spin on their Nickelodeon design).

Orange White

White Orange
Orange White Showcase

7. Pink + White

Like the preceding #6, another simple combination of white text and objects of a single color. And just like with #6, pink is another underused background color. Guys mostly avoid it due to the girly connotation – they want something “cooler” or tougher. But similar to how an incredibly confident man can wear pink comfortably, a confident design can rock a pink background.

There’s no hidden color combination here. Pink is simply underused, so by using it for your non-perfume-or-candy-and-so-forth designs, you’ll automatically have your work stand out more. And lesser-used colors equals more catching of the eyes.

Pink White

Pink White Showcase

8. Red + Black + White

Red and white is used very often (Coca Cola). So why is this overused color combination featured here? Answer: black.
The inclusion of black is what makes this color combination more eye-catching. It throws you off a bit, since you’re so used to seeing only red and white. And that’s why this works: black is neutral and doesn’t clash with red the way another color or even grey would. But that extra subtle touch is enough to separate your design from the countless red-and-white-only designs.

Red Black White

Red Black White Showcase

9. White + Grey + Green

Similar to #6 but inverted. White text over a grey background is not-too-common-but-still-common-enough color combination. A popular example is John Gruber using it on his blog Daring Fireball.

But again, similar to #6, the addition of a subtle touch of green is what separates this color combination more. The green provides that earthiness to the technological shades of grey. Do you see a pattern emerging? Add just a little bit of a grounded color like green, and you can make an otherwise more-common color combination stand out without it being too obvious.

White Grey Green

White Grey Green Showcase

10. Yellow-green + Grey

This is a pretty sci-fi and exciting color combination. The yellow-green evokes a toxic feel, while the grey gives the illusion of metal. Combined, you get a comic book or video game-esque design. Like a superhero that came in contact with toxic slime and gained some powers.

What’s great is the grey keeps the color combination more sophisticated. Next to the yellow-green, it becomes a metal color due to the toxic theme. But there’s no blue, or red, or orange, or purple, or any other colors butting in here.

So while the fantastical element is kept intact, you still get a subtle and reserved color combination that will work in more professional and subdued settings. Perfect for those moments when you need to sneak in some Toxic Avenger flavor into a corporate client’s website.

Yellowgreen Grey

Live 93
Yellowgreen Grey Showcase

Catchy Color Combinations

So there you have it. Catchy color combinations, pulled directly from The Designers Republic’s unique work. If you want your next design to stand out and be just a little more unique, consider using one of these TDR-inspired color combinations.

How about you: what are your favorite catchy color combinations?


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.