图片取色器
点击图片任意位置取色，HEX/RGB 同步显示。
选择图片后在画面上点击取色，HEX/RGB 同步显示。本地读取，不上传。
使用说明
这个工具解决什么问题
设计稿对色、截图配文配色、前端还原视觉稿,经常要问「这个像素到底是什么色」:开修图软件太重,肉眼估色必有偏差,截图工具的吸管又常常够不到浏览器外的图。这个工具把图片铺进画布,点哪取哪:HEX 直接给 CSS,RGB 给设计工具,坐标顺手标出,回设计稿能找到同一个点。像素读取全程在浏览器本地完成,图片不上传。
核心能力
点击即取:画布任意位置单击,立即读出该像素颜色。HEX/RGB 同步:两种格式同时展示,复制即用。坐标标注:显示原图像素坐标,回设计工具可精确定位。canvas 本地读取:图片绘制在本地画布,取色不经过服务器。连续取点:连点连更新,对比渐变区域的颜色变化很顺手。
使用建议
前端写样式直接复制 HEX;给设计师反馈时附上 RGB 或坐标,比「这里颜色不对」精确得多;对色时先放大再点,相邻像素差异一目了然;渐变区域多取几个点对比,选最接近主视觉的那个;图片不上传,内部设计稿与未发布物料放心用。
常见问题
取到的颜色准吗?
按像素原值读取:canvas 逐像素读出颜色直接转 HEX 与 RGB,不做色彩管理转换。设计稿与屏幕显示有色差时,以工具读数为准对齐,前后端颜色不一致多半是写错了格式,对一遍读数即可。
图片会被上传吗?
不会。图片绘制进本地 canvas,取色就是读取 canvas 的像素数据,全程在浏览器内完成,截图、内部设计稿、未发布物料都放心取。
坐标是什么口径?
图片原始像素坐标,不是画布显示坐标。放大缩小查看时读数仍对应原图位置,回设计工具或图像处理软件能定位到同一个点。
半透明区域的读数怎么看?
透明像素按存储值显示颜色,但叠加到不同背景后视觉效果会不同;取半透明区域的颜色时,注意它最终叠在什么底色上再决定是否使用。