使用前必做的3项准备清单
很多人用颜色吸取器直接上传图片就点取色,最后出来的色值和肉眼看到的差一大截,其实问题早就在上传前的准备阶段就埋下了。首先你要确认待取色的图片本身没有经过过度压缩,比如微信转发过好几次的表情包或者朋友圈存的低清图,像素块已经糊成杂色,取出来的结果肯定不准,最好用原图或者分辨率不低于72DPI的版本。
其次你要提前明确自己后续要用的色值格式,比如做网页开发要的是十六进制色值,做PS修图要RGB数值,做印刷物料就得用CMYK数值,提前理清需求不用后续再手动转换,避免换算过程里出现偏差。最后你要把电脑屏幕的色彩显示校准到常规模式,别开护眼的暖黄滤镜或者游戏模式的高饱和特效,不然你肉眼看到的颜色和图片真实色值会有明显出入,后续核对结果的时候也容易判断错误。
- 准备分辨率不低于72DPI的原图
- 提前明确后续使用的色值类型
- 关闭屏幕特殊显示模式校准色彩
不同场景下的取色参数适配方法
不同的使用场景,对着同一张图点同一个位置取色,选的参数不一样最终得到的可用结果也完全不同,很多人就是不管场景直接默认取色,最后拿到的色值放到自己的项目里完全违和。比如做品牌视觉规范提取主色的场景,你不能直接点图片边缘的阴影杂色,要把取色点落在品牌logo最平整的实色区域,同时可以放大图片到300%以上,避开边缘的抗锯齿半透明像素,取到最纯正的品牌标准色。
如果是做电商详情页的配色统一,你要取的是主图里产品的核心点缀色,这时候可以开启取色器的单点平均采样功能,不是只取单个像素的颜色,而是把取色点周围9个像素的颜色做均值计算,避免产品表面的细小纹理反光点干扰结果,取出来的颜色用到后续的边框或者按钮上,和主图的整体风格会完全适配。如果是做PPT或者海报的渐变色取色,你可以沿着渐变方向连续取3到5个点的色值,分别记录下来用到渐变编辑器里,比你手动凭感觉调出来的过渡要自然很多。
- 品牌规范取色放大300%避开抗锯齿像素
- 电商主图取色开启9点平均采样功能
- 渐变色场景连续取多点记录过渡色值
分步实操取色的完整操作流程
做好前期准备和场景参数规划之后,你就可以打开在线颜色吸取器开始操作,整个流程没有复杂的跳转步骤,每一步都对应着前面的准备要求,只要跟着走基本不会出问题。首先你要点击工具页面中间的本地上传按钮,从电脑文件夹里选中你提前准备好的高清原图,不要直接把网页上右键存的带水印压缩图传上去,上传之后等待图片完全加载在工具的预览框里,不要在加载到一半的时候就点击取色。
接下来你可以用鼠标滚轮在预览框里放大图片,直到你要取色的目标区域清晰到能看到单个像素块,这时候把鼠标光标移到目标点上,不用点击就能看到光标旁边实时弹出的三种标准色值预览,确认光标没有落在杂色或者半透明区域之后,再点击左键锁定当前的色值结果。锁定之后你可以直接点击对应色值旁边的复制按钮,把十六进制、RGB、CMYK三个数值分别存到你提前建好的配色文档里,不要手动敲数字,避免手输的时候输错数字导致后续用错颜色。
取完所有需要的颜色之后,你可以点击工具页面的色板导出按钮,把本次取到的所有颜色整理成一张小的色卡图保存下来,后续做设计的时候直接把这张色卡拖到对应的设计软件里,不用反复打开颜色吸取器重新取色,能省下不少来回切换页面的时间。如果你取色之后发现数值和预期有偏差,不要直接删掉结果,你可以回到预览界面重新调整取色点的位置,对比两次的色值差,判断是图片本身的问题还是取色点选的不对。
- 步骤1:点击本地上传按钮导入提前准备的高清原图
- 步骤2:滚轮放大预览图到目标区域可见单个像素
- 步骤3:移动光标预览色值确认位置后左键点击锁定
- 步骤4:一键复制三类色值并导出整理好的色卡文件
常见易错点与结果核对方法
很多人用颜色吸取器取出来的色值用在项目里之后才发现不对,其实大部分错误都是几个很容易忽略的小细节导致的,提前把这些易错点避开,能大幅提升取色的准确率。最常见的错误就是取色的时候点到了图片的半透明抗锯齿边缘,比如文字的边缘或者logo的描边位置,取出来的颜色会混合背景的底色,放到其他纯色背景上用的时候就会发灰发脏,你核对的时候可以把取到的色值填充到纯白和纯黑的背景上,和原图里的目标颜色做对比,就能快速发现这种偏差。
还有不少人会忽略图片自带的色彩配置文件,比如有些用Adobe RGB拍摄的产品图,直接取色得到的CMYK数值放到印刷软件里会出现偏色,这时候你核对的时候可以把取到的色值放到对应软件的色彩空间里预览,确认没有色域溢出的情况再使用。另外不要用截图工具截完图再传到颜色吸取器里取色,截图过程会自动压缩图片色彩信息,哪怕你原图再高清,截图之后取出来的色值也会有偏差,核对的时候你可以把取到的色值和原图的颜色并排放在一起,拉开距离肉眼扫一眼,就能快速判断两者的视觉差异是不是在可接受的范围内。