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)


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.

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

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

  • 1
    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

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

See: http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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