设计师说他用 CMYK 更习惯?SwiftUI 颜色初始化小合集

1,420 阅读3分钟

不知道有多少次,我在网上看到一个亮眼的颜色,想要放进自己的 UI 试试的时候(吸色可耻,请勿模仿...),发现这个颜色不是用 RGB 表示的,有的时候是 16 进制的字符串,有的时候则是 HSL 之类的表示方式,最近更是看到了适合印刷的 CMYK。这个时候,为了在 SwiftUI 中使用这个颜色,我就得再一次 Google “XXX to Color Swift”,然后从无数的 UIColor 或者 Swift 3 的例子中刨,看看有没有人写过 SwiftUI 的例子。之后就是又一次把刨出来的代码片段组织成扩展,放进自己的项目里。

在昨天又一次经历了这个过程之后,我毅然决然地为了避免重新造轮子而造了个轮子...把常见的颜色空间的初始化扩展总结了一下,放在了 SwiftUIColor 这个项目里。

使用方法很简单,把根目录里的 Color.swift 放进你的项目里就好了。因为就这一个文件,所以没有做成 Swift Package,不然用着不方便...

例如对于 RGB,我提供了这样的构造函数:

// `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)

来避免我们重写 Double(r) / 255 这样的代码。

对于 HEX,也就是 16 进制颜色,则支持传入 "#ABC123" 或者 "#abc" 这样的值:

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

对于 HSL 和 HSV,因为 H 一般表示为 0 到 360 之间的角度,所以提供了输入为 Angle 类型的构造函数,如:

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

在项目中也有一个使用了这些颜色的小 demo:

目前我支持了 RGB, HEX, HSL, HSV 和 CMYK,如果有朋友还有其他的需要,也欢迎来提 PR~

设计科普小课堂——什么是 CMKY

文章到这里就结束不免太水了~ 所以和看到这里的朋友聊一聊标题和前文中都出现过的 CMYK 颜色空间。

我们都知道,计算机屏幕在显示图片的时候使用的是 R(Red)、G(Green)、B(Blue) 三种颜色,也就是 RGB 图片的三个通道。红绿蓝这三个颜色被称为叠加性原色,它们的光相叠加可以产生其他颜色,例如红光和绿光混合为黄光。因为屏幕自身发光,所以会采用它们作为原色。

而如果你还有印象的话,小的时候老师教的三原色是红黄蓝,这其实应该是 C(Cyan)、M(Magenta)、Y(Yellow),也就是青色、品红和黄色。它们被称为削减型原色。对于本身不发光的物品来说,它的颜色取决于它不能吸收的光的颜色(记得叶绿素是绿色是因为它吸收红光和蓝紫光吗?),所以像印刷品或者颜料的三原色被称为削减三原色,也就是 CMY。它们相混合可以组成其他的颜色,例如黄色和青色可以产生绿色,黄色和品红可以产生红色。CMYK 的 K 则是 blacK,也就是黑色(没有取首字母 B 是为了和 RGB 中的蓝色相区分),它们四个被称为印刷四分色。引入黑色是因为用其他三种颜色的墨水重叠产生的黑色效果不纯,成本也高,所以不如直接用黑色进行印刷。

值得注意的是,CMYK 所能表示的颜色实际上是少于 RGB 的,这使得有的时候打印出来的颜色和屏幕上的不符,所以一些平面设计师更倾向于使用 CMYK。

科普小课堂到这里就结束了~ 希望你从中学到了一些设计小知识~