25th August 2014

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.


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


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


Recommended Posts

Yammer integrations in ReactJS

Post by 3 years ago

I am writing this blog while I am working on a project for our client’s intranet website. The client requires the website has the ability to share, like and write comments in the website through

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!