HohoTools

图片取色器

看得见却叫不出名字的颜色，是前端开发、幻灯片设计和照片修图里每天都在发生的问题。

点击或拖拽文件到此处

使用方法

  1. 把 PNG、JPG 或 WebP 拖进上传区域。
  2. 点击图片上任意一点，采样该像素。
  3. 一键把颜色复制为 HEX、RGB 或 HSL。
  4. 在会话历史里回看最近 8 次取色。

常见问题

提供哪几种颜色格式？

每次取色同时给出 HEX（#1A73E8）、RGB（rgb(26, 115, 232)）和 HSL（hsl(214, 82%, 51%)），各配复制按钮。HEX 适合 CSS 与设计工具，RGB 适合透明度微调，HSL 适合派生深浅色。

取色的精度如何？

返回的就是点击位置的那个像素——不与邻域做平均。照片的单个像素可能带压缩噪点，需要代表性色调时请采样平坦区域或先放大。

刷新页面后历史为什么没了？

历史是保存在页面里的会话内小列表（最多 8 条），刻意不做持久化。你的图片和颜色不会被存储或传输到任何地方。

我的图片会被上传吗？

不会。图片在本地解码，颜色从浏览器内的 canvas 像素读出。未发布的设计稿与私人截图不离开设备。

正好点在图片边缘会怎样？

点击坐标会映射到最近的有效像素，边缘点击返回最后一行或最后一列而不是报错。引擎接口传入的坐标则严格校验，越界值以明确错误拒绝。

屏幕缩放会影响取色结果吗？

不会。点击位置会从显示尺寸映射回图片分辨率，无论浏览器把图片在屏幕上缩放到多大，采样的都是真实的底层像素。

相关工具

HEX 转 RGB 设计师交接色板时给的是 #FFA500，而写动画、做混色、调用一个只认数字的接口时，你需要的是十进制通道值——HEX 与 RGB 本是同一种颜色的两种写法，但切换场景总要换一种表达。 实用工具 RGB 转 HEX JavaScript 给你的是三个通道数字，而设计规范、SVG 填色和 Tailwind 配置里写的往往是 #FFA500——RGB 与 HEX 各占一半场景，切换全靠人肉换算。 实用工具 颜色对比度检查器 低对比度文字是网络上最常见的无障碍问题：在你校色过的屏幕上刚好看的灰底灰字，放到阳光下的廉价手机上、对低视力读者、对四十岁以上的人，都可能完全读不清。 实用工具 图片黑白化 灰度化不是简单去掉颜色：每种颜色按什么权重参与亮度，决定了成品是自然还是发闷。 图片工具
了解更多

看得见却叫不出名字的颜色，是前端开发、幻灯片设计和照片修图里每天都在发生的问题。这个工具把任意 PNG、JPG、WebP 变成取色源：把图片拖进来，点击你关心的那个像素，HEX、RGB、HSL 三种格式同时呈现，各自配有一键复制按钮。HEX 可以直接进 CSS 自定义属性和设计令牌；RGB 适合 rgba() 微调和 canvas 代码；HSL 让同一色相的深浅变体一目了然。会话历史保留最近 8 次取色色块，对比一张截图里的候选配色只要几秒钟。颜色通过为高频读取调优的 canvas（willReadFrequently）从解码后的像素中读出，全程在浏览器本地完成——图片不上传，未发布的设计稿和私人截图不出设备。点击靠近图片边缘时会落到最近的有效像素；展示的每个值都来自你点击的那个精确像素，不做任何平均或平滑。