RGB 颜色取色器
用取色器或文本输入选颜色，实时得到 HEX（含透明度）、RGB、HSL、HSV、CMYK 与 CSS 命名色；拖动色相/饱和度/明度滑杆联动，自动生成 100–900 色阶，并给出与黑白文字的对比度、WCAG 等级与可读文字色。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
取色
217°
91%
60%
100%
预览
#3B82F6 · 文字样例
结果
#3B82F6
HEX
#3B82F6HEX + 透明度
#3B82F6 (a=1)RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)HSV
hsv(217, 76%, 96%)CMYK
cmyk(76%, 47%, 0%, 4%)命名色
没有完全匹配的 CSS 命名色深浅色阶（100–900）
100#EBF3FE
200#CEE0FD
300#A7C7FB
400#6CA1F8
500#3B82F6
600#326FD1
700#2655A0
800#1B3B6F
900#0F213E
以当前颜色为 500，浅色混白、深色混黑生成。
对比度与可读文字色
与白色对比度
3.68 : 1与黑色对比度
5.71 : 1可读文字色
#000000WCAG 等级（正文）
AA相对亮度
0.2355可读文字色Aa
这个工具能做什么
- 设计稿给了 HEX、同事说的是 RGB、印刷厂要 CMYK：输入任意一种，HEX、RGB、HSL、HSV、CMYK 和 CSS 命名色一次全出来。
- 调色时拖动色相、饱和度、明度滑杆，或直接用系统取色器取屏幕上的颜色，数值会同步更新。
- 做深色主题或按钮状态时用 100–900 色阶：以当前颜色为 500，浅色混白、深色混黑，直接抄进 CSS 变量。
- 检查可访问性：给出与黑白的对比度、WCAG 等级和推荐的可读文字色，避免正文对比度不达标。
示例
输入
#3B82F6
输出
HEX #3B82F6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%) · HSV hsv(217, 76%, 96%) · CMYK cmyk(76%, 47%, 0%, 4%) · 与白色对比度 3.68（AA Large）· 与黑色对比度 5.71（AA）· 相对亮度 0.2355 · 可读文字色 #000000
对比度按 WCAG 相对亮度公式计算，取值范围 1–21；正文 AA 门槛是 4.5，所以 3.68 只能算大字号合格。
常见问题
支持哪些颜色写法？
支持 #RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb()、rgba()、hsl()、hsla()、hsv()、hsb()、cmyk()、CSS 命名色（如 tomato）以及 transparent。写错的格式会提示颜色格式不正确。
为什么 CMYK 数值和 Photoshop 不一样？
这里用的是无色彩管理的朴素公式（K = 1 − max(R,G,B)），只做数学换算。印刷软件的 CMYK 依赖具体油墨、纸白和 ICC 配置文件，数值本来就会不同，正式印前请以印厂配置文件为准。
命名色是怎么匹配的？
只有十六进制值完全相同时才会显示名称，所以 #FF6347 会显示 tomato，而 #FF6348 不会。gray 和 grey 这类别名会统一显示成表里先出现的那个名字。
WCAG 等级怎么判断？
正文阈值是 4.5（AA）和 7（AAA），大号文字阈值是 3（AA）和 4.5（AAA）。对比度低于 3 一律算不合格；3 到 4.5 之间会标成「AA Large」，意思是只适合大字号文本。
取色和计算会上传数据吗？
不会。所有换算、色阶生成和对比度计算都在浏览器里完成，不发送任何请求，取的屏幕颜色也不会离开本机。
关键词：颜色color picker取色器rgbhexhslhsvcmyk色阶对比度contrast