颜色转换器（HEX、RGB、HSL） 常见问题
如何将 HEX 转换为 RGB？
要将十六进制颜色代码转换为 RGB，请将六位十六进制字符串 #RRGGBB 拆分为三对，然后将每一对从十六进制（base-16）转换为十进制（base-10）。
示例： #FF5733
FF= 255（红）57= 87（绿）33= 51（蓝）- 结果：
rgb(255, 87, 51)
对于简写十六进制（#F53），先将每一位扩展成一对：#F53 变为 #FF5533。每一位数字都会加倍：F 扩展为 FF，5 扩展为 55，3 扩展为 33。
八位十六进制（#RRGGBBAA）的转换方式相同，只是多出一对用于 alpha 通道。#FF573380 为 alpha 通道添加了 80（128，即约 50% 不透明度）。
如需即时转换，请使用我们的颜色转换器工具。它支持所有格式，包括带或不带 alpha 的短格式与长格式十六进制。
RGB 和 RGBA 有什么区别？
RGB 使用红、绿、蓝三个通道来定义颜色。RGBA 是 RGB 加上一个控制不透明度的 Alpha 通道。alpha 值的范围从 0.0（完全透明）到 1.0（完全不透明）。
rgb(255, 0, 0) /* 完全不透明的红色 */
rgba(255, 0, 0, 0.5) /* 50% 不透明度的红色 */
在现代 CSS（CSS Color Level 4）中，rgba() 别名已不再需要。rgb() 函数现在接受可选的 alpha 通道：
rgb(255 0 0 / 0.5) /* 现代语法，50% 不透明度的红色 */
所有现代浏览器都支持此语法。旧版 rgba() 函数在任何地方都能使用且不会被移除，但对于新代码，推荐使用带斜杠语法的 rgb()。
如何将 RGB 转换为 HSL？
将 RGB 转换为 HSL 涉及三个步骤：
- 归一化 RGB 值到 0-1 范围（除以 255）
- 找出三个归一化值的最小值和最大值——最小值和最大值的平均值就是明度（L）
- 计算色相和饱和度，依据哪个通道是最大值以及最大值与最小值的差
计算公式根据哪个颜色通道占主导而有所不同：
- 如果红色是最大值：色相 = (绿 - 蓝) / (max - min)
- 如果绿色是最大值：色相 = 2 + (蓝 - 红) / (max - min)
- 如果蓝色是最大值：色相 = 4 + (红 - 绿) / (max - min)
- 饱和度取决于明度：如果 L > 0.5，饱和度 = (max - min) / (2 - max - min)，否则饱和度 = (max - min) / (max + min)
这些计算并不简单且容易出错，因此推荐使用颜色转换工具来获得即时结果。
为什么同样的颜色在不同屏幕上看起来不一样？
颜色外观会因多种原因在不同屏幕之间存在差异：
屏幕校准 — 大多数消费级屏幕未经过颜色校准。出厂默认设置在不同屏幕之间，其亮度、对比度和色温差异很大。
色域差异 — 不同的屏幕支持不同的颜色范围。sRGB 是 Web 标准，但许多现代手机和笔记本电脑支持 DCI-P3（宽 25%）。超出 sRGB 色域的颜色在广色域显示器上显示正确，但在标准显示器上会被裁剪或偏移。
显示技术 — OLED 屏幕比 LCD 屏幕能产生更深的黑色和更饱和的颜色。IPS 面板比 TN 面板具有更好的色彩准确度。
观看角度 — 颜色在从一定角度观看时会发生偏移，尤其是在低端显示器上。
亮度和环境光 — 在黑暗房间中以 50% 亮度显示的屏幕，与在直射阳光下以 100% 亮度显示的同一屏幕看起来不同。
要尽量减少差异： 在 sRGB 色彩空间中工作，使用硬件校准器校准显示器，并在发布前在多种设备上测试你的设计。
HSL 颜色模型适合用来做什么？
HSL（色相、饱和度、明度）非常适合程序化颜色操作。其关键优势在于：一个通道承载"颜色"信息（色相），而另外两个通道独立于色相值控制外观。
HSL 让以下操作变得简单：
- 颜色调色板 — 保持相同的色相，改变明度和饱和度来创建完整的颜色梯度
- 悬停和激活状态 — 按固定百分比改变明度：
hsl(220, 80%, 50%)->hsl(220, 80%, 60%) - 深色模式 — 降低所有颜色的明度：从每种颜色的明度中减去 30%
- 主题 — 交换色相值，从相同的饱和度/明度结构生成全新的配色方案
- 禁用状态 — 降低饱和度使元素去饱和：
hsl(220, 80%, 50%)->hsl(220, 30%, 70%)
HSL 不适合做什么：
HSL 在感知上并不均匀。具有相同明度值的两种颜色（例如 hsl(60, 100%, 50%)——亮黄色和 hsl(240, 100%, 50%)——纯蓝色）的感知亮度差异很大。如需感知均匀的颜色操作，请改用 OKLCH。
HEX 颜色中的 # 表示什么意思？
# 前缀（井号或磅符号）告诉 CSS 解析器，后面的字符代表一个十六进制颜色值。它是 CSS 和 HTML 中十六进制颜色代码的标准记号。
完整格式为 #RRGGBB 或 #RRGGBBAA：
| 组成部分 | 含义 | 示例（#FF5733） |
|-----------|---------|---------------------|
| # | 十六进制前缀 | 必需指示符 |
| RR | 红色通道 | FF（255） |
| GG | 绿色通道 | 57（87） |
| BB | 蓝色通道 | 33（51） |
在 HTML 中，# 也用于锚点链接（<a href="#section">），但在 CSS 上下文或 style 属性中，它始终表示十六进制颜色。HTML 还支持旧版"命名颜色"（140 个预定义名称，如 red、blue、rebeccapurple），它们不需要 #。
什么是色域，为什么它很重要？
色域是设备可以显示或色彩空间可以表示的颜色范围。可以把色域想象成屏幕或文件格式可用的颜色"词汇表"。
常见色域，从最小到最宽：
| 色彩空间 | 相对大小 | 用途 | |-------------|--------------|------------| | sRGB | 基准 | Web 标准，大多数显示器，所有浏览器 | | Adobe RGB | 宽约 50% | 专业摄影，印刷 | | DCI-P3 | 宽约 25% | 现代手机，Mac，许多笔记本电脑 | | Rec. 2020 | 宽约 75% | HDR 电视，高端显示器 |
为什么它很重要： 超出屏幕色域的颜色无法准确显示。设备会将颜色裁剪到最接近的色域内值，或进行近似处理。这就是为什么设计文件中的鲜艳深红色在标准笔记本电脑屏幕上可能显得暗淡或浑浊。
对于 Web 设计： 始终在 sRGB 中设计，或确认你的颜色在 sRGB 范围内安全。OKLCH 和 display-p3 色彩空间可以让你针对更宽的色域，但你应该为标准屏幕提供 sRGB 回退方案。
hex 和带 alpha 的 hex 有什么区别？
标准 hex（#FF5733）使用六位数字，没有 alpha 通道——颜色始终完全不透明。带 alpha 的 hex（#FF573380）使用八位数字，在末尾增加两个十六进制数字用于 alpha（不透明度）通道。
hex 中的 Alpha 值：
| Hex 对 | 十进制 | 不透明度 |
|----------|---------|---------|
| 00 | 0 | 完全透明 |
| 80 | 128 | 约 50% 不透明度 |
| FF | 255 | 完全不透明 |
示例：
#FF5733 — 实心红橙色，无透明度
#FF5733FF — 相同颜色，完全不透明（冗余的 FF）
#FF573380 — 相同颜色，50% 透明
#FF573300 — 相同颜色，完全不可见
还有带 alpha 的四位简写 hex：#F538 扩展为 #FF553388（50% 不透明度）。
浏览器支持： 所有现代浏览器都支持八位 hex。对于旧版浏览器（Internet Explorer）支持，请改用 rgba()。
如何为我的网站挑选无障碍颜色？
按照以下分步流程构建无障碍颜色系统：
1. 从主要品牌色开始。 选择代表你品牌的色相，然后使用 HSL 或 OKLCH 创建从非常浅（背景）到非常深（文字）的完整梯度。
2. 将文字设置为接近黑色。 白色背景上的正文字体应为 #1A1A1A 到 #333333。切勿在纯白色上使用纯黑色（#000000）——这会导致一些读者眼睛疲劳。白色背景上的深灰色可提供更好的可读性。
3. 检查每一对前景-背景组合。 文字和背景的每一种组合都必须满足 WCAG 标准：
- 常规文字：最低 4.5:1（WCAG AA）
- 大号文字：最低 3:1（WCAG AA）
- 正文字体目标为 7:1（WCAG AAA）
4. 切勿只使用颜色作为唯一的区分方式。 链接必须带有下划线（而不仅仅是不同的颜色）。错误状态必须包含图标或文字。图表必须使用图案或标签。
5. 使用色盲模拟器进行测试。 绿色盲（红绿色盲）是最常见的类型。确保你的设计在没有颜色感知的情况下也能正常工作。
6. 在灰度模式下验证。 如果你的设计在转换为灰度后失去意义，说明你过度依赖颜色来传达信息。
使用我们的颜色转换器即时检查任意两种颜色之间的对比度比例。