颜色转换与取色器
免费在线颜色转换和取色工具，支持 HEX、RGB、HSL 格式互转，提供可视化颜色预览。
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217.22, 91.22%, 59.8%)
R
59
G
130
B
246
什么是颜色转换器？
颜色转换器可以在 Web 开发和设计中常用的不同颜色表示法之间进行转换。最常见的三种格式是 HEX（十六进制，如 #3b82f6）、RGB（红绿蓝分量，如 rgb(59, 130, 246)）和 HSL（色相-饱和度-亮度，如 hsl(217, 91%, 60%)）。本工具允许你输入任意支持格式的颜色值——或通过取色器可视化选择——并即时查看所有格式的等效值以及 RGB 各通道数值。
如何使用颜色转换器
- 点击取色器色块直观选择颜色，或在输入框中直接输入颜色值。
- 支持输入 HEX (#3b82f6)、RGB (rgb(59,130,246))、HSL (hsl(217,91%,60%)) 或 CSS 颜色名称（blue、coral 等）。
- 在输入下方查看大尺寸颜色预览。
- 查看 HEX、RGB 和 HSL 三种格式的转换结果。
- 使用每个值旁边的复制按钮复制对应格式。
- 在底部查看 R、G、B 各通道的具体数值。
常见使用场景
- CSS 开发 — 在设计工具提供的 HEX 色值与 CSS 样式表或 CSS-in-JS 所需的 RGB/HSL 值之间快速转换。
- 设计交付 — 将设计稿（Figma、Sketch）中的颜色值转换为代码库所需的确切格式。
- 无障碍测试 — 提取精确颜色值来检查对比度，确保颜色选择符合 WCAG 无障碍指南。
- 主题定制 — 在配置 CSS 自定义属性、Tailwind 配置或设计令牌时，将品牌颜色转换为不同格式。
FAQ
支持哪些颜色格式作为输入？
本工具支持 HEX 值（#rgb、#rrggbb）、RGB 表示法（rgb(r, g, b)）、HSL 表示法（hsl(h, s%, l%)）以及 CSS 颜色名称（red、cornflowerblue 等）。
为什么取色器只输出 HEX 格式？
浏览器原生取色器使用 HEX 值。选择颜色后，工具会自动将其转换为所有支持的格式（HEX、RGB、HSL）并显示在下方。
支持透明度/Alpha 通道吗？
目前本工具主要处理不透明颜色。带 Alpha 的 HEX（#rrggbbaa）、RGBA 和 HSLA 输入可能会被解析，但 Alpha 通道不会单独显示。
转换结果精确吗？
是的。本工具使用 culori 库——一个高精度色彩科学库，按照 CSS Color Level 4 规范准确处理色彩空间转换。