配色主题生成器

返回首页
添加图片文件 — 或拖放到此处
JPG PNG WEBP HEIC

关于这个配色主题生成器

从照片里提取配色,是抵达一套色彩方案最快也最诚实的办法。一张好照片里的颜色本来就彼此协调,因为它们被同一束光照亮、被同一块传感器记录。有照片可用以来,设计师就一直用这个办法建立配色。

这个工具从任何图片中提取最多六种颜色。它把画面缩成一个小样本,把每个像素归入粗粒度的色彩分箱,按像素数量给分箱排序,然后沿着这个排名向下走,只挑选与已选颜色距离足够远的颜色。正是最后这一步,让它不会从一张海滩照片里给你六种米色。

分析在浏览器内基于缩小的副本运行。没有上传,配色也不会被保存在任何地方。

如何提取配色

  1. 添加图片。 照片、插画、设计截图,只要有值得借鉴的颜色都可以。
  2. 查看色块。 最多六种颜色会带着十六进制代码出现,按它们在画面中所占比重排序。
  3. 点击复制。 点击色块即可把十六进制代码复制到剪贴板。
  4. 下载配色。 下载按钮会把色块保存为带标注的 PNG,可以直接放进方案或情绪板。

颜色是怎么挑出来的

步骤做了什么
缩小图片被缩到长边 80 像素
分箱每个像素被归入粗粒度的色彩分箱
排序按分箱内像素数量排序
分离与已选颜色太接近的候选会被跳过
取均值入选分箱报告其像素的真实平均值

先缩小是刻意的。它把传感器噪点和 JPEG 伪影平均掉,否则会产生成千上万种几乎相同的颜色,把排名淹没在毫无意义的变体里。

把六种颜色变成能用的方案

提取出的配色是原材料而不是成品体系。在画面中占比最大的颜色通常是你的背景色;最小且最饱和的通常是强调色,而它应当保持强调色的身份,不要变成背景。

确定之前请务必检查对比度。在照片里并排看着很美的两种颜色,往往远达不到正文文字与背景所需的 4.5:1。照片里满是彼此过于接近的中间调,因此提取出的配色尤其容易踩这个坑。

常见问题

会提取多少种颜色?

最多六种。当图片确实没有六种足够可分的颜色时会更少,单色调的照片可能只有三种。

为什么颜色和我图片里的不完全一样?

因为每个色块是一组相似像素的平均值,而不是某一个像素的取值。这比随便取一点(可能落在高光或压缩伪影上)更具代表性。

可以指定提取哪些颜色吗?

不可以。选择是自动的,依据是每种颜色在画面中的占比以及它与已选颜色的差异度。想影响结果,请先把你在意的区域裁出来。

十六进制代码怎么用?

点击任意色块即可复制到剪贴板,然后粘贴进 CSS、设计工具或品牌文档。下载则会把六种颜色作为一张带标注的图片保存。

这些配色符合无障碍要求吗?

不一定。本工具挑选的是视觉上可区分的颜色,而不是满足对比度标准的颜色。上线前请用对比度检查器验证文字与背景的组合。

图片会被上传吗?

不会。分析在浏览器内基于缩小的副本运行,不发送任何内容。

相关工具