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

Twitter
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

Skype
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

Bleep
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

Odopod
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

Whitestripes
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

Bigdada
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?

Oleg Mokhov is a world's most mobile electronic musician. Born in Russia, raised in US, traveling the world, living unconventionally, making music, building a business.

Comments

  1. / Reply

    A very nice guide with some interesting inspirational examples on catchy color combination.. nice read!

  2. / Reply

    Very insightful article, simple colour schemes always gives stronger impact. I think it to do with the fact that there’s no messing about, it just get the message across a lot more effectively and clearly. It’s amazing to think how popular blue and white colour schemes are, in particular social media but I suppose that’s the point. To me though you can’t get a more bold and stylish colour scheme than just plain black and white

  3. / Reply

    Really enjoyed reading this — thanks for providing a thoughtful discussion of the colors and their interaction along with the samples.

    I’ve been a big fan of the Wipeout series’ aesthetic for a while now, nice to learn a bit more about its origin.

  4. / Reply

    The Designer’s Republic are legends, truly inspirational during my college years, loved their Warp Records stuff. Creative Review did a feature on them a few months back looking back at their work. Amazing!

    • jack,
    • January 7, 2011
    / Reply

    i like white+grey+red (white backg, grey header, red highlights.)

    • adam,
    • January 7, 2011
    / Reply

    Pretty narrow offering, but good stuff. I’m of the school that there are fresh, new color combos that need be investigated. With virtually very monitor on the planet displaying 32-bit colors, it’s time to push the envelope. My site uses slightly varied shades of a three-color palette, expanding what the eye thinks it sees. This is a trick used in spot color printing, where screens are used to blend colors with one another or the paper.

    There are, of course, many good palette generators out there, and grabbing something at random and working with it is a good way to not only experiment, but to enhance design skills by working with what you get and no more.

    And, of course, when you find one you like, create some divs with those colors and save them.

  5. / Reply

    Very nice examples in there, and people who are clearly better at it than myself.
    I always find things like this to depend on content, though.
    I’ve successfully used white+grey+black+red/yellow on one site for a clean, airy feeling, as well a black+Dark Grey+Pink+Blue for my own site for vibrance.

    IMHO, a colour scheme (while it is a HUGE aspect of good design) should always complement what the site is about, rather than define it.

  6. / Reply

    Excellent color combinations for sure. Thanks for sharing this information with us.

  7. / Reply

    Awesome post! I appreciate the great color combinations and examples. Very useful – Thank you! :)

    • bowen,
    • May 19, 2011
    / Reply

    I notice you have more than 2 colors in some schemes. It is difficult for a designer to think beyond 2 colors and that’s when color theory makes sense. I usually refer to http://colorpilgrim.com because it comes with 21 colors in a scheme that I can edit to 3 or 4.

    • Gio,
    • July 8, 2011
    / Reply

    The designers republic sounds good, I like the Pink + white one.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals