Color gradations can be better than solid colors for page or section backgrounds. Fading means the transition from a color to a lighter color or tint of the same color, or to a darker color or shade of the same color. (Tint: a color mixed with white in greater or lesser amounts.)(Shade: a color mixed with black in greater or lesser amounts.)
Tinting or shading a color gradient are the same concept, just a matter of direction. In one direction you’re shading the starting color darker, in the other direction you’re tinting the starting color lighter.
Blues and grays are the most common backgrounds to fade, although any color can be used. The background color must match the theme of the site, and follow Color Theory as described in Section 5.
Here’s two examples of fades, the first from white to light blue, the second from light gray to white.
Of course, fades don’t have to start or end in white. Fading from a light gray to a lighter gray is common and is a nice look. Fading from a blue to a lighter blue can also look elegant. There’s no hard and fast rule for when to fade and when not to fade; experimenting with different looks will help choose what looks best.
Here’s the same two swatches from above, but instead of white a lighter blue or lighter gray is used. This is a more subtle change, yet still gives a pleasant look and feel.
If the initial design for a UI results in it looking spartan, adding a fade to the background can give it some flair.
Another technique is fading from one color to another, known as a blend. Blending from a color to a gray gives a nice look, but care must be taken to match the tint or shade of the color to the proper tone of gray.
This concept can be used when gray is part of the website theme, part of the look and feel of the site. Adding a gray blend when the gray is not otherwise utilized adds a random color into the site’s theme and can look jarring.
Blending from one color to another is tough to pull off. They can be great for certain websites, however for desktop apps this is way other the top. If you have a great sense of color and follow the Color Wheel accurately, you can achieve a nice look. It’s tough to pull off though, so if you’re just starting in app design, leave it alone.
Here’s a couple of examples where fades have been used to good effect on websites. Note that these are not apps, however they show the use of a faded background to make the page easier to read and add an aesthetic.
Advanced applications of the fade are demonstrated with these two images:
The sky background uses the fade principal to great effect, going from blue to white. The ocean image uses blue and a turquoise-blue, two different but closely related colors, fading from dark-to-light blue on top, then a transition with the beach and a very slight fade of the crystal clear water. Very eye catching, not boring, and can make a website pop.
Important Note: It’s very unusual for an app to use images for a background, as the use of an image is to capture interest and attention for a marketing purpose, to get the viewer to interact with the site.
An app typically requires the user to perform functions and you want to focus the user’s interest and attention on the actions to be performed. Using a simple color gradation adds an aesthetic without pulling attention away from the functional aspect of the app. These image examples are used to illustrate how color gradients are used for both apps and websites.
Here’s another color gradient with the ocean and sky, staying in the blue theme entirely. Both the sky and the water lighten as you move towards the center. This use of a color gradient in an image really focuses the viewer’s eye on the center of the page.
Applying the image version of the color gradient to a website, it really makes the site pop and focuses the viewer’s eye right where you want it.
Notice that the background has a gray fade going on, while the image uses real-life elements of blue to white from left to right to lend dramatic effect with the powder (snow) indicating action and excitement, and the vivid blue sky, which has its own dark to light gradient going from top to bottom.
The image banner really works, and the subtle gray gradient in the background adds a pleasant element.
Wix.com has this website template ready for use. It uses color gradients and different shades of blue with the ocean to make the image interesting. It captures interest and certainly conveys an idea to the viewer! Notice that the insert is in a green, a cross between the green vegetation on the land and the blue of the water, without resorting to turquoise.
Somebody has been paying attention to Color Theory, keeping the website theme constant on the page. Not only does this showcase the color gradient, it’s an excellent example for Section 5 as well.
While the images are an advanced application of the use of color gradients, notice how the color gradient works in them, adding visual appeal for the viewer.