Mobile app version of vmapp.org
Login or Join
Goswami567

: 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

@Goswami567

Posted in: #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"?



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

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Goswami567

4 Comments

Sorted by latest first Latest Oldest Best

 

@Lee3735518

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

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

10% popularity Vote Up Vote Down


 

@Kaufman565

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

10% popularity Vote Up Vote Down


 

@RJPawlick971

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)

10% popularity Vote Up Vote Down


 

@Caterina889

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme