计算机如何表示颜色

Digital displays emit light by blending three primary colors: red, green, and blue (the additive color model).通过调整每个通道的强度，显示器可以再现数百万种色调。为了在软件中管理这些混合，开发人员使用不同的颜色模型，其中最常见的是十六进制(Hex)和RGB。在网络浏览器中，这些颜色格式准确地告诉显示器需要为屏幕上的红色、绿色和蓝色光的微小子像素提供多少电量，这些子像素混合在一起形成您感知的像素。

RGB 色彩空间

RGB 模型使用以 10 为基数的坐标定义三维笛卡尔空间中的颜色坐标。每个坐标（红、绿、蓝）的范围是 0 到 255（代表一个字节的数据，或 8 位）。当所有三个通道都设置为 0 时，不发光，产生黑色。当所有三个设置为 255 时，结果是全光谱白光。混合特定值会生成中间颜色：例如， rgb(255, 0, 0) 产生纯红色，而 rgb(128, 0, 128) 产生中等紫色。由于每个通道有 256 个可能的值，因此系统可以产生 256 × 256 × 256，这正好等于 16,777,216 种不同的颜色组合。这通常称为“真彩色”或 24 位颜色。

十六进制简写

十六进制颜色代码是 RGB 通道内二进制值的简写十六进制（基数 16）表示形式。由于 16 进制使用 16 个符号（0-9 后跟 A-F），因此单个字节（有 256 个状态）可以恰好由两个十六进制字符表示。

典型的六字符十六进制代码，例如 #0070F3，被解析为三个部分：

• 红色： 前两个字符 00（十进制 0）。
• 绿色：中间的两个字符70（十六进制70等于十进制112：7 × 16 + 0）。
• 蓝色：最后两个字符F3（十六进制F3等于十进制243：15 × 16 + 3）。

十六进制和 RGB 之间的转换涉及在十进制（以 10 为基数）和十六进制（以 16 为基数）计数系统之间转换这些单独的通道字节。 Web 浏览器可以互换地处理这两种格式，但开发人员通常更喜欢 HEX，因为它简洁且易于复制粘贴，而 RGB 在需要通过 JavaScript 动态操作值时非常有用。

透明度和 Alpha 通道

标准 RGB 和 Hex 代码代表完全不透明的颜色。为了设计重叠布局，开发人员添加了第四个通道：Alpha。在 CSS 中，这是使用 rgba() 函数来表达的，其中 Alpha 通道的范围从 0.0（完全透明）到 1.0（不透明）。现代浏览器还接受八个字符的十六进制代码（例如#0070F380），其中第八个字节表示十六进制 alpha 值（例如十六进制“80”代表十进制 128，或大约 50% 的不透明度）。 Alpha 功能的添加将 24 位色彩空间转变为 32 位色彩空间，从而实现复杂的堆叠、覆盖和玻璃态设计趋势。

颜色转换的实际应用

虽然设计师经常在 Figma 或 Adobe XD 等图形设计软件中使用 HEX 格式，但前端工程师经常在样式表中使用 RGBA。例如，如果您希望背景颜色与品牌风格指南 (#0070F3) 相匹配，但希望其透明度为 20%，则可以将十六进制转换为 RGB (0, 112, 243) 并在 CSS 中将其应用为 背景颜色：rgba(0, 112, 243, 0.2);。这种灵活性允许丰富的阴影、有色背景和交互状态，对用户的悬停行为做出完美的响应。

辅助功能和文本对比度

选择颜色代码时，确保背景颜色和文本颜色具有足够的对比度以便可读至关重要。网页内容可访问性指南 (WCAG) 建议普通文本的对比度至少为 4.5:1，大文本的对比度至少为 3:1。将我们内置的实时对比度检查器与 HEX/RGB 输入一起使用，可以帮助您立即确定您选择的颜色组合是否适合有视觉障碍的用户。

本地优先处理和色样完整性

我们的颜色转换工具完全在您设备上的网络浏览器中本地运行。颜色代码、RGB 参数或设计配置不会发送到我们的后端服务器。这种客户端处理模型可确保您的创意品牌风格和资产的完全机密性，同时提供零网络延迟的即时转换。您可以随时放心地离线安全地转换、预览和构建调色板。