计算机如何表示颜色

数字显示器通过混合三种原色光（红、绿、蓝，即加色模型）来发光。通过调整每个通道的强度，显示器可以再现数百万种色调。为了在软件中管理这些混合，开发人员使用不同的颜色模型，其中十六进制（Hex）和RGB最为常见。在网页浏览器中，这些颜色格式告诉显示器精确地为屏幕上微小的红、绿、蓝子像素提供多少电力，这些子像素混合形成你感知的像素。

RGB颜色空间

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

十六进制记法简写

十六进制颜色代码是RGB通道内二进制值的十六进制（基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）计数系统之间转换。网页浏览器可以互换处理两种格式，但开发人员通常更喜欢HEX的简洁性和易于复制粘贴，而RGB在需要通过JavaScript动态操作值时更有用。

透明度与Alpha通道

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

颜色转换的实际应用

虽然设计师通常在Figma或Adobe XD等图形设计软件中使用HEX格式，但前端工程师经常在样式表中使用RGBA。例如，如果你希望背景颜色匹配品牌风格指南（#0070F3），但希望它20%透明，你需要将HEX转换为RGB（0, 112, 243），并在CSS中应用为background-color: rgba(0, 112, 243, 0.2);。这种灵活性允许丰富的阴影、着色背景和交互状态，对用户悬停行为做出良好响应。

可访问性与文本对比度

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

本地优先处理与色板完整性

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