Origin:

The design side produced a picture of the default page and marked the color value of the button, and I also wrote it as usual, but after many communication, the design still said that the color looked wrong (I think they all look the same, the design has a pixel eye?).

Screen:

So I opened the XIB file and saw that it was set to 0099E8. Since I didn’t have a pixel eye, I had to use an external tool to see what the actual color value was. Then I used the FLEX tool to check the color value, and the actual color value was 00AAEC (Figure 1).

Solution:

After some operation (I did a lot of operation), it was finally determined that the problem was caused by inconsistent color space of the computer (I remembered that I installed a specific color file for the iMac because the secondary screen was not clear before). Then open the XIB again and check that the color space is not sRGB but Generic RGB (Figure 2). After changing the color space to sRGB, the color value is normal and the design also shows a satisfied and evil smile.

Reflection:

But does that really solve the problem? Yes, but only the color value of the button. Is there any other place in the project that has this problem? This Mac application can list all the elements in the project according to the color value match, and then replace or partially replace by one key. There is also a hidden function that can replace a certain color value in the project with a specified color value (skin). In the end, 245 chromatic aberrations caused by GenericRGB color space were found in the project (Figure 3), and then replaced one by one.

Conclusion:

  • The deviation of color value is because the default color configuration file of Sketch is sRGB IEC61966-2.1 (Figure 4), while Xcode8 was generic RGB before, and sRGB IEC61966-2.1 was unified after Xcode8
  • The UIColor color space for coding is sRGB by default
  • In order to avoid the problem of color deviation, the best solution would be to communicate with the design side of the unified color profile, after all, color profile is constantly evolving, who knows in a few years sRGB will also become obsolete!

ChangeInterfaceBuilderColor ：

Principle:

  1. Record the color model before (matchColor) and after (modifyColor) to match the modifyType to be changed (change only the color value, change only the color space, or change both);
  2. Iterate through all.xib and.storyboard files in the import path;
  3. Do DOM parsing for each.xib and.storyboard file, find all color element tags NSXMLElement and show store;
  4. Click replace to modify the name corresponding to NSXMLNode in the color element tag, source code has detailed comments
  5. Refer to the source for the parsing method

Use: