Question

How does iOS go about calculating a toolbar gradient? I’d like to be able to set my window’s background color to match the end color in the gradient so that it appears to fade into the view. The problem is that the end tint seems to vary depending on the base color and I can’t find a consistent formula that produces a match.

Answer 1

My best approximation:

(r', g', b') = (f(r), f(g), f(b)) where f(x) = 0.001468x^2 + 0.647295x + 4.04025

How I derived that:
Let c = (r, g, b) = base color.
Let c' = (r', g', b') = resulting color.
I let c = #944321 = (148, 67, 33) and got c' = #84361b = (132, 54, 27).

That gives me three equations to solve:

f(148) = 132
f(67) = 54
f(33) = 27

Since we have three equations, let f(x) be a polynomial with three unknowns:

f(x) = Ax^2 + Bx + C

From there I made a 3×4 matrix on my calculator, inputted the different values of x, and performed a reduced-row-echelon on the matrix, the solution being (0.001468, 0.647295, 4.04025). I plug those into A, B and C and got the aforementioned f(x).

Here’s a quick Python script to perform the calculation.

Usage: ./script.py rrggbb

#!/usr/bin/env python

import sys

def end_color(color):
    def f(x):
        return int(round(0.001468 * x ** 2 + 0.647295 * x + 4.04025))
    rgb = (int(color[i:i+2], 16) for i in xrange(0, 6, 2))
    return ''.join(hex(f(n))[2:] for n in rgb)

for color in sys.argv[1:]:
    print end_color(color)

I tested this with the color #9e3393 and got #8f2983, same color iOS produced:

$ ./script.py 9e3393
8f2983

Even if it’s not exact sometimes it will probably be impossible to tell since you’re using the color at the end of a gradient. Hope that helps!