🎨 颜色转换器

关于颜色转换

HEX 和 RGB 是 Web 开发中最常用的两种颜色表示方式。HEX 格式以 #RRGGBB 的形式表示颜色，其中 RR、GG、BB 分别代表红、绿、蓝三个通道的十六进制值（00-FF）。RGB 格式以 rgb(r, g, b) 的形式表示，三个分量是十进制值（0-255）。

两种格式本质上是等价的：HEX 的 #FF0000 就是 RGB 的 rgb(255, 0, 0)，都代表纯红色。设计师可能习惯使用 HEX（因为它更简洁），而开发者有时需要 RGB 格式（方便通过程序调整颜色分量）。两种格式可以精确互转，不存在精度损失。

使用说明

1. HEX → RGB — 在 HEX 输入框中输入颜色值（如 #4F46E5 或 4f46e5），点击转换即可看到对应的 RGB 值
2. RGB → HEX — 分别输入 R、G、B 三个通道的值（0-255），点击转换即可得到对应的 HEX 值
3. 颜色预览 — 无论哪种转换方式，结果下方的色块都会实时显示对应的颜色，帮助直观确认

常见应用场景

• 设计稿转代码 — 设计师在 Figma 或 Sketch 中使用的 HEX 颜色值，转换为 RGB 后在 CSS 中使用
• 颜色微调 — 通过 RGB 数值可以更直观地调整颜色的亮度、饱和度等属性
• 渐变计算 — 在两个颜色之间生成渐变时，通常需要 RGB 数值进行插值计算

常见问题

Q: 3 位缩写 HEX 可以转换吗？

可以。例如 #F00 会被展开为 #FF0000，然后转换为对应的 RGB 值。正式项目中仍建议统一使用 6 位格式，便于搜索、校验和维护。

Q: HEX 和 RGB 哪个颜色更准确？

两种格式表示的颜色完全一样，没有精度差异。#4F46E5 和 rgb(79, 70, 229) 代表同一个颜色。

HEX 与 RGB 的换算规则

HEX 使用十六进制表示红绿蓝三个通道：#RRGGBB 中每个通道取值 00-FF。RGB 使用十进制表示同样三个通道，取值 0-255。换算时只需把两位十六进制数转成十进制：FF 是 255，4F 是 79，E5 是 229，因此 #4F46E5 等于 rgb(79, 70, 229)。反向换算时把十进制数转成两位十六进制并补零即可。

一个真实取色转码流程

从设计稿复制一个颜色后，先判断它是什么格式：设计工具常显示 HEX，图片取色工具可能给出 RGB 数值。确定格式后把值粘贴到对应输入框，点击转换即可得到另一种格式。如果只需要近似色，还可以微调 RGB 三个分量，观察预览色块的变化，找到适合背景、文字或边框的深浅版本。

网页配色的实际考虑

一个可用的配色不只需要好看，还需要保证层级和对比度：正文用深色，说明文字用中灰，边框用浅灰；按钮使用主色，危险操作使用红色或橙色。普通文字与背景的对比度至少应达到 4.5:1，大号文字至少 3:1。对比度不足时，即使颜色很美，弱视用户和手机强光下也可能看不清。

常见转换问题

• 输入的 HEX 少于 6 位：缩写形式需要先补全，例如 #FFF 转成 #FFFFFF
• RGB 数值超出 0-255：检查是否混入了百分号格式或 HSL 数值
• 转换后颜色看起来不同：确认屏幕色域、浏览器取色方式是否一致
• HEX 中混入中文输入法字符：重新用半角英文输入 # 和字母数字

如何把颜色用在网站里

确定主色和辅助色后，建议使用 CSS 变量统一管理，例如在 :root 中定义 --primary、--text、--border。这样换主题时只需修改变量，不需要逐个页面找颜色。需要生成深色模式时，也应以变量为基础重新设计，而不是直接反转所有颜色。开发者工具中的取色器支持在不同格式间切换，能帮助你快速核对。

无障碍与深色模式

红色与绿色同时使用时，不要只靠颜色传达成功或失败，应配合图标或文字。深色模式建议使用深灰背景搭配浅灰文字，避免纯黑与纯白造成刺眼对比。所有状态颜色都应经过对比度检查，尤其是按钮上的浅色文字。颜色工具可以帮助你确认换算结果，但最终可读性应结合真实页面环境验证。

HEX、RGB、HSL 的关系

HEX 与 RGB 描述同一种颜色，只是进制不同；HSL 则用色相、饱和度、亮度来描述颜色，更符合人对颜色的理解。三种格式可以互相转换，但应用场景不同：CSS 中最常见 HEX 与 RGB，调色和主题设计常用 HSL。本工具先把 HEX 与 RGB 互转，如果你需要进一步生成同色系颜色，可以保持色相不变，调整饱和度与亮度。

常见疑问速答

HEX 可以写 3 位吗？可以，#F00 会被浏览器自动展开为 #FF0000，但许多工具和编辑器不支持缩写。为了兼容，建议使用 6 位完整格式。

颜色有 alpha 透明度怎么办？HEX 的 8 位写法 #RRGGBBAA 或 CSS 的 rgba() 都可以表示透明度。本工具的 RGB 转换针对不透明颜色，透明度请按 0-255 单独处理。

为什么同一个颜色在不同屏幕看起来不同？屏幕色域、亮度和显示模式会影响观感，这是正常现象。跨设备设计时应优先参考数值而不是肉眼判断。

如何找到合适的文字色？先确定背景色，再选择对比度超过 4.5:1 的文字色。若不确定，可用更深的文字色或调整背景明度来提升可读性。

对比度结果怎么读

页面中的对比度检查按 WCAG 相对亮度公式计算。数值越高，前景与背景的亮度差别越大，不代表一定越好看。普通正文通常至少需要 4.5:1，大号文字至少 3:1；如果项目需要更严格的无障碍目标，可以继续参考 7:1 的 AAA 阈值。下表的数值可以直接用于核对输入结果。

前景 / 背景	对比度	普通文字 AA	适用判断
#1E293B / #FFFFFF	14.63:1	通过	适合正文
#4F46E5 / #FFFFFF	6.29:1	通过	可作链接或主按钮
#64748B / #FFFFFF	4.76:1	通过	适合说明文字
#94A3B8 / #FFFFFF	2.56:1	未通过	不要用于小字号正文

从设计稿到可读页面的检查顺序

先确定页面背景属于哪一层，再选择文字色；悬停、禁用、边框和图标状态要分别检查，不能只验证默认状态。把颜色写入 CSS 变量后，可以在浏览器中切换设备和模拟色弱模式进行复核。若按钮在白色页面通过，但悬停背景变成浅色后又失去对比度，说明状态色也需要单独测试，而不是只测一个颜色组合。

配色自查清单

• 正文与背景对比度不低于 4.5:1
• 主色不超过 2 个，状态色使用辅助色而非随机色
• 深色模式重新设计背景层级，不直接反转
• 颜色统一存为 CSS 变量，避免同一个色值写多遍
• 状态提示同时使用图标或文字，不只依赖颜色

自查完成后，可以用本工具把设计稿颜色转为代码格式，再放到真实页面中检查可读性。颜色数值正确是基础，视觉层级与用户可读性才是最终目标。

最后，把转换结果与设计稿原始色值并排对比一次，确认没有大小写、补零或复制错误。正确的颜色格式能让设计稿到代码的转换更顺畅，也减少后续主题维护中的差异。

当你需要从截图取色或根据文字颜色反推背景时，可以先转换任意一边，再通过预览色块确认关系。反复练习几次，HEX 与 RGB 的换算就不再是困扰。