颜色转 RGB

什么是 RGB 颜色？

RGB 颜色是一种通过指定红、绿、蓝三个通道的强度来表示颜色的方式。每个通道都是 0 到 255 之间的整数，其中 0 表示该通道完全关闭，255 表示该通道完全打开。通过混合三个通道，可以表达超过 1670 万种颜色 — 例如 rgb(14, 165, 233) 是一种由红 14、绿 165、蓝 233 混合而成的天蓝色。RGB 被称为加色模型，因为将三个通道都设置为最高强度（255, 255, 255）会得到白色，而都设置为 0（0, 0, 0）则得到黑色。

RGB 模型模拟了大多数显示器发光的方式。手机、显示器或电视屏幕上的每个像素都由微小的红、绿、蓝子像素组成，设备根据 RGB 值设置每个子像素的亮度。这就是为什么 RGB 是 Web 和 CSS 的原生颜色空间。

何时使用 RGB 颜色

只要使用屏幕而非印刷品，RGB 就是默认的颜色格式。常见场景包括：

• CSS 样式。 rgb() 和 rgba() 函数接受三个或四个数字，所有浏览器都支持。
• Canvas 与图像处理。 Canvas API 以 RGBA 数组形式暴露像素数据，因此图像滤镜、特效和操作都直接作用于 RGB 值。
• 游戏与图形编程。 WebGL、Three.js 以及大多数图形库都接受 RGB 输入来设置材质颜色、光照和清除色。
• 动画与插值。 由于 RGB 通道是线性的，在两个 RGB 颜色之间做动画非常直接。
• 无障碍工具。 对比度检查器在评估 WCAG 比率时会从 RGB 值计算亮度。
• 数据可视化。 D3、Chart.js、ECharts 等图表库都接受 RGB 颜色规范用于系列、填充和描边。

对于印刷工作，必须将 RGB 转换为 CMYK，因为打印机使用减色模型；但对于任何在屏幕上显示的内容，RGB 都是正确的选择。

RGB 与 HEX、HSL 的区别

RGB、HEX 和 HSL 都描述同一个 sRGB 颜色，但方式不同。RGB 将红、绿、蓝通道列为十进制整数（0–255）。HEX 将同样的通道编码为十六进制对（00–FF），因此 rgb(14, 165, 233) 和 #0EA5E9 在数学上是相同的。HSL 通过色相（0–360°）、饱和度（0–100%）和亮度（0–100%）描述颜色，对设计师来说更直观，因为改变亮度会产生可预测的浅色和深色变体。

当需要数值通道用于计算、动画或 API 调用时，使用 RGB；当需要为 CSS 和设计工具提供紧凑、可分享的代码时，使用 HEX；当需要构建调色板或微调颜色的感知亮度时，使用 HSL。

常见 RGB 颜色

下表列出了常用的颜色及其对应的 RGB 值。

名称	RGB	HEX
黑色	rgb(0, 0, 0)	#000000
白色	rgb(255, 255, 255)	#FFFFFF
红色	rgb(255, 0, 0)	#FF0000
绿色	rgb(0, 255, 0)	#00FF00
蓝色	rgb(0, 0, 255)	#0000FF
天蓝	rgb(14, 165, 233)	#0EA5E9
黄色	rgb(255, 255, 0)	#FFFF00

注意 CSS 的 rgba() 形式会增加一个 0 到 1 之间的第四个值用于透明度，例如 rgba(14, 165, 233, 0.5) 表示 50% 不透明度。

如何将颜色转换为 RGB

使用本工具转换颜色只需一秒钟，且完全在浏览器中完成，无需上传、无需注册、无需安装。请按以下步骤操作：

1. 拾取颜色。 使用颜色拾取器，或在 HEX 输入框中输入 6 位 HEX 代码（带或不带 #）。
2. 查看结果。 R、G、B 数值会实时更新，rgb() 字符串和预览色块也会同步刷新。
3. 复制 RGB。 点击"复制 RGB"按钮复制 rgb(r, g, b) 字符串，然后粘贴到 CSS、代码或文档中。

由于所有步骤都通过 JavaScript 在浏览器本地运行，您的颜色选择永远不会上传到服务器。这使转换完全私密且即时。