🎨

颜色选择器

通过色盘、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;复制需浏览器允许。这不构成整个网站的隐私保证。

🎨 选择颜色
HEX
RGB
HSL
CMYK
CSS
R
G
B

Pick From Image

单击预览选择颜色
Pick From Image

配色方案

互补色
邻近色
三角对比色
分裂互补色

暗色调

亮色调

已保存的颜色

尚无已保存的颜色。

与黑色和白色的对比度

白色文字
黑色文字

已复制

复制失败。请选择结果并手动复制。

嵌入此工具

请使用 1 至 4096 的整数像素尺寸。

× px (1–4096)

                        

💡 集成提示

复制嵌入代码并粘贴到您网站的HTML中。响应式版本会自动适应所有屏幕尺寸。

4.8
4 个评分
✓

关于颜色选择器

高级拾色器,支持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;复制需浏览器允许。这不构成整个网站的隐私保证。

使用场景

为网站选择配色方案
从图片中提取颜色
检查文本对比度可访问性
创建品牌调色板
转换设计稿中的颜色格式
从所选图像中采样颜色。
通过准确代码匹配品牌颜色。
为设计系统准备配色。
交付设计时转换 CSS 颜色。
比较颜色搭配黑白文字的对比度。

如何使用

1

使用色轮选择颜色

2

调整 R、G、B,查看转换后的 HEX、HSL 和 CMYK。

3

查看HEX、RGB和HSL值

4

复制颜色代码使用

5

从色盘选色,或输入完整 HEX 或 RGB。

6

比较配色关系、明暗色阶及黑白对比度。

7

按需选择图像并点击可见像素,或启动受支持的屏幕吸管。

8

复制所需数值或在本地保存颜色;不需要时删除保存项。

专业提示

  • 比较所选颜色与黑白文字的对比度;数值不能保证整个界面符合无障碍标准。
  • 保存调色板以便日后使用
  • 不同格式适用于不同场景
  • 大图取样时最长边缩至不超过 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 只是估算,印刷效果需另行校样。

热门工具

没有更多工具
探索所有工具
FreeWebTools AI