UINavigationBar background color not the exact UIColor I set it to

Question

Please look at the screenshot below.

I set all the tint colors from the same UIColor object for the UINavigationBar, search bar and toolbar at the bottom. But for some reason the navigationbar color is slightly different. What could be the reason for this?

Thanks..

screenshot

please select the answer if it helped. – Harshad Madaye Dec 03 '19 at 11:15 — Harshad Madaye, Dec 03 '19 at 11:15

score 78 · Answer 1 · answered Apr 03 '14 at 17:14

78

The difference between your navigation bar and search bar is because the navigation bar is translucent,the system will apply a default alpha value for the navigation bar.

Try self.navigationController.navigationBar.translucent = NO;

answered Apr 03 '14 at 17:14

Danyun Liu

3,072
24
22

Yes, if you need to compatible with iOS6, it is better to set the background image of navigation bar but not the tint color(or bar tint color) which has different definition between iOS6/7 – Danyun Liu Apr 03 '14 at 17:18
How to do so for all navigationBar? – user4951 May 28 '14 at 07:42
@JimThio Use UIAppearance [UINavigationBar appearance].translucent = NO; – Danyun Liu May 29 '14 at 03:35
Note that this will not work if you want your navigation bar to be slightly transparent, i.e. your custom colour has an alpha value other than 1. – Ash Oct 27 '18 at 08:53
@DanyunLiu yeah that solved my problem but only for some colors on some devices. For example, if I use UIcolor.Purple for barTintColor it works always, but if I use a bit darker shade of purple like [UIColor colorWithRed:0.0f/255.0f green:150/255.0f blue:251.0f/255.0f alpha:1.0f]; I still have color missmatching on some devices, some iOS12 devices and iOS13 devices with notch. Any idea why? – faris97 May 27 '20 at 10:38

score 33 · Answer 2 · answered Jan 30 '17 at 03:32

UINavigationBar has a bit of a strange behavior when it comes to the color you set on it. As other members have pointed out, you do have to set the translucent boolean to false, but this isn't all to get your bar to match the color you are trying to set. It will be close, but if you look carefully it will not be the exact color you are trying to use. In order to set the true color on UINavigationBar you need to understand what it is doing.

Let's say that I wanted to set my UINavigationBar to this cool color green.

That would be an RGB value of: R=90 | G=200 | B=95.

What UINavigationBar will do is apply it's built-in styling by giving this green a "glossy" look. The result for us is that it is taking our green RGB values and upping each by a factor of 20.

If you look close the green square above does not exactly match the one UINavigationBar is displaying with the same RGB values. This looks just slightly brighter.

To fix this, simply reduce the RBG values by 20 for the color you intend to use for the UINavigationBar's in your application.

So R=90 | G=200 | B=95 will become R=70 | G=180 | B=75.

I like the fact that you explained why it was happening with the possible fix rather than just the workaround. — MultiColourPixel, Aug 16 '17 at 16:18
Brandon , i would like try this solution but in my case original expected R=10 , so considering your solution , what value should i try? — ARS, Nov 01 '17 at 05:28

score 13 · Answer 3 · answered Mar 27 '19 at 10:20

13

You will have to disable property translucent for navigation bar

you can do it programatically with following line

self.navigationController?.navigationBar.isTranslucent = false

OR

Just un-tick "Translucent" check box from storyboard, you will find it in UINavigationBar properties on UINavigationController

answered Mar 27 '19 at 10:20

Harshad Madaye

480
1
7
21

Yeah that solved my problem but only for some colors on some devices. For example, if I use UIcolor.Purple for barTintColor it works always, but if I use a bit darker shade of purple like [UIColor colorWithRed:0.0f/255.0f green:150/255.0f blue:251.0f/255.0f alpha:1.0f]; I still have color missmatching on some devices, some iOS12 devices and iOS13 devices with notch. Any idea why? – faris97 May 27 '20 at 10:40

score 5 · Answer 4 · answered Apr 03 '14 at 17:07

