25 Brilliant Uses of Colorful Spectrums in Web Design

I’ve noticed a recent trend in web design that involves the use of colorful spectrums as a main design element. The uses are widely varied but almost always quite beautiful.

Today we’ll learn how to build amazing spectrum-based artwork in Photoshop and then take a look at 25 brilliant examples of spectrums being used in real websites.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Digital Assets

How to Have Fun with Spectrums in Photoshop

Before we look at our selection of sites that utilize spectrums as a major design element, let’s take a look at how you can easily build your own awesome spectrum artwork in Photoshop. I’ve gone over a similar technique in a previous tutorial but it’s definitely appropriate for this article as well.

Building complex gradients in Photoshop can be time consuming. Fortunately, it comes built-in with some great spectrums that you can apply in only a few clicks.

To start, create a solid black layer. Then duplicate that layer and apply a gradient overlay to whatever layer is on the top. To load in the spectrum gradients, hit the little arrow on the right of the gradient picker and go way down to the bottom where it says “spectrums.”

screenshot

Select any spectrum that you like and set the direction to whatever you feel is appropriate. Due to the hideous initial result of this step, I imagine that many designers have never thought to use these pre-built gradients. However, always remember to look at Photoshop’s effects as building blocks, not as finished products.

The hippiefest below is actually quite easy to turn into something that looks really cool and fits with modern design trends.

screenshot

The next step is to create a solid white layer and select Filter>Render Fibers. It doesn’t really matter what your settings are for the fibers, just play around until you get something you like.

screenshot

Now apply a simple motion blur. Be sure to crank it up so that the lines are nice and smooth. You can see in the image below that this is going to give us a really nice texture with lots of depth and contrast.

screenshot

The magic happens when you set this layer to multiply. Voila! Now your spectrum is looking a lot cooler!

screenshot

To make it more dramatic, apply a solid black layer mask and then grab a large soft brush set to white. Then click around the canvas two to three times with your brush to bring back the gradient in a subtle and attractive way.

screenshot

Don’t stop there! Play around with other filters and effects to create your own unique take on spectrums. The image below uses the same exact process shown above but uses clouds instead of fibers (ditch the blur step).

screenshot

As a final dimension, once you star mixing it with graphics, the effect can get really amazing really fast. Below I threw in a compass rose and was able to come up with some awesome results after only a few seconds of tweaking.

screenshot

Spectrums in Website Backgrounds

To get an idea of how to practically apply these techniques in the world of web design, check out the great examples below. This first section implements color spectrums as the main focal point of the site background.

Web Design Cheltenham UK

screenshot

BundleHunt

screenshot

Rareview

screenshot

Agence web créative

screenshot

Design Writer’s Guild

screenshot

Click on Tyler

screenshot

The Creative Way

screenshot

Spectrum Theme

screenshot

deaxon

screenshot

Logic By Design

screenshot

Greek website designer

screenshot

Ordered List

screenshot

Ciplex | Design Shack

screenshot

Life Church | Welcome

screenshot

Julio Silver

screenshot

Robin James Yu

screenshot

Web Design Company

screenshot

Burubundi

screenshot

Wir lieben Links

screenshot

Logos and Other Elements

Here we see spectrums being used to create extremely attractive icons, logos and other graphical elements. Notice how sometimes designers will use hard steps instead of smooth gradients. Yet another option to keep in mind!

Kaleidoscope

screenshot

Drupal Works

screenshot

Hughes

screenshot

Neutron Creations

screenshot

Rua de Baixo

screenshot

Conclusion

I hope this post has been quite inspirational and that it encourages you to play around with spectrums in your own designs.

If you design or find any sites using spectrums in a unique and awesome way, leave a comment below with a link so we can all check it out!