从图片里点选取色
适合从设计稿、截图或照片里取色，不受浏览器限制
两条取色路径
第一条是屏幕吸管：点「屏幕任意取色」，光标变成吸管，屏幕上任何位置都能取（包括浏览器外的窗口）。它依赖浏览器的 EyeDropper 接口，目前主要是 Chrome、Edge 这类 Chromium 系浏览器有；检测不到时这个按钮会被直接隐藏 —— 不给一个点了没反应的死按钮。
第二条是图片点选，全浏览器都能用，也是主力路径：把截图或图片拖进来，在图上点一下就读到那个像素。预览是缩放过的画布，但缩放不改变颜色，直接读预览像素即可，不必换算回原图坐标。
一次给出四种写法
HEX（#0d9488）、RGB（rgb(13, 148, 136)）、HSL（hsl(174, 84%, 32%)）同时列出，每项右侧一个复制按钮，写 CSS 时随手拿。
输入也宽容：#0d9488、0d9488、#abc 简写都认（简写会自动展开成 #aabbcc），改输入框里的色号，下面的数值同步更新。
明度那一栏是干什么用的
它给出的是这个颜色放在纯黑底上和纯白底上时分别能达到的对比度，格式是「黑底 : 白底」。
用处很直接：要拿这个色当文字色或背景色时，看一眼就知道配黑字还是配白字。两个数字都偏低，说明这个颜色太中间调，无论配什么都难以满足可读性的要求。
历史色板最多留 12 个
每次取到的颜色会存进下方的历史色板，最新的排在最前面，超过 12 个就淘汰最旧的。点任意一个色块可以回到那个颜色。
整理设计稿配色时很有用：先把主色、辅助色、强调色依次取一遍，再挨个点开抄数值，不用在多个窗口之间来回切。
本地取色，截图随便拖
图片解码和像素读取全在浏览器里完成，没有网络请求。设计稿截图、含内部信息的界面截图都可以直接拖进来取色。
顺带一提：截图本身往往会经过压缩，取到的颜色可能和原始设计值差一两个数值。要精确还原请直接从设计源文件取色号。
做不到什么
不能从 PDF、视频或网页本身直接取色 —— 请先截图成图片再拖进来。
也不支持颜色名称输入（比如 crimson、天蓝这类名字），只认 # 开头的十六进制和屏幕/图片上的实际像素。
常见问题
为什么没有屏幕取色按钮？
当前浏览器不支持 EyeDropper 接口（多为非 Chromium 系）。按钮会被隐藏而不是留个死按钮，请改用图片点选取色。
能直接输入 #abc 吗？
能。三位简写会自动展开成六位（#abc → #aabbcc），也可以不带 # 直接输入 0d9488。
明度那两个数是什么意思？
分别是该颜色在纯黑底和纯白底上的对比度。判断文字该用黑还是白时看这一栏最直观。
取到的颜色和设计稿不一致？
截图经过压缩后像素值可能有细微偏移。要精确还原请从设计源文件直接取色号。