Mac系统自带“数码测色计”可三步获取网页标准#RRGGBB色值:Spotlight启动→设sRGB色彩空间和十六进制显示→Command+单击或Command-L锁定后Shift+Command+C复制。

你需要在Mac上把屏幕任意位置的颜色直接转成网页可用的十六进制代码,比如复制按钮背景色到CSS里、还原Figma设计稿主色、或校验网页文字色是否符合WCAG对比度标准,系统自带的“数码测色计”不装软件、不联网、不弹窗,启动后三步内就能输出带#号的标准#RRGGBB格式。
启动并进入取色就绪状态
按下Command + 空格键唤出Spotlight搜索框 → 输入“数码测色计” → 当应用图标出现在结果顶部时,直接按Return键启动。这一步操作起来很简单,启动瞬间光标就变成十字准星,悬停即显RGB值,不需要点击窗口或等待加载。
强制切换为sRGB色彩空间和十六进制显示
默认状态下,数码测色计常以Display P3或EDR空间运行,直接复制出来的#FF6B35在Chrome里会明显偏青发亮,根本没法贴进CSS生效。必须手动切到sRGB——这是网页渲染的唯一真实基准。
点击顶部菜单栏的“显示” → “色彩空间” → 选择“sRGB”。【若下拉菜单未显示sRGB,请先退出数码测色计再重开一次,旧版本存在缓存不刷新问题】
再次点击“显示” → “值显示为” → 选择“十六进制”。此时窗口右侧数值应立刻变为#开头的六位代码(如 #1D4ED8),且右上角下拉框明确标注“sRGB”。
稳定捕获并锁定目标像素
网页元素常含抗锯齿、半透明叠加或微动动画,单靠悬停极易采到边缘混合色。必须用光圈+锁定组合确保读数纯净。
方法一:纯色块精准点采
拖动窗口底部“光圈大小”滑块至1×1像素 → 将鼠标精确对准按钮实心填充区中心、图标无描边的色块核心、或文字主体像素(避开边缘模糊区)→ 待右侧#RRGGBB值连续两秒无跳变 → 按住Command + 左键单击锁定读数。
方法二:抗干扰区域平均采样
光圈调至3×3像素 → 对准目标区域(如按钮内文字周围5像素范围)→ 待数值波动收敛 → 按Command-L双向锁定光圈坐标。此时滚动页面、切换Tab甚至晃动鼠标,窗口仍持续显示锁定位置的十六进制值。
【若目标是带阴影/渐变/毛玻璃效果的UI组件,务必避开过渡带;移到色块最饱满的实心区域中心再取值】
一键复制带#号的十六进制代码
确保已执行前三个步骤:Spotlight启动、sRGB空间启用、十六进制显示开启、且目标颜色已被Command+单击或Command-L锁定 → 按下Shift + Command + C。
系统将自动把完整#RRGGBB字符串(例如#059669)复制到剪贴板,不含空格、逗号或额外字符,可直接粘贴进VS Code的CSS文件、Figma的填充字段或Tailwind配置中。

















