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"?

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

-

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?')

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)

-

You don't need to use a color gradient.

Simply use a black to white gradient set to Overlay mode on a flat color layer.

This way, all you need to change is the flat base color. All the gradients will remain 100% consistent in both position and color alteration.

-
That's a cool technique. Didn't occur to me. thanks. – ron M. Mar 7 '14 at 19:11

Although without any doubt the Scott's solution is very practical, you can do better :)

In short: use LAB or HCL color space in gradients to get even smoother color transitions.

So, to create a smooth gradient, get your color, get color with a bit lower lumiance in LAB color space, and use LAB color space for the gradient.

-

try to make two same color, and the one on your right side, decrease the saturation by 10

-
Hi there. I'm not sure this answers the question, the OP is asking about a pleasing value for colors (and reasons why that works). Could you add some more information? Why is 10 saturation a good value? – Yisela Mar 7 '14 at 22:08