Bar color calculator for iOS7 and iOS8 (UIToolbar and UINavigationBar)

Guides By 3 years ago

Note: Now updated for iOS 7 and iOS 8 (Apple changed the formula in iOS 7.0.2)

In iOS7 a translucent UIToolbar or UINavigationBar will now blur the content behind it. The bar’s color can still be set (now with the -setBarTintColor: compared to the previous -setTintColor:), however the UIColor you set is not the same color that will be displayed on screen. Instead, iOS will adjust your RGB values a bit and use those as the color.


Formulas

I have figured out what calculations are being done to the RGB values, you can use the following formulas to work out your proper values (n is the R, G or B 0-255 value):
Note that this is currently just for a white background behind the bar. I haven’t yet figured out how the background affects the bar, but most people will be using white anyway I think.

Going from designs to UIColor:
(n – 40) / (1 – 40 / 255)

Anything under 40 in this first equation will not work and will give a negative result. For this reason, only values of 40-255 in your designs will work.

Going from UIColor to designs:
(1 – 40 / 255) * n + 40


Calculator

In case you don’t want to plug your values into a calculator every single time, here’s a web calculator you can bookmark for easy use.

Open calculator

  • Jessica Raymond

    Thank you very much for this helpful tool!

  • thank you ! this is awesome

  • Jessica Raymond

    I just have to leave another comment and say how awesome you are for sharing this calculator! It has been so helpful!!!

  • Thomas Gordon

    Lifesaver!!!