取色器
HEX、RGB、HSL
可视化选择任意颜色，在 HEX、RGB 和 HSL 格式之间转换。即时复制值用于 CSS 和设计工具。
此转换仅在您的浏览器中运行，不会上传任何内容。
59
130
246
- HEX#3b82f6
- RGB59,130,246
- HSL217, 91%, 60%
仅不透明色（HEX / RGB / HSL），无 alpha。可粘贴 #rgb 简写或完整 #rrggbb。
- HEX
- RGB
- HSL
这个工具是什么？
将可视化选取（或输入的 HEX）转为可用于 CSS 的 HEX、RGB、HSL。三种格式用不同坐标描述同一不透明色。
HEX 适合 token；RGB 展示 0–255 通道；HSL 便于微调相关 UI 状态。接受 CSS #rgb 简写并展开为六位。
适合把单个色块写入 CSS 或文档。若要从一种基色生成和谐色板，请用调色板生成器。
常见用途
- 将稿中的 HEX/RGB/HSL 复制到 CSS 或设计系统
- 把旧样式里的
#rgb展开为#rrggbb - 拖动 RGB 滑块并同步查看 HEX、HSL
如何使用
- 使用原生取色或 RGB 滑块；大色块即时更新。
- 或输入 HEX（
#39f/#3399ff）。无效或含透明度的 HEX 会报错。 - Sample 加载
#39f→#3399ff。Clear 恢复默认蓝色。 - 在工具栏复制 HEX，或在各行复制 RGB/HSL。
示例
| 输入 / 设置 | 输出 | 说明 |
|---|---|---|
#3b82f6（默认） | rgb(59, 130, 246) · hsl(217, 91%, 60%) | 默认蓝。 |
#39f（Sample） | #3399ff · rgb(51, 153, 255) | #rgb 简写展开。 |
#000 | #000000 · hsl(0, 0%, 0%) | 黑色。 |
#ffffff | rgb(255, 255, 255) · hsl(0, 0%, 100%) | 白色；HSL 饱和度为 0。 |
实践中的常见误区
- 无透明度：
#rgba、#rrggbbaa、rgba()、hsla()不在范围内——请在 CSS 中单独写透明度。 - HEX 与 HSL 会为显示取整；接近灰色（低饱和度）时 HSL 色相可能跳动。
- 不计算文本/背景 对比度（WCAG）——上线前请用设计或无障碍工具检查。
参考资料
最后审阅: 2026-07-27
常见问题
- 支持
- 支持。#39f 会展开为
- 有透明度（alpha）吗？
- 没有。本工具仅处理不透明色。需要 rgba()/hsla() 或 8 位 HEX 时，请用设计工具或在 CSS 中自行写 alpha。
- 可以分别复制 HEX、RGB、HSL 吗？
- 可以。有分格式复制和顶部 Copy（HEX）。取色器与滑块实时同步。
- 会上传数据吗？
- 不会。转换仅在浏览器中进行。