从照片里提取配色,是抵达一套色彩方案最快也最诚实的办法。一张好照片里的颜色本来就彼此协调,因为它们被同一束光照亮、被同一块传感器记录。有照片可用以来,设计师就一直用这个办法建立配色。
这个工具从任何图片中提取最多六种颜色。它把画面缩成一个小样本,把每个像素归入粗粒度的色彩分箱,按像素数量给分箱排序,然后沿着这个排名向下走,只挑选与已选颜色距离足够远的颜色。正是最后这一步,让它不会从一张海滩照片里给你六种米色。
分析在浏览器内基于缩小的副本运行。没有上传,配色也不会被保存在任何地方。
| 步骤 | 做了什么 |
|---|---|
| 缩小 | 图片被缩到长边 80 像素 |
| 分箱 | 每个像素被归入粗粒度的色彩分箱 |
| 排序 | 按分箱内像素数量排序 |
| 分离 | 与已选颜色太接近的候选会被跳过 |
| 取均值 | 入选分箱报告其像素的真实平均值 |
先缩小是刻意的。它把传感器噪点和 JPEG 伪影平均掉,否则会产生成千上万种几乎相同的颜色,把排名淹没在毫无意义的变体里。
提取出的配色是原材料而不是成品体系。在画面中占比最大的颜色通常是你的背景色;最小且最饱和的通常是强调色,而它应当保持强调色的身份,不要变成背景。
确定之前请务必检查对比度。在照片里并排看着很美的两种颜色,往往远达不到正文文字与背景所需的 4.5:1。照片里满是彼此过于接近的中间调,因此提取出的配色尤其容易踩这个坑。
最多六种。当图片确实没有六种足够可分的颜色时会更少,单色调的照片可能只有三种。
因为每个色块是一组相似像素的平均值,而不是某一个像素的取值。这比随便取一点(可能落在高光或压缩伪影上)更具代表性。
不可以。选择是自动的,依据是每种颜色在画面中的占比以及它与已选颜色的差异度。想影响结果,请先把你在意的区域裁出来。
点击任意色块即可复制到剪贴板,然后粘贴进 CSS、设计工具或品牌文档。下载则会把六种颜色作为一张带标注的图片保存。
不一定。本工具挑选的是视觉上可区分的颜色,而不是满足对比度标准的颜色。上线前请用对比度检查器验证文字与背景的组合。
不会。分析在浏览器内基于缩小的副本运行,不发送任何内容。