写 CSS、画设计稿、做数据分析时,经常需要从某张图里取一个颜色。肉眼判断色值是不准的,屏幕反光、环境光都会骗你。Snipaste 的取色器(C 键)解决的就是这件事。
基础用法
按 C 启动取色器,光标会变成放大镜。移动到目标位置后点击,即可读取当前像素的颜色值。
读出的值默认是 RGB 三通道,各通道 0-255。如果你的项目用十六进制,点一下取色器面板上的格式切换即可在 RGB / HSL / HEX 之间来回换。
被低估的功能:调色板生成
取色器面板里有一个不起眼的按钮——生成调色板。点它之后,Snipaste 会围绕当前颜色自动推导出一组明暗渐变,包含类似设计系统中常见的几个层级:
- 主色(当前选中的);
- 悬停态、激活态(更深一档);
- 禁用态、弱化态(更浅一档);
- 以及配套的中性色。
这组色值可以直接粘进 CSS 变量,省去自己调半天。做法学自常见设计系统的色彩梯度,生成的结果基本不用再改。
实用技巧
放大镜会自动放大
取色器在光标周围显示一个放大区域,方便对准细小的元素,比如 1px 的边框线或者图标的一个像素点。
按 ctrl 可以锁色
按住 ctrl 键取色,取出的颜色会保持当前面板显示,方便连续对比多个色值。
搭配剪贴板
取到的颜色值会同步进剪贴板,直接粘到 CSS 文件或设计工具里即可,不用手打。
关于色域与显示器
这里有个客观限制需要说明:取色器读到的是当前显示器输出的颜色值。如果你的显示器处于非 sRGB 模式,或者系统开启了色彩管理,读取结果会与原始素材的色彩空间有偏差。做正式的设计交付时,以设计工具内的色彩管理结果为准,取色器更适合快速对齐网页配色这类场景。
小结
取色器最实用的组合技是「取色 + 生成调色板」,它把「看到一个好看的颜色」变成「一套能直接用的配色」。
延伸阅读: Snipaste 下载后怎么用?超详细截图贴图快捷键教程