Get the right color in iOS7 translucent navigation bar

Question

How can I get the right coloring for my translucent navigation bars in iOS 7? The navigation bar just adjusts the given color to a much brighter one. Changing brightness or

Answer 1

From comparing my before an after colors I found there was a drop of 21% in saturation while Hue and Brightness remained the same.

By adding the 21% back on I was able to improve the color matching significantly. Unfortunately our color had a saturation above 80 to start with so pushing it above 100% had diminishing returns and didn't match perfectly but it got much closer.

For colors with saturation below 80 it should do even better.

For info on how to adjust saturation of your color How can I modify a UIColor's hue, brightness and saturation?

Answer 2

This happens because the navigationBar.translucent == YES. Set this property to NO and it will be the correct color. However, I have not found out how to apply this translucent setting to all navigation bars without calling it explicitly on each. The status bar also stays the same color as the navigation bar this way.

Answer 3

i've looked a lot around and none of these has actually worked for me, the solution is as the following:

1- Set your navigation barTintColor (background).

2- Run the simulator and open your app, in your mac open Digital Color Meter and select the drop down to "Display in Generic RGB".

3- Use this tool to pick the navigation color that you will set for your view.

4- Go to storyboard and then select background color and make sure its on RGB Sliders, and put the color in here, you will get the exact same color of the navigation bar.

Note: it doesn't matter if isTranslucent is on or off.

Hope this helps you out.

Answer 4

I've improved code from Achieving bright, vivid colors for an iOS 7 translucent UINavigationBar in my fork: https://github.com/allenhsu/CRNavigationController

With my modification, the result color on screen (picked on white background) will be exactly the same value passed into setBarTintColor. I think it's an amazing solution.

Answer 5

The bar will adjust your color values.

Preferred method, for RGB >= 40 only, will give the most blurring

You can use this calculator and put in what you want the color to be when rendered on screen, it will tell you what to set the color of the barTintColor so when Apple adjusts it, it will show as intended

https://www.transpire.com/insights/blog/bar-color-calculator/

Edit: Note that these calculations are for a white background, and for lighter colours (rgb over 40, if you need darker, you will need to add a background layer like others have mentioned - although that will reduce the bar's blur)

In depth guide: https://www.transpire.com/insights/blog/custom-ui-navigationbar-colors-ios7/

Snippet:

@interface UnderlayNavigationBar : UINavigationBar

@end

.

@interface UnderlayNavigationBar ()
{
    UIView* _underlayView;
}

- (UIView*) underlayView;

@end

@implementation UnderlayNavigationBar

- (void) didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if(subview != _underlayView)
    {
        UIView* underlayView = self.underlayView;
        [underlayView removeFromSuperview];
        [self insertSubview:underlayView atIndex:1];
    }
}

- (UIView*) underlayView
{
    if(_underlayView == nil)
    {
        const CGFloat statusBarHeight = 20;    //  Make this dynamic in your own code...
        const CGSize selfSize = self.frame.size;

        _underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, selfSize.width, selfSize.height + statusBarHeight)];
        [_underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [_underlayView setBackgroundColor:[UIColor colorWithRed:0.0f green:0.34f blue:0.62f alpha:1.0f]];
        [_underlayView setAlpha:0.36f];
        [_underlayView setUserInteractionEnabled:NO];
    }

    return _underlayView;
}

@end

.

UIViewController* rootViewController = ...;
UINavigationController* navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[UnderlayNavigationBar class] toolbarClass:nil];
[navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:90.0f/255.0f alpha:1]];
[navigationController setViewControllers:@[rootViewController]];

Answer 6

Just use this simple barTintColor Calculator:

http://htmlpreview.github.io/?https://github.com/tparry/Miscellaneous/blob/master/UINavigationBar_UIColor_calculator.html