Swift中的Hex颜色：#FF5733的魔法如何运作

为什么#FF5733不仅仅是一串随机字符？

你是否曾想过，代码中常见的#FF5733背后隐藏着什么？对大多数开发者来说，它只是“某种橙粉色”。但如果深入挖掘，这个六位代码背后是优雅的数学、位运算，以及源于老式显示器和HTML规范的历史。

在本文中，我们将从零开始解析Swift中的hex颜色。你将了解RGB通道如何工作，为什么hex格式如此流行，以及——最重要的是——如何编写自己的UIColor（或SwiftUI中的Color），使其接受十六进制字符串。是的，我们将展示你可以在今天直接使用的真实代码。

如果你曾在Stack Overflow上寻找“How to use hex color values in Swift”的答案——你来对地方了。只不过这次带有中文翻译和深入解释。

Hex颜色的解剖：这些数字从何而来？

让我们从最简单的开始。屏幕上的颜色是三种基本成分的组合：红色（Red）、绿色（Green）和蓝色（Blue）。每个成分的取值范围是0到255。为什么是255？因为这是一个字节（8位）能表示的最大数字。

Hex格式只是记录这三个数字的一种紧凑方式。

\n
• #FF5733被拆分为三对：FF、57、33。
\n
• 十进制中的FF = 255（红色最大值）。
\n
• 57 = 87（绿色）。
\n
• 33 = 51（蓝色）。
\n
• 最终颜色：RGB(255, 87, 51)——亮珊瑚色。
\n

十六进制系统（基数为16）使用数字0到9和字母A到F。这使得仅用两个字符就能表示0到255之间的数字。很方便，对吧？

为什么hex在Web和iOS中如此流行？

从历史上看，hex代码来自网页设计。当CSS刚开始发展时，#RRGGBB成为了指定颜色的标准。Swift和UIKit继承了这一传统，但有一个细微差别：UIColor没有内置的hex字符串解析器。

每个iOS开发者都至少编写过一个UIColor的扩展，将"#FF5733"转换为UIColor。这已成为一种“入门仪式”。今天，我们将一起经历这个仪式。

在Swift中编写自己的hex解析器（逐步）

让我们为UIColor创建一个方便且安全的初始化器，使其接受hex字符串。我们将逐步解析每个步骤。

步骤1：基本结构

import UIKit\n\nextension UIColor {\n    convenience init?(hex: String) {\n        // 魔法将在这里发生\n    }\n}\n

我们使用convenience init?（可失败的初始化器），因为字符串可能无效。

步骤2：清理字符串

用户可能传入"#FF5733"、"FF5733"甚至"0xFF5733"。我们需要去除所有多余字符。

var hexString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()\n\nif hexString.hasPrefix("#") {\n    hexString.removeFirst()\n}\n\nif hexString.hasPrefix("0X") {\n    hexString.removeFirst(2)\n}\n

步骤3：检查长度

标准的hex代码是6个字符（RRGGBB）。但也有8个字符的格式（RRGGBBAA），其中AA是alpha通道（透明度）。我们将支持两者。

guard hexString.count == 6 || hexString.count == 8 else {\n    return nil\n}\n

步骤4：将字符串解析为数字

现在是最有趣的部分。我们需要将字符串转换为十六进制数字，然后从中提取RGB分量。

guard let hexValue = UInt64(hexString, radix: 16) else {\n    ret