Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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...

share|improve this question
up vote 1 down vote accepted

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)

share|improve this answer

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.

enter image description here

enter image description here

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.

share|improve this answer
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.

share|improve this answer

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

share|improve this answer
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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.