How to Use Retro Colors in Your Designs

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).

How to Use Retro Colors in Your Designs

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

Kitschen Sink

Huxley Prairie Festiva

Huxley Prairie Festiva

Clickfarm Interactive

Clickfarm® Interactive

Douglas Menezes

Douglas Menezes

The Literary Bohemian

The Literary Bohemian

Michela Chiucini

Michela Chiucini

Hope Unlimited

Hope Unlimited

Design Log of Ayaka ito

Design Log of Ayaka ito

f claire baxter

f claire baxter

Mia Mäkilä

Mia Mäkilä

De PSD a HTML

De PSD a HTML

Owltastic

Owltastic

Coopers Kids

Coopers Kids

SproutBox

SproutBox

Nou Zeppelin

Nou Zeppelin

Kingsford Competition Briquets

Kingsford® Competition Briquets

One Promo

One Promo

Element Fusion’s Internship Program

Element Fusion's Internship Program

Joe Longstreet

Joe Longstreet

Mplusz

Mplusz

THINK. DO. CREATE.

THINK. DO. CREATE.

JANA’S BAKERY

JANA'S BAKERY

Hardscapes Etc.

Hardscapes Etc.

Social Snack

Social Snack

web-gab.com

web-gab.com

JOBY

JOBY

Supermercati Motta

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!

Related Content

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.