How to Use Retro Colors in Your Designs

November 16th, 2009 by Tyler Denis | 25 Comments | Stumble It! Delicious

Retro colors are a great way to give your website an older/vintage feel; it can give your design a little something different from the regular fully saturated colors that you see often in modern-themed designs.

This article is both a showcase of retro-colored themes in existing web designs, as well as a tutorial on how to achieve retro colors using Adobe Photoshop (you’ll learn about five different techniques).

Retro colors in web design

Before we delve into using retro colors, first let’s peek at some existing web designs that use retro/vintage colors really well.

Kitschen Sink

Huxley Prairie Festiva

Clickfarm Interactive

Douglas Menezes

The Literary Bohemian

Michela Chiucini

Hope Unlimited

Design Log of Ayaka ito

f claire baxter

Mia Mäkilä

De PSD a HTML

Owltastic

Coopers Kids

SproutBox

Nou Zeppelin

Kingsford Competition Briquets

One Promo

Element Fusion’s Internship Program

Joe Longstreet

Mplusz

THINK. DO. CREATE.

JANA’S BAKERY

Hardscapes Etc.

Social Snack

web-gab.com

JOBY

Supermercati Motta

How to use retro colors in your designs using Photoshop

Now that we’ve seen some examples of websites with retro colors, we are going to look at a few ways to create them in Adobe Photoshop.

Use the Color Picker to reduce saturation

Click on the Foreground color in your Tools Panel; this will open up the Color Picker Dialog box. Start with a red color (#FF0000). Now, click directly to the left of the red color you’ve chosen. The more you go towards the left, the more reduced the saturation is.

Use the Color Picker to reduce saturation

Drop the layer’s Opacity to reduce saturation

If you drop down your opacity in the Layers Panel, this will also drop down your saturation. The bad (or good) thing about this is that if there is anything behind it, it will show through.

Drop the layer's Opacity to reduce saturation

Photo Filter Image Adjustment

In order to reduce saturation by way of the Photo Filter Image Adjustment, we have to first get the inverse of our color; to do this, press Ctrl + I (which is the shortcut keystroke for Image > Adjustments > Invert).

Next, choose the Eyedropper Tool in the Tools Panel and click on the inverted color in your canvas to sample it and set it as your Foreground color. Once you have set your color, press Ctrl + I again to revert back to the original color. Now, go to Image > Adjustments > Photo Filter. Finally, change the color to our inverted color.

Photo Filter Image Adjustment

Hue/Saturation Image Adjustment

With this method, we want to go into the Hue/Saturation dialog box by pressing Ctrl + U or going to Image > Adjustments > Hue/Saturation. To lessen the saturation, drag the Saturation option slider to the left. This is probably the easiest and best way to get your saturation reduced for an entire image.

Hue/Saturation Image Adjustment

Using Textures

Using a texture is also a good way to give your website a retro/vintage look and feel. Not only does it change the color, but it also gives you a nice, uneven and worn look.

There are a few ways to change your colors with a texture, and here’s one way to do it.

First, we are going to grab a texture from Zen Textures.

Open up the texture in Photoshop and place it on top of the red square. Then change its layer’s blend mode to Screen.

Using Textures

Now to make our image less of a peach-colored, drop down the opacity to somewhere around 50%.

Using Textures

We hope that you enjoyed this little article on using retro/vintage colors. If you have any tips, tricks, and techniques to share with other readers when using this color theme – please be sure to drop us a note in the comments!

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

25 Comments

Scott Schwartz

November 16th, 2009

All of these examples can arguably be in a post about how to use texture in design. I’m not sure all really contain “retro” colors… or maybe I’m not sure what that means. But the common thread that I find appealing about them, is the implied texture. Thanks!

Jaime

November 16th, 2009

Nice showcase and technique.

DeInfor

November 16th, 2009

Great article. Will definitely be useful for my next freelance project, which is supposed to be a retro style website. You guys read my mind.

Austin

November 16th, 2009

Sweet tutorial. http://www.huxleyprairiefest.com/ is probably my favorite of the showcase. It maintains a retro look while still being modern.

Tony

November 16th, 2009

Very informative…Thanks. I also just created a post on vintage and retro design.

Thanks…keep up the good work.

sriganesh

November 17th, 2009

new and good topic , must learn this soon, :D

Dylan Parry

November 17th, 2009

“Now to make our image less of a peach-colored, drop down the opacity to somewhere around 50%”

I dunno… on my monitor (which has been calibrated), it’s more of a peach colour after you’ve made that change ;)

Good collection of sites though and a nice inspiration. Cheers.

fanhua

November 17th, 2009

very useful,thank you!

Fred

November 17th, 2009

This is a really great article – can’t wait to put it into practice . . .

cmckelvey

November 17th, 2009

Another good one http://www.c4yp.co.uk/ which seems to follow your guidelines, great article!

Noel Wiggins

November 17th, 2009

fantastic, these color palettes are right on the money when it comes to evoking a proper retro feel

I particularly like the kitchen sink.

Larissa

November 17th, 2009

Cool examples. Another great article on the Meaning of Color in design can be found here: http://ljdesignstudio.com/the-meaning-of-color-in-design

Joann Sondy

November 17th, 2009

Thank you for your selections, I think I may have found a web designer that suites my tastes for personal projects. Oh, good tutorial, too.

karl

November 19th, 2009

Another nice one. (I think so anyway :)) http://www.web-o-matic.co.nz

Sheffield

November 19th, 2009

Thanks for the inspiration, this stuff is all the rage now.

Redstage Magento

November 20th, 2009

I’m loving the use of these colors. Simply amazing!

John Campbell

November 20th, 2009

I really like this post. The original look of DesignBump was retro, so I still have a soft spot in my heart for retro style designs.

Ashely Adams

November 30th, 2009

Retro colors or not these are some good website designs with good use of textures…The retro effects varies and it is true that some of these look very “un-retro” like, Janas Bakery, Think.Do.Create., and Owltastic are very much modern..Nevertheless this post has some good examples of the use of textures…Thanks for sharing this…

BebopDesigner

November 30th, 2009

This is simply brilliant! Thanks for sharing. Love the retro mood on these.

Cheers

Erik Ford

January 4th, 2010

Thanks for including our design of the Coopers Kids website. We are very humbled to be included amongst some beautifully designed website. Over the past few months, I’ve fallen in love with playing with textures and “retro” elements in some of the design work we’ve created.