I don’t know how many times I saw a bright color on the Internet and wanted to put it into my UI to try. , found that the color is not RGB, sometimes it is a hexadecimal string, sometimes it is HSL or something like that, and recently I have seen CMYK suitable for printing. At this point, in order to use this Color in SwiftUI, I had to Google “XXX to Color Swift” again and then dig through the countless UIColor or Swift 3 examples to see if anyone had written SwiftUI examples. The next step is to organize the snippets into extensions and put them into your own projects.

After going through this process again yesterday, I took the plunge and built a wheel to avoid reinventing the wheel… The SwiftUIColor project is a summary of common initializing extensions for color Spaces.

To use it, simply put the Color. Swift from the root directory into your project. Because this is the only file, Swift Package is not made, otherwise it will be inconvenient to use it…

For RGB, for example, I provide a constructor like this:

// `r`, `g`, `b`, `a` in [0, 1].
Color(r: Double, g: Double, b: Double, a: Double = 1)
// `r`, `g`, `b`, `a` in [0, 255].
Color(r: Int, g: Int, b: Int, a: Int = 255)
Copy the code

To avoid overwriting code like Double(r) / 255.

For HEX, which is a hexadecimal color, values like “#ABC123” or “#ABC “are supported:

Color(hex: String, opacity: Double = 1) throws
Copy the code

For HSL and HSV, since H is generally expressed as an Angle between 0 and 360, constructors with input of type Angle are provided, such as:

// `h` is an `Angle` variable as custom.
// `s`, `l`, `opacity` in [0, 1].
Color(h: Angle, s: Double, l: Double, opacity: Double = 1)
Copy the code

There is also a small demo in the project that uses these colors:

At present, I support RGB, HEX, HSL, HSV and CMYK. If you have other needs, please feel free to mention PR~

Design popular Science Small classroom — What is CMKY

CMYK color space (CMYK color space, CMYK color space)

As we all know, the computer screen in the display of pictures using R(Red), G(Green), B(Blue) three colors, that is, RGB pictures of the three channels. Red, green and blue are known as superimposed primary colors, and their light phases can be combined to produce other colors, such as red and green light mixed into yellow. They are used as primary colors because the screen emits light itself.

If you remember, the three primary colors taught when you were young were red, Yellow and blue, which are actually C(Cyan), M(Magenta), Y(Yellow), Cyan, Magenta and Yellow. They are called reduced primary colors. For something that doesn’t emit light itself, its color depends on the color of the light it can’t absorb (remember chlorophyll is green because it absorbs red and blue-violet light?). So three primary colors like prints or pigments are called reduced three primary colors, or CMY. They can be mixed to form other colors, such as yellow and cyan to produce green, and yellow and magenta to produce red. The K of CMYK is blacK, or blacK (the initial letter B is not taken to distinguish it from the RGB blue), and the four of them are known as printing tetracholor. Black is introduced because the black effect produced by overlapping ink of other three colors is not pure and the cost is high, so it is better to print directly with black.

It is important to note that CMYK can actually represent less than RGB, which sometimes makes the printed color not match the on-screen color, so some graphic designers prefer CMYK.

This is the end of the popular science class ~ hope you learned some design tips ~