How many colors should be used in a background gradient?

For on-screen design (web or desktop applications), in areas where there is significant background space visible, a subtle gradient adds a lot to the look of the app/page/image. How many colors (max) should be used in this gradient? How far apart in tone/hue should they be?


I think the question is really one of your particular site and the client’s need for the visual effect of a gradient. I think the current trend is (using HSV as a visual construct) to pick just one hue, and use saturation or value to shift it across the spectrum. In most cases, the scale of the gradient is also pretty large; small enough for you to see it in one screen but large enough for it to be subtle.

A previous trend was to use a variety of colors in a subtle way in order to create visual interest over a monochrome foreground. I’m struggling for a great example but one is the “Fluid” theme of the tumblr default layouts : . In this case it’s one major gradient that actually shifts between two completely different hues, but there are subtler interchanges of color at the intersection. A counter-example would be the much-lauded during the previous US election Barack Obama campaign site : , which utilizes a simple two-tone light and dark blue gradient that’s blended using asymmetrical brushes.

In the end, it’s up to you and the client what works best. But in my opinion, definitely try both and see how they look, even if you never show it to the client. Doesn’t hurt to explore. : )

Source : Link , Question Author : Stewbob , Answer Author : NateDSaint

Leave a Comment