ios 7 background gradient

Please take a look at the image below. I am trying to find out if there’s a “rule/pattern”, even something that can be put down in math form, to the selection of a two-color gradient. The required outcome is something that looks like it’s made “of the same color” but smooth. So, naturally going from RED to BLUE is distinctively a two color gradient.

Suppose I pick the initial color — how “far” on the RGB scale should the second color be in order for users to consider it “the same color”, but in a different tone that creates the illusion of a smooth and interesting gradient background?

If I map the two colors shown uses on a 2-axis color map, will the “vector” created between the two points representing the colors be measure of how I should be picking a second color?

…or perhaps is everything just “Eyeball it, change until the results are pleasing”?

from an iOS app design blog

This is how the gradient looks on an iOS app. It’s nice, and smooth.

Gradient in use...


Mathematically speaking, the easiest way to maintain the same ‘color’ (ie, ‘hue’) is to not adjust the color with the RGB values, but use the HSB values. H = hue (‘the color’), S = saturation (‘how much color’), B = brightness (‘is it closer to white or to black?’)

Adjust the ‘B’ value.

Aesthetically speaking, just use your eyes until you like the way it looks.

(FYI I don’t think Apple is using a truly ‘one color’ gradient there. It sure looks like it’s shifting the hue slightly as well)

Source : Link , Question Author : JasonGenX , Answer Author : DA01

Leave a Comment