Search code examples
iphoneuinavigationbaruicolor

Determine correct RGBA value for bar tint color given a client's design image?


I often get given mockup images that define how an iPhone app is supposed to look. These can come from as many different methods as there are projects, sometimes balsamiq or even hand-drawn, sometimes Photoshop. One thing that is common is a bar tint color specified usually to match some corporate branding or overall app design.

If I open one of these design images in an app and use the paint dropper tool to get the RGB value for a color there are many places to do it, from the darkest regions at the lower edge of included buttons to the lightest regions at the top of the bar. I can't find a place to sample the color where the programmed result matches the mockups, it is always wrong in some regard leading to me squinting at two images trying to tweak one or more color values so they match well enough.

Given an sample of how a client imagines a navigation bar should appear*, how do you determine the right UIColor to apply to a bar's tintColor attribute?

*ignoring mockups containing rainbow effects, misapplied gradients and other flights of fancy. Matching color and brightness along the centre line would be good enough. That's at least a defensible position - "What you ask for just isn't how iOS works!"


Solution

  • Set up an app with a UINavigationBar/UIToolbar and three sliders to set the tintColor. Move the sliders around until it looks right.

    If you also bring the image into the app somehow (UIPasteboard or stick it in a resource), using -[CALayer renderInContext:] and some CoreGraphics magic (kCGBlendModeDifference and something to multiply the differences; I forget what I used) you can even compare the two images.

    Simulator note: You will first need to do Cmd-C to "paste" from the Mac pasteboard into the simulator pasteboard.

    What I found was that you can't reproduce the default gradient on both the iPhone and iPad except with a tintColor = nil (the iPad default also has no "shine"). You can get reasonably close, but then the Done button colour is all wrong.

    Usually I sample in the middle of the mock-up nav bar.