This article is mainly composed of two parts, one is to solve the problem of xiB color deviation, the other is to talk about some basic knowledge of color.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

The reason why xiB and code Settings differ in color

In the process of iOS app development, we all follow the annotations given by the design students, while the UI students will use the tool “Color Profile” when drawing. (Color profile description below)

As can be seen from the figure above, the default color configuration file of PS is sRGB, so all the pictures designed for us are based on sRGB.

However, when setting colors in Xcode’s IB related files, the default color profile is Generic RGB.

Therefore, if we directly set the sRGB color value in Generic RGB configuration, the color difference will appear.

You can see the difference more visually in the GIF below

The default color of the code is the same as photoshop’S sRGB, which is different from the Generic RGB of XIB, so the color of the code is the same as that provided by UI students, while xiB is different from them.

Xib sets color and code discrepancy solution

There are two solutions: one is to change the color value of sRGB to Generic RGB and then set it, the other is to change the configuration to sRGB and then set it.

The tool used here to convert between different color configurations is the ColorSync Utility that comes with the MAC

Xib and code set color difference principle analysis

The xiB’s default Color Profile is different from the PS code. The xiB’s default Color Profile is different from the PS code. The XIB’s default Color Profile is different from the PS code.

As we all know, computer, camera, printer and other digital equipment can only recognize 0 and 1 (otherwise they would not be called digital equipment 🐶), so in order to display the colorful nature in the digital equipment, color conversion algorithm (formula) — color model appeared.

Currently, color models widely used include RGB, CMYK, CIELAB, etc. RGB is mainly used in the field of cameras and displays, while CMYK is mainly used in the field of printers. For details, please refer to this article

With the algorithm, it is necessary to have a specific algorithm of color model – color space. It’s called space because each specific color space has a range

As shown in the figure above, there are different ranges of color space, and there will be loss when different ranges of color space are converted, which will cause color difference.

Color model can be understood as a concept and theory, and color space is a concrete description of color model, but it can not be understood by computer. Color configurations are concrete files that can be used directly by digital devices.

You can see the following color configurations in the Mac’s ColorSync Utility application

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

So far, we have solved the problem of color deviation between xiB and code.

Switching between different color configurations results in color differences, and the code and XIB use different color profiles for color Settings, resulting in the same color values appearing differently.

The article was first posted on my blog