ShareX取色器怎么用？屏幕任意位置取色与屏幕标尺测距教程

前言：设计师为什么要用 ShareX 取色

设计师、前端工程师日常工作中经常需要做两件事：

1. 取色：从图片或屏幕上获取某个像素的颜色值（#FF5733 这样的十六进制）
2. 测距：测量屏幕上某个元素的尺寸（按钮宽度、图标高度等）

传统做法是打开 Photoshop 或专门的工具，但这些软件启动慢、占用大。ShareX 内置的取色器和屏幕标尺 可以在不离开桌面的情况下快速完成，是设计师的隐藏神器。

一、ShareX 取色器基础

启动取色器

方法 1：任务设置 → 截图后任务 → 勾选「拾色器」

方法 2：菜单 → 工具 → 屏幕拾色器

方法 3（推荐）：设置自定义快捷键（如 Alt+C）一键启动

取色步骤

1. 启动取色器后，鼠标变成十字光标
2. 鼠标移到任意位置，实时显示该位置的颜色值
3. 单击复制颜色值到剪贴板
4. ESC退出取色器

颜色格式

ShareX 取色器支持多种颜色格式：

切换方法：右键取色器窗口 → 格式。

二、取色器进阶用法

1. 取屏幕任意区域的平均色

设计师经常需要知道「这张图的主色调」。操作方法：

1. 启动取色器
2. 按住 Shift + 鼠标拖动 框选区域
3. 释放后自动计算该区域的平均色
4. 颜色值复制到剪贴板

2. 放大镜模式

需要精确取色时：

1. 右键取色器 → 「显示放大镜」
2. 屏幕会出现放大镜视图，精确显示鼠标位置的像素
3. 适合取细小元素的颜色（如图标、文字）

3. 取色历史

ShareX 会记录最近 20 次取色历史：

1. 右键取色器 → 「历史」
2. 显示历史颜色列表
3. 可一键复制任意历史颜色

4. 屏幕标尺（屏幕测距）

除了取色，ShareX 还内置屏幕标尺：

启动方法：菜单 → 工具 → 屏幕标尺

操作步骤：

1. 屏幕标尺启动后，会显示十字线和坐标
2. 鼠标移动实时显示当前位置的 X/Y 坐标和到屏幕边缘的距离
3. Ctrl + 鼠标拖动：测量两点之间的水平或垂直距离
4. Shift + 鼠标拖动：测量两点之间的直线距离
5. 单击「重置」清除测量

三、实战场景

场景 1：网页配色取色

需求：把喜欢的网站配色用到自己的项目中

操作步骤：

1. 打开目标网页
2. 启动 ShareX 取色器（Alt+C）
3. 分别取网页的背景色、按钮色、文字色、链接色
4. 复制 HEX 值到 CSS 文件

进阶：批量取色

如果需要取 10+ 个颜色，手动一个个点很麻烦。可以：

1. 用 ShareX 截图（区域）
2. 截图编辑界面打开「颜色面板」
3. 显示截图的所有主色（自动算法）
4. 一键复制某个颜色

场景 2：图标元素对齐

需求：检查前端页面图标是否对齐、间距是否一致

操作步骤：

1. 启动屏幕标尺
2. 按住 Ctrl 测第一个图标到第二个图标的水平距离
3. 再测第三个图标到第二个图标的距离
4. 对比两组数字判断间距是否一致

进阶：批量测量

ShareX 标尺支持保存测量记录：

1. 测距 → 右键 → 「保存到日志」
2. 多次测量后统一查看日志
3. 适合做精细化 UI 校对

场景 3：截图配色分析

需求：分析一张图片的主色调（如海报、封面图）

操作步骤：

1. ShareX 截图（截取目标图片）
2. 编辑器 → 工具 → 颜色分析
3. 自动显示图片的主色调、辅助色
4. 一键复制所有颜色值

这是设计师寻找配色灵感的利器。

场景 4：PPT 字号检查

需求：复制别人 PPT 里的字号、颜色

操作步骤：

1. 启动取色器 → 复制 PPT 文字的颜色
2. 启动屏幕标尺 → 测量文字高度（即字号）
3. 把数据应用到自己的 PPT

场景 5：屏幕色差对比

需求：两张设计稿的颜色一致性检查

操作步骤：

1. 打开两张设计稿（如左右并排）
2. 取色器分别取相同位置的元素
3. 对比 HEX 值
4. 标记差异

四、屏幕标尺进阶技巧

快捷键速查

单位切换

支持像素、毫米、厘米、英寸切换：

• 1 英寸 = 96 像素（Windows 默认 DPI）
• 1 厘米 ≈ 37.8 像素

DPI 设置

如果你的屏幕是高 DPI（2K/4K），需要校准：

1. 设置 → 高级 → DPI 缩放
2. 填入实际屏幕 DPI（如 144）
3. 这样测距数据才准确

五、取色器配置优化

推荐设置

1. 设置 → 任务 → 「屏幕拾色器」
2. 启用「自动复制颜色值」
3. 启用「显示 HEX 格式」（默认）
4. 启用「放大镜模式」
5. 保存设置

自定义快捷键

建议设置：

• Alt + C：启动取色器
• Alt + R：启动屏幕标尺
• Alt + S：截图（区域）

这样 Alt 系列快捷键都被 ShareX 占用，互不冲突。

六、与其他工具的对比

ShareX 的优势：集截图 + 取色 + 测距于一体，无需多个工具。

七、常见问题

Q1：取色器启动后没反应？

1. 检查是否被杀毒软件拦截
2. 重启 ShareX
3. 检查快捷键是否冲突

Q2：颜色值复制不完整？

1. 确认取色器格式设置（右键 → 格式 → HEX）
2. 某些应用会拦截剪贴板，关闭重试

Q3：屏幕标尺数据不准？

校准 DPI 设置（设置 → 高级 → DPI）。

Q4：取色器放大镜卡顿？

降低放大倍数（右键 → 缩放 → 2x 或 4x）。

Q5：能否取整个区域的平均色？

可以，使用 Shift + 拖动框选区域，自动计算平均色。

八、最佳实践

设计师日常工作流

1. 截图工作：ShareX 截图（标注、保存、上传）
2. 取色工作：ShareX 取色器（HEX、RGB、HSL）
3. 测距工作：ShareX 屏幕标尺（像素、毫米）

推荐快捷键组合

把这套快捷键配置好，可以完全不离开键盘完成设计辅助工作。

总结

ShareX 取色器和屏幕标尺是其「隐藏的杀手级功能」：

• 设计师用来取色 + 测距，无需 PS
• 前端工程师用来检查像素级布局
• 测试工程师用来快速截屏 + 取色
• 普通用户用来截图分享

免费、启动快、功能集中，是 ShareX 能成为开发者首选截图工具的重要原因之一。配合截图、标注、上传工作流，ShareX 是真正的一体化截图工具。