設定顏色顯著程度的 UIColor.Prominence — iOS 18 新功能

設計 iOS App 畫面時，我們通常會用顏色的深淺表示內容的重要程度，比方標題採用較深的黑色，副標題採用較淺的黑色。

iOS 18 的 UIColor 新增了設定顏色顯著程度的 enum UIColor.Prominence，包含 primary(主要的)、secondary(次級的)、tertiary(第三級的)、quaternary(第四級的) 四種選項，幫助我們依據內容的重要性設定適合的顏色。

UIColor.Prominence | Apple Developer Documentation

@available(iOS 18.0, *)
public enum Prominence : Int, @unchecked Sendable {

    case primary = 0

    case secondary = 1

    case tertiary = 2

    case quaternary = 3
}

使用的方法很簡單，從 UIColor 呼叫 withProminence(_:)，傳入適合的 Prominence，即可產生不同深淺的顏色。

withProminence(_:) | Apple Developer Documentation

以下讓我們試試幾個例子。

• 不同深淺的 systemRed。

UIColor.systemRed.withProminence(.primary)
UIColor.systemRed.withProminence(.secondary)
UIColor.systemRed.withProminence(.tertiary)
UIColor.systemRed.withProminence(.quaternary)

從 playground 顯示的結果，我們看出 prominence 的原理其實是調整顏色的透明度，primary 的 alpha 是 1，secondary 是 0.5，tertiary 是 0.25，quaternary 是 0.18。

以下我們以小王子故事的金句為例，將不同深淺的 systemRed 套用在文字上。

• 不同深淺的自訂顏色。

UIColor(red: 30/255, green: 144/255, blue: 1, alpha: 1).withProminence(.primary)
UIColor(red: 30/255, green: 144/255, blue: 1, alpha: 1).withProminence(.secondary)
UIColor(red: 30/255, green: 144/255, blue: 1, alpha: 1).withProminence(.tertiary)
UIColor(red: 30/255, green: 144/255, blue: 1, alpha: 1).withProminence(.quaternary)