取色
格式
HEX
RGB
HSL
CMYK
颜色历史记录
尚未选取颜色
#5E6AD2
颜色值
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)
什么是颜色选择器？
通过可视化方式取色，并在 HEX、RGB、HSL 和 CMYK 之间转换。一键复制任意格式，并可直接在浏览器中微调数值。
如何使用颜色选择器
- 输入 HEX 值，或使用可视化选择器选取颜色。
- 查看下方显示的转换后的 RGB、HSL 和 CMYK 值。
- 微调输入，直到颜色与设计或代码目标一致。
- 一键复制所需格式。
快速指南
颜色格式参考 比较 HEX、RGB、HSL 和 CMYK，帮助你为 CSS、设计和打印工作流选择合适的格式。
了解取色 ▾
示例
输入
#FF5733
输出
RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
常见使用场景
- 为 CSS 或设计令牌选取精确的 UI 颜色
- 将 HEX、RGB 或 HSL 值复制到前端代码中
- 在设计 QA 期间检查和比较颜色
- 基于单个已选颜色构建小型调色板
常见问题
支持哪些颜色格式？
HEX、RGB、RGBA、HSL、HSLA 和 CMYK。点击任一格式字段即可复制其值。
可以使用吸管工具从屏幕取色吗？
在支持 EyeDropper API 的浏览器（Chrome 95+）中，可以。点击吸管图标即可从屏幕任意位置取色。
HSL 和 HSB/HSV 有什么区别？
HSL（色相、饱和度、明度）和 HSB/HSV（色相、饱和度、亮度/明度值）都是圆柱形颜色模型，但它们在第三轴的定义上有所不同。在 HSL 中，50% 明度是“纯”色。在 HSB 中，100% 亮度表示最大亮度，更接近艺术家认为的鲜艳颜色。CSS 使用 HSL；Photoshop 和 Figma 使用 HSB。
可以使用这个工具检查 WCAG 颜色对比度吗？
此工具用于显示颜色值及转换。若需针对背景色进行无障碍对比度检查（WCAG AA/AAA 比率），请使用专用的对比度检查器工具。