图片取色器让你上传一张图片,在图片上点击任意位置,读出那个像素点的颜色值,显示为十六进制(如 #ff8000)和 rgb() 两种写法,并保留最近取过的 12 种颜色。它适合从截图、设计稿、照片里取一个具体的颜色用到网页或设计软件里。它每次只读取一个像素点,不会自动分析整张图的主色调或生成色板,也不显示 HSL 等其他颜色格式。
操作步骤
- 点击虚线框「点击上传图片」,选择一张图片。图片会画在下方的画布上用于显示,宽度超过 600 像素的图片显示时会被等比缩小到 600 像素宽,小图不会被放大。取色时读取的是原图的全分辨率像素,而不是缩小后的画面。
- 上传后,画布中央会出现一个圆形准星标记。用鼠标点击图片上的任意位置,圆圈会移到你点击的地方,同时读取这个位置的颜色。
- 也可以用键盘:先点一下画布让它获得焦点,然后用方向键移动准星(每按一次恰好移动原图的 1 个像素,按住 Shift 每次移动原图的 10 个像素;大图被缩小显示时,准星在屏幕上的位移会小于 1 个屏幕像素,但取到的永远是相邻的原图像素),按回车或空格在准星位置取色。
- 取色后,左侧显示一块颜色色块,右侧依次是十六进制值和 rgb(r, g, b) 值,每一行都有复制按钮。
- 下方的「取色历史(点击查看)」会保留最近 12 种不同的颜色,点击某个小色块可以把它重新显示到上面的结果区。同一颜色重复取只会保留一份,并排到最前面。
一个实际算出来的例子
工具把红、绿、蓝三个 0 到 255 的数值各转成两位十六进制再拼起来。例如 rgb(255, 128, 0) 显示为 #ff8000;rgb(18, 52, 86) 显示为 #123456;三个值都是 0 时是 #000000;rgb(5, 5, 5) 显示为 #050505,小于 16 的值会补零成两位。字母一律是小写。这几组转换结果都是用工具所使用的同一段逻辑实际算出来的。
支持范围与已知限制
- 取色时,工具把你在显示画布上点击的位置按比例换算成原图的像素坐标,再从一份原图全分辨率的离屏画布里读取,所以不会受显示时缩小插值的影响。但大图显示被缩小了,一个屏幕上的点击位置对应原图的若干个像素,读到的是其中映射到的那一个,想选更精确的点可以用方向键,它按原图像素移动,每按一次恰好移到相邻的一个原图像素。如果图片大到浏览器无法创建离屏画布,会退回读取缩小后的显示画布。
- 读取 RGBA 四个通道。像素完全不透明时只显示十六进制和 rgb();透明度低于 100% 时,会多出一行 rgba(r, g, b, a) 和百分比,色块也按该透明度显示。十六进制值只含 RGB,不含透明度。完全透明的像素 RGB 通常读成 0,0,0。
- 只显示十六进制和 rgb() 两种格式,没有 HSL、HSV、CMYK 等,也没有放大镜预览。
- 历史记录最多 12 个,只在当前页面里,刷新后清空。
- 一次一张图片。图片只读取画面的第一帧,动图只能取到第一帧的颜色。
- 屏幕的色彩配置、护眼模式等可能影响你对颜色的观感,但不会改变读出的数值。图片本身带的色彩配置文件不会被处理。
常见问题:为什么取到的颜色和设计稿标注的不一样?
常见原因有:图片经过了压缩(尤其是 JPEG,边缘和渐变处颜色会有轻微偏差);图片被缩小过导致边缘混色;点到的位置有抗锯齿的过渡像素;设计软件使用了不同的色彩空间。尽量在大面积纯色区域的中间取色,边缘附近不要取。
常见问题:如何精确取到某个像素?
用键盘:点一下画布,再用方向键一格一格移动准星,按回车取色。这样可以避开鼠标位置的小误差。准星按原图像素移动:每按一次方向键恰好移动原图的 1 个像素(按住 Shift 为 10 个),即使图片被缩小显示也是如此;此时屏幕上的移动幅度会很小,属于正常现象。
常见问题:十六进制和 rgb() 哪个更适合用?
两者表示的是同一个颜色。在 CSS 里都可以直接使用。十六进制更短,常见于设计软件和样式表;rgb() 的数字更直观,方便在代码里做计算。
常见问题:可以提取整张图片的主色调吗?
不能。这个工具只做单点取色。如果需要主色调,可以在不同位置多次取色,历史里会保留最近 12 种。
隐私与处理方式
图片由浏览器读取并画在本地画布上,取色全部在本机完成,代码中没有网络请求,图片不会上传,也不会被保存。关闭或刷新页面后图片和取色历史都会消失。