RGB 转 HEX 转换器
快速将 rgb(r, g, b) 值转换为 HEX 颜色代码。这个转换器在处理 CSS、设计令牌时非常有用，或者当你想在设计工具和代码中对齐颜色时。
在 RGB 或 HEX 格式中输入一个值，第二个字段会立即更新。转换是双向的，因此你可以从任何适合你工作流程的格式开始。
你还可以使用颜色选择器进行实验。当你移动滑块时，RGB 和 HEX 值会立即重新计算，这使得微调强调色、背景或语义令牌变得容易。
理解 RGB 颜色
RGB 模型将颜色描述为红、绿和蓝光的混合。每个组件的值在 0 到 255 之间，其中 0 表示该通道关闭，255 表示全强度。
当这三个通道结合在一起时，它们形成了你在显示器、手机和电视上看到的颜色。例如，rgb(255, 255, 255) 是白色，rgb(0, 0, 0) 是黑色，rgb(255, 165, 0) 对应于明亮的橙色调。
RGB 值在动态界面中尤其实用，因为你可以以编程方式操作每个通道，生成颜色调色板，并创建在数值之间插值的过渡效果。
什么是 HEX 颜色代码？
HEX 颜色是以十六进制系统表示的相同 RGB 颜色。标准格式为 #RRGGBB，其中每对字符表示红、绿和蓝通道的十六进制值。
HEX 使用的值范围是 00 到 FF，而不是从 0 到 255 的十进制数字。数字 A–F 代表十进制数字 10 到 15。浏览器解析字符串，将其分成三对，转换每一对为十进制，然后渲染相应的 RGB 颜色。
这种紧凑的格式在 CSS、设计工具和样式指南中广泛使用，因为它简短、易于复制，并且作为主色、次色和语义颜色的令牌效果良好。
RGB 转 HEX 转换公式
rgb(r, g, b) → #RRGGBB
RR = dec_to_hex(r)
GG = dec_to_hex(g)
BB = dec_to_hex(b)
// Helper:
dec_to_hex(x) = to_hex(x).padStart(2, "0")要将 RGB 转换为 HEX，你需要将每个通道值（从 0 到 255）转换为两位十六进制字符串，然后将三个部分连接在一起，前面加上 #。
// rgb(79, 163, 194) 的示例
r = 79 → 4F
g = 163 → A3
b = 194 → C2
#4FA3C2如果你想复习十六进制数字是如何工作的或如何进行基数转换，可以打开 <a href="/number-systems" rel="noopener noreferrer">数字系统指南</a>。
RGB 转 HEX 转换的逐步工作原理
RGB 值以三个十进制数字的形式写出。在转换过程中，这些数字中的每一个都被转换为两位 HEX 片段，然后组合成一个单一的颜色代码。
rgb(26, 43, 60)
↓ ↓ ↓
[26, 43, 60] → #1A2B3C以下是 rgb(26, 43, 60) 的详细分解：
- 步骤 1 — 分离三个通道：
[26] [43] [60] - 步骤 2 — 将每个值从十进制转换为 HEX：
你可以反复将十进制值除以 16，或者使用内置的辅助函数。每一步的余数映射到一个 HEX 数字（0–9, A–F）。
26 → 1A 43 → 2B 60 → 3C在这个例子中，所有三个通道都在 0–255 之间，因此每个通道都变成了一个两字符的 HEX 片段。
- 步骤 3 — 连接各部分并在前面加上 # 符号：
#1A2B3C
同样的方法适用于任何有效的 RGB 三元组：独立转换每个组件，然后将结果连接成一个单一的 HEX 代码。
在 CSS 中选择 RGB 和 HEX
RGB 和 HEX 描述的是相同的颜色，但根据情况，一个格式可能比另一个更方便。选择通常取决于你在项目中如何读取、编辑和共享颜色值。
当 RGB 更实用时
- 显式通道控制: 红、绿和蓝的值在函数调用中是可见的，这对于动画或算法生成颜色非常有用。
- 使用 JavaScript 微调: 在代码中，数值通道易于增加、减少或限制。
- 处理透明度:
rgba()变体在保持相同结构的同时添加了 alpha 参数，这对于覆盖和阴影非常方便。
当 HEX 更合适时
- 紧凑表示法: 像
#1A2B3C这样的短字符串适合用于令牌、设计系统和共享调色板。 - 与设计工具对齐: 大多数图形编辑器默认以 HEX 显示和导出颜色，因此你可以在不进行额外转换的情况下复制值。
- 可读的预设: 当你维护一个主要、次要和中性色的列表时，HEX 代码易于扫描。
总结
当你需要直接在代码中操作颜色通道或不透明度时，使用 RGB/RGBA。当你想要一个简洁、稳定的设计令牌值时，或当你主要从设计工具中复制颜色时，优先选择 HEX。你可以在不失去精度的情况下随时进行转换。
处理 CSS 中颜色的实用技巧
现代 CSS 接受多种颜色格式，因此值得在项目中选择一到两种作为标准。这可以保持设计令牌的一致性，并使样式更易于维护。
选择主要颜色格式
- HEX：作为设计系统和文档的基础格式很好。
- RGB/RGBA：在效果、覆盖和状态过渡中方便使用，尤其是当不透明度很重要时。
- HSL/HSLA：当你想以可预测的方式调整色调、饱和度或亮度时非常有用。
谨慎使用简写
- #RGB 而不是 #RRGGBB：只有当每对由相同数字组成时，三字符形式才有效。例如，
#FA3扩展为#FFAA33。
使用 Alpha 写 HEX
- #RRGGBBAA：这是包含不透明度的八字符 HEX 格式。最后两位数字定义 alpha 通道，从
00（透明）到FF（完全不透明）。 - 如果你已经使用 HEX 令牌，带有 alpha 的 HEX 让你在需要透明度的地方保持相同的样式。
常见陷阱
- 在一个文件中混合多种格式：坚持使用少量格式可以使主题和重构更简单。
- 直接动画化 HEX：为了更平滑的过渡，在关键帧中切换到
rgb()、rgba()或hsl()。 - 忘记对比度：在定义颜色时，始终检查在浅色和深色背景上的可读性。
通过对颜色格式的一致处理和清晰的令牌策略，样式保持可读、可扩展，并在设计演变时更易于重构。
RGB 转 HEX 转换表
以下参考表显示了几种常见颜色的 RGB 和 HEX 形式。你可以在处理主题、布局或品牌调色板时快速查阅。
| 描述 | HEX | RGB |
|---|---|---|
| 白色 | #FFFFFF | rgb(255, 255, 255) |
| 黑色 | #000000 | rgb(0, 0, 0) |
| 红色 | #FF0000 | rgb(255, 0, 0) |
| 绿色 | #00FF00 | rgb(0, 255, 0) |
| 蓝色 | #0000FF | rgb(0, 0, 255) |
| 黄色 | #FFFF00 | rgb(255, 255, 0) |
| 青色 | #00FFFF | rgb(0, 255, 255) |
| 品红 | #FF00FF | rgb(255, 0, 255) |
| 灰色 1 | #111111 | rgb(17, 17, 17) |
| 灰色 2 | #333333 | rgb(51, 51, 51) |
| 灰色 3 | #555555 | rgb(85, 85, 85) |
| 灰色 4 | #777777 | rgb(119, 119, 119) |
| 灰色 5 | #999999 | rgb(153, 153, 153) |
| 灰色 6 | #CCCCCC | rgb(204, 204, 204) |
| 浅灰色 | #F0F0F0 | rgb(240, 240, 240) |
| UI 灰色 | #E0E0E0 | rgb(224, 224, 224) |
| 深色 UI 灰色 | #1A1A1A | rgb(26, 26, 26) |
| 深红色 | #800000 | rgb(128, 0, 0) |
| 深绿色 | #008000 | rgb(0, 128, 0) |
| 深蓝色 | #000080 | rgb(0, 0, 128) |
| 橙色 | #FFA500 | rgb(255, 165, 0) |
| 紫色 | #800080 | rgb(128, 0, 128) |
| 青绿色 | #008080 | rgb(0, 128, 128) |
对于任何其他 RGB 组合，你可以使用页面顶部的转换器获得确切的 HEX 代码。
常见问题：RGB 转 HEX
- 为什么 RGB 值总是在 0 到 255 之间？
每个 RGB 通道以 8 位值存储。八位可以表示 256 种不同的状态，对应于从
0到255的范围。 - 如果值超出此范围会发生什么？
低于
0的值被视为0，而高于255的值被限制为255。为了获得一致的结果，在将 RGB 输入转换为 HEX 之前，请验证其有效性。 - RGB 转 HEX 转换会改变实际颜色吗？
不会。RGB 和 HEX 只是相同颜色数据的两种表示形式。只要每个通道保持在 0–255 之间，转换就是无损的。
- 某些 RGB 值在 HEX 中是否有简写形式？
是的。如果每对 HEX 数字由相同字符组成，你可以将
#RRGGBB压缩为#RGB。例如，#FF00AA变为#F0A。 - 在从 RGB 转换时如何表示透明度？
你可以继续在 CSS 中使用
rgba()，或者切换到扩展的 HEX 格式#RRGGBBAA，其中最后两位数字表示 alpha 通道。