6

We're building an iOS app which partly makes use of UIWebViews to render some UI elements. I noticed, that colors which are defined on the Storyboard are rendered differently than colors with the same values in the Web View. The following screenshot shows three example colors on the storyboard and in the emulator: #00C2F0, #00843C and #FF008F.

shifted colors Interface Builder and Emulator

The left squares show each color rendered as CSS background-color within a UIWebView, the right square shows the color assigned as background to a UIView directly through Interface Builder.

When I take a screenshot and measure the color values in Photoshop, the color shown within the UIWebView is exactly as defined (i.e. exactly matching the hex color values given above), whereas the color shown through the UIView is shifted.

I've read several posts about "wrong" colors on iOS, which explain this "issue" due to color management with the goal to have a consistent visual appearance on all devices (e.g. here or here). While this sounds totally reasonable, it does not explain the inconsistent rendering through different controls.

Is there anything I can do to achieve matching colors between iOS native views and colors rendered within a UIWebView?

Community
  • 1
  • 1
qqilihq
  • 10,794
  • 7
  • 48
  • 89

1 Answers1

11

I finally solved my issue: The reason was not UIWebView-specific as I had originally assumed, but caused by the fact, that the colors assigned through Interface Builder were in sRGB color space. Changing to "Generic RGB" and then re-assigning the hex color values solved my issue.

color picker color space

Very helpful was this question and answer (I feel the duplicate flag is unjustified).

Community
  • 1
  • 1
qqilihq
  • 10,794
  • 7
  • 48
  • 89
  • For me I had two UIViewControllers in a Storyboard where the background color had the same code, but looked different visually. I had investigated opacity and alpha...and got stuck. This resolved it. I'm not sure how they got set differently in the first place. – davew Nov 12 '15 at 21:34
  • 2
    I think Device RGB works best. Apps like color picker then retrieve the value as defined in xcode storyboard. – Raimundas Sakalauskas Mar 29 '17 at 09:02
  • Generic RGB did *not* work for me. However, Device RGB *did* work to match colors between my Storyboard and Web View. – ChrisRockGM May 29 '18 at 14:19