取色器怎么用,不只是取个颜色值

写 CSS、画设计稿、做数据分析时,经常需要从某张图里取一个颜色。肉眼判断色值是不准的,屏幕反光、环境光都会骗你。Snipaste 的取色器(C 键)解决的就是这件事。

基础用法

按 C 启动取色器,光标会变成放大镜。移动到目标位置后点击,即可读取当前像素的颜色值。

读出的值默认是 RGB 三通道,各通道 0-255。如果你的项目用十六进制,点一下取色器面板上的格式切换即可在 RGB / HSL / HEX 之间来回换。

被低估的功能:调色板生成

取色器面板里有一个不起眼的按钮——生成调色板。点它之后,Snipaste 会围绕当前颜色自动推导出一组明暗渐变,包含类似设计系统中常见的几个层级:

  • 主色(当前选中的);
  • 悬停态、激活态(更深一档);
  • 禁用态、弱化态(更浅一档);
  • 以及配套的中性色。

这组色值可以直接粘进 CSS 变量,省去自己调半天。做法学自常见设计系统的色彩梯度,生成的结果基本不用再改。

实用技巧

放大镜会自动放大

取色器在光标周围显示一个放大区域,方便对准细小的元素,比如 1px 的边框线或者图标的一个像素点。

按 ctrl 可以锁色

按住 ctrl 键取色,取出的颜色会保持当前面板显示,方便连续对比多个色值。

搭配剪贴板

取到的颜色值会同步进剪贴板,直接粘到 CSS 文件或设计工具里即可,不用手打。

关于色域与显示器

这里有个客观限制需要说明:取色器读到的是当前显示器输出的颜色值。如果你的显示器处于非 sRGB 模式,或者系统开启了色彩管理,读取结果会与原始素材的色彩空间有偏差。做正式的设计交付时,以设计工具内的色彩管理结果为准,取色器更适合快速对齐网页配色这类场景。

小结

取色器最实用的组合技是「取色 + 生成调色板」,它把「看到一个好看的颜色」变成「一套能直接用的配色」。

延伸阅读: Snipaste 下载后怎么用?超详细截图贴图快捷键教程

延伸阅读: Snipaste 下载后必做设置:快捷键、开机自启一次搞定

延伸阅读: Snipaste 截图标注技巧:箭头、文字、马赛克一次说清