5

It differs because of default UINavigationBar blur effect. I can suggest to set 2px width stretchable background image with your color. Something like this:

    UIImage *image = [UIImage imageNamed:@"yourBlueImage"];
    image = [image stretchableImageWithLeftCapWidth:image.size.width / 2.0f topCapHeight:0.0f];
    [yourNavBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

It's like a trick, because when you set custom backgroundImage blur effect will be disabled and you'll get exact color.

answered Apr 03 '14 at 17:07

Krivoblotsky

1,492
11
17

Thanks, I'll try that later. But how does a blur effect play with my color? I mean, I set it to be opaque, what is my color blending to? – ozg Apr 03 '14 at 17:13
1

Actually this happens because of background color below the navigation bar. Seems to be in your case this is white. So white background become blurred with blue color and you get "lighter" blue in navigation bar. – Krivoblotsky Apr 03 '14 at 17:16

score 4 · Answer 5 · answered Jun 19 '18 at 15:38

I've tried every solution, mentioned in the answers here. But nothing solved it completly. I found this:

First of all you have to have to select the navigationbar and disable the Translucent Checkbox. It's right at the top.

After this is done. The BackgroundColor is still wrong. So don't set the BackgroundColor, set the TintColor of the NavBar. You can do this on the same way like the Translucent. The possibility to set the TintColor is 2 elements under the Translucent Checkbox.

Or you set it using swift or objC:

self.navigationController?.navigationBar.isTranslucent = false  
navBar.barTintColor = UIColor.CustomColor.colorPrimary

score 3 · Answer 6 · answered Nov 01 '17 at 16:58

3

navigationBar.barStyle = UIBarStyle.blackOpaque

Worked to prevent undesired blending with the background, when none of the previous answers worked (in iOS 9.3).

answered Nov 01 '17 at 16:58

atraczyk

56
2

score 2 · Answer 7 · answered Jan 27 '19 at 16:34

I had the same problem as the op. After number of hours of failed attempts I decided to change the logic in my code:

First, set the backround color of the navigation bar:

navigationBar.barTintColor = UIColor.red

iOS will make the red a bit darker/lighter as described by others in this thread.

Second, take the color of the navigation bar and set it to what you need, in my case the background of the cell:

cell.backgroundColor = navigationBar.barTintColor

Now the colors will be the same.

score 2 · Answer 8 · answered Dec 26 '19 at 11:20

2

Add 20 in your RGB to get the desired output. eg. My navbar and UIView in UIViewController RGB was (66,66,167)

I incremented the All RGB's to (86,86,187) to get the same output

answered Dec 26 '19 at 11:20

Abhijit Hadkar

210
2
11

score 1 · Answer 9 · answered Sep 17 '18 at 11:17

1

Try this, this works

navigationController?.navigationBar.shadowImage = UIImage() navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

answered Sep 17 '18 at 11:17

abhi

106
5

score 1 · Answer 10 · answered Sep 13 '20 at 09:31

1

For me this worked -

        let img = UIImage(color: UIColor.red)
        navigationController?.navigationBar.shadowImage = img
        navigationController?.navigationBar.setBackgroundImage(img, for: .default)

answered Sep 13 '20 at 09:31

niku

472
3
12

score 0 · Answer 11 · answered May 09 '20 at 10:05

0

FOR FURTHER READERS

If none of solutions worked for you try to check this one.

Probably you have set the background color of your view controller in the Storyboard using Generic RGB which differs from sRGB used in UIColor class since iOS 10 SDK.

answered May 09 '20 at 10:05

serg_zhd

1,023
14
26

score -35 · Answer 12 · answered Apr 03 '14 at 17:06

-35

I've had this same issue happen to me before. Completely closing Xcode, fixed the issue for me.

answered Apr 03 '14 at 17:06

Adam Johnson

2,198
1
17
23

UINavigationBar background color not the exact UIColor I set it to

12 Answers12

Linked

Related