颜色选择器
通过色盘、HEX 或 RGB 选色,也可从图像取样。比较 RGB、HSL、近似 CMYK、配色关系、明暗色阶以及对黑白文字的对比度。
HEX 接受可带 # 的 3 位或 6 位数字。RGB 分量先取整并限制为 0–255,再生成六位 HEX。配色关系调整 HSL 色相,明暗色阶调整亮度。CMYK 使用简单公式,不包含打印机色彩配置。
#FF0000 得到 rgb(255, 0, 0)、hsl(0, 100%, 50%) 和 CMYK 0/100/100/0。RGB 1.5, 0, 0 会规范为 2, 0, 0 和 #020000,HEX 仍保持有效。
方法与限制
大图取样时最长边缩至不超过 2000 像素,因此读数可能与原始像素不同。完全透明像素没有可见颜色。两种颜色的对比度不等于整页无障碍审核;近似 CMYK 不保证印刷一致。 半透明像素读取未与背景混合的 RGB。
代码通过浏览器读取所选图像,已保存颜色存入 localStorage,可从列表删除。屏幕吸管需用户点击且浏览器支持 EyeDropper;复制需浏览器允许。这不构成整个网站的隐私保证。
Pick From Image
配色方案
暗色调
亮色调
已保存的颜色
与黑色和白色的对比度
已复制
复制失败。请选择结果并手动复制。
关于颜色选择器
高级拾色器,支持HEX、RGB和HSL格式。创建调色板,检查对比度,复制颜色代码用于网页和设计。
通过色盘、HEX 或 RGB 选色,也可从图像取样。比较 RGB、HSL、近似 CMYK、配色关系、明暗色阶以及对黑白文字的对比度。 HEX 接受可带 # 的 3 位或 6 位数字。RGB 分量先取整并限制为 0–255,再生成六位 HEX。配色关系调整 HSL 色相,明暗色阶调整亮度。CMYK 使用简单公式,不包含打印机色彩配置。
#FF0000 得到 rgb(255, 0, 0)、hsl(0, 100%, 50%) 和 CMYK 0/100/100/0。RGB 1.5, 0, 0 会规范为 2, 0, 0 和 #020000,HEX 仍保持有效。
代码通过浏览器读取所选图像,已保存颜色存入 localStorage,可从列表删除。屏幕吸管需用户点击且浏览器支持 EyeDropper;复制需浏览器允许。这不构成整个网站的隐私保证。
使用场景
如何使用
使用色轮选择颜色
调整 R、G、B,查看转换后的 HEX、HSL 和 CMYK。
查看HEX、RGB和HSL值
复制颜色代码使用
从色盘选色,或输入完整 HEX 或 RGB。
比较配色关系、明暗色阶及黑白对比度。
按需选择图像并点击可见像素,或启动受支持的屏幕吸管。
复制所需数值或在本地保存颜色;不需要时删除保存项。
专业提示
- 比较所选颜色与黑白文字的对比度;数值不能保证整个界面符合无障碍标准。
- 保存调色板以便日后使用
- 不同格式适用于不同场景
- 大图取样时最长边缩至不超过 2000 像素,因此读数可能与原始像素不同。完全透明像素没有可见颜色。两种颜色的对比度不等于整页无障碍审核;近似 CMYK 不保证印刷一致。 半透明像素读取未与背景混合的 RGB。
- 代码通过浏览器读取所选图像,已保存颜色存入 localStorage,可从列表删除。屏幕吸管需用户点击且浏览器支持 EyeDropper;复制需浏览器允许。这不构成整个网站的隐私保证。
故障排除
请输入 3 位或 6 位十六进制数字,或完整的数值分量。
调整 R、G、B,查看转换后的 HEX、HSL 和 CMYK。
HEX 与 HSL 有什么区别?
HEX 用十六进制表示红、绿、蓝分量;HSL 表示色相、饱和度和亮度。这里两者是同一不透明 RGB 颜色的不同写法。
常见问题解答
HEX使用十六进制表示颜色(如#FF0000代表红色),RGB使用红绿蓝数值(如rgb(255,0,0)),HSL使用色相、饱和度、亮度。
工具显示所选颜色与白色、黑色文字的对比度比值。它有助于比较可读性,但不能保证整个界面符合 WCAG;还需结合字号、状态和背景检查。
直接复制HEX、RGB或HSL代码粘贴到CSS中即可。例如:color: #FF5733; 或 color: rgb(255,87,51);
HEX 用十六进制表示红、绿、蓝分量;HSL 表示色相、饱和度和亮度。这里两者是同一不透明 RGB 颜色的不同写法。
屏幕吸管仅在受支持的浏览器中、经用户点击后可用,也可选择图像取样。无 ICC 配置的 CMYK 只是估算,印刷效果需另行校样。