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.
Huxley Prairie Festiva
The Literary Bohemian
Design Log of Ayaka ito
f claire baxter
De PSD a HTML
Kingsford Competition Briquets
Element Fusion’s Internship Program
THINK. DO. CREATE.
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.
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.
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.
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.
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.
Now to make our image less of a peach-colored, drop down the opacity to somewhere around 50%.
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!
- 14 Brilliant Tools for Evaluating Your Design’s Colors
- 40 Beautiful Examples of Vintage and Retro in Web Design
- 20 Beautiful Vintage Photoshop Brush Sets
- Related categories: Web Design and Tutorials