ios Navigation bar tint color like facebook app

Question

I need a navigation bar tint color like facebook's navigation bar(in iOS 7)

I picked the color of facebook App's and set it by

[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithHexString:@"#365491"]];

But displaying wron color. The color is correct.I tested that color by setting it as a plain view's background.

Result of the above code is enter image description here

But I need like this enter image description here

Also when I tried by setting a views background with same color is enter image description here

How can I reproduce a navigation bar like facebook.

if your color not displayed proper then The best way is put image on navigationBar.. :) — iPatel, Sep 27 '13 at 06:37
tried by setting color with pattern image but nothing happened :( — Johnykutty, Sep 27 '13 at 06:44

Bhavin · Answer 1 · 2013-10-04T12:41:24.463

In iOS7, 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.

To calculate the color with white background behind the bar, you should use these formulas as explained in Bar Color Calculator :

Going from designs to UIColor:

(n – 102) / 0.6

Going from UIColor to designs:

(255 – n) / 2.5 + n

where n is the R, G or B 0-255 value.

So, what you are getting using the ColorPicker or from some similar app is not the values you should use for R, G and B. But those are the values calculated by the iOS from some other RGB values. To get the exact value, you should follow these steps.

Get the values of R, G and B using ColorPicker for the Facebook Navigation Bar.
Use those values in above formulas to calculate the exact value.

For Eg: R_fromFB = (R – 102) / 0.6 So, R = (0.6 * R_fromFB) + 102
Use these R, G and B values in your Navigation Bar.

For Example, you can try with this color :

[UIColor colorWithRed:(135/255.0) green:(153/255.0) blue:(189/255.0) alpha:1]

I noticed this log, But my RGB values are 54,84,145 Author of this blog also said "Anything under 102 in this first equation will not work and will give a negative result. For this reason, only values of 102-255 in your designs will work." — Johnykutty, Sep 27 '13 at 07:17
@Johnykutty : Try to use 135,153 and 189 respectively for R, G and B. — Bhavin, Sep 27 '13 at 07:21

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

I made a special BarTintColorOptimizer utility for optimizing translucent navigation bar tint color to make the bar's actual color to match the desired color in iOS 7.x and later.

See this answer for Facebook color setting example.

edited May 23 '17 at 10:30

Community

1
1

answered Nov 24 '15 at 18:14

IvanRublev

784
9
10

1

And it still works with Xcode 8.2.1 and iOS 10. Brilliant work, saved me so much time. Kudos, Ivan! – Frederik Winkelsdorf Dec 21 '16 at 11:30

Johnykutty · Accepted Answer · 2016-04-28T11:54:34.957

Found answer after a lot try

  if ([UINavigationBar instancesRespondToSelector:@selector(setBackgroundImage:forBarPosition:barMetrics:)]) {
      [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavBarBGTile.png"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];

  }
  else{
      [[UINavigationBar appearance] setTintColor:[UIColor colorWithHexString:kBlueColorHex]];
  }

ios Navigation bar tint color like facebook app

3 Answers3