mac系统自带“数码测色计”可精准提取屏幕任意位置色值,支持srgb色彩空间、1×1像素单点采样、区域平均采样、hex复制及双向光圈锁定等功能,满足ui设计与前端开发需求。

如果您希望在Mac上为UI设计精准提取屏幕任意位置的色值,系统自带的“数码测色计”可直接读取像素级RGB数值,并支持多种输出格式与采样模式,满足前端开发、视觉还原及跨平台协作需求。以下是多种可独立执行的操作方法:
一、通过Launchpad启动数码测色计并完成基础取色
该方式依托macOS图形化应用组织结构,定位稳定、兼容所有支持版本,启动后即激活实时采样引擎,适用于习惯可视化导航的设计师与开发者。
1、点击屏幕左下角Launchpad图标(火箭形状),进入应用总览界面。
2、在Launchpad中点击“其他”文件夹(灰色齿轮图标)。
3、在“其他”文件夹内找到并点击“数码测色计”启动应用。
4、将鼠标移至网页或App界面中目标元素(如按钮背景、文字色块)上方,窗口右侧实时显示R、G、B十进制值及#RRGGBB格式十六进制代码。
5、按住Command + 左键单击锁定当前颜色值,防止指针微动导致数值跳变。
6、拖动窗口底部“光圈大小”滑块至1×1像素,确保单点精准采样,规避抗锯齿边缘干扰。
二、使用Spotlight毫秒级唤起并直取HEX值
此方式绕过图形导航,利用系统索引实现键盘优先的极速响应,特别适合在浏览器调试页面或多任务并行状态下快速切入取色流程,无需切换窗口或触碰鼠标。
1、按下Command + 空格键调出Spotlight搜索框。
2、输入“数码测色计”或英文“Digital Color Meter”。
3、当应用图标出现在结果顶部时,直接按Return键启动。
4、启动后鼠标悬停即显值,立即点击顶部菜单栏“显示”→“值显示为”→选择“十六进制”。
5、确认色彩空间已设为sRGB(点击“显示”→“色彩空间”→选择“sRGB”),确保数值与网页渲染完全一致。
6、待数值稳定后,按下Shift + Command + C,自动将#RRGGBB格式十六进制代码复制至剪贴板。
三、切换sRGB色彩空间并启用十六进制输出
网页在绝大多数设备上以sRGB色域渲染,若使用默认P3或Adobe RGB读数,会导致CSS中设置的颜色与实际显示偏差;强制切换至sRGB并启用十六进制格式,可确保所取色值与浏览器最终输出完全一致且语法兼容。
1、在数码测色计顶部菜单栏点击“显示”→“色彩空间”→选择“sRGB”。
2、确认窗口右上角下拉菜单中已显示“sRGB”,此时所有数值均为sRGB色域下的等效值。
3、点击“显示”→“值显示为”→选择“十六进制”,启用#RRGGBB格式输出。
4、若使用macOS Sequoia 15或更新版本,还需勾选“包含 # 符号”选项,确保复制内容为完整标准格式。
5、将鼠标移至目标区域,观察右侧是否稳定显示形如#8A2BE2的六位HEX码。
四、使用Command-L双向锁定光圈实现稳定采样
当目标区域存在界面动画、滚动抖动或高刷新率干扰时,动态取色易导致HEX值频繁跳变;启用双向锁定可冻结光圈坐标,使采样位置绝对固定,保障输出稳定性。
1、将鼠标移至需分析的目标像素位置,观察窗口右侧十六进制值是否已稳定显示。
2、按下Command + L,实现水平与垂直双向锁定,光圈不再随鼠标移动。
3、此时可自由移动鼠标至其他窗口进行比对,而数码测色计持续读取锁定坐标处的原始像素值。
4、如需临时解除锁定,再次按下Command + L即可恢复动态追踪模式。
5、锁定状态下仍支持Shift + Command + C一键复制当前HEX值。
五、调节光圈大小获取区域平均色值
当目标元素存在微渐变、抗锯齿边缘、噪点或半透明叠加时,单像素取值无法代表整体视觉感知;扩大光圈可对矩形区域内像素做加权平均,生成更具代表性的色值,适用于按钮悬停态、阴影过渡区等复杂场景。
1、在数码测色计窗口底部找到“光圈大小”滑块。
2、向右拖动滑块,依次切换为3×3、5×5 或 11×11 像素矩阵取样范围。
3、将鼠标移至目标区域几何中心,窗口实时显示该范围内所有像素的平均RGB值及对应十六进制代码。
4、若需复制平均色值,确保“值显示为”已设为“十六进制”,再按Shift + Command + C。
5、平均采样模式下,Command + 左键单击仍可锁定当前平均值,避免窗口重绘导致数值刷新。











