图片主色怎么提取？HEX、颜色占比和文字对比度这样看

从一张商品图、海报或参考图里拿到配色，真正要解决的通常不是“这个像素是什么颜色”，而是三个更具体的问题：画面主要由哪些颜色组成、每种颜色大约占多少、标题放上去以后能不能看清。

这也是单点取色和调色板的区别。单点取色适合核对 Logo、按钮或某个像素的准确色值；调色板适合把整张图概括成几种可复用的代表色。两者不能互相替代。

先分清：你要的是一个像素，还是整张图的配色

如果你已经知道要检查的位置，例如商品包装上的蓝色区域，就用图片取色器直接点那个像素。它回答的是一个局部问题。

如果你面对的是一张完整海报，想知道主背景、商品、点缀色分别是什么，就需要提取调色板。工具会把相近颜色合并成代表色，再给出 HEX、RGB 和近似占比。它回答的是画面整体由哪些颜色构成。

一个简单判断：

• 要复刻某个明确色块，用单点取色。
• 要整理品牌配色、封面配色或参考图色板，用调色板。
• 要给图片加标题，先提取调色板，再检查文字与背景的对比度。

从主色到可读文字，按四步做

把这件事拆成四步，才不容易把“颜色好看”和“文字看得清”混为一谈：

图注：先提取代表色，再为真实背景选择可读文字。

1. 上传图片，先确认方向、透明背景和画面内容都正确。
2. 选择要提取的颜色数量，让结果保留足够层次，但不要把轻微渐变拆得过碎。
3. 查看每个代表色的 HEX、RGB 和占比，确定主色、辅色与点缀色。
4. 分别检查黑字、白字或自定义文字颜色的对比度，再决定标题和正文用什么颜色。

顺序很重要。直接凭肉眼挑一个“感觉能看清”的文字色，常常会在大屏上没问题，换到手机或亮度较低的屏幕就变得发灰。

3–12 个颜色怎么选

图叮的图片调色板工具支持提取 3–12 个代表色。数量不是越多越准确，而是要和用途匹配。

只想确定一个活动页的主色、辅色和点缀色，可以先从 3–5 色开始。商品图、室内图或带有渐变的海报层次更多，可以提高到 6–8 色。接近 12 色时，结果会保留更多细节，但也更容易把光影变化当成独立色块。

建议先看少量颜色的结果。如果主商品和背景被合并成同一颜色，再逐步增加数量。这样比一开始拉满更容易得到能直接用于设计的色板。

颜色占比应该怎么理解

调色板里的占比表示某个代表色覆盖的近似像素权重，不等于“这个商品占画面的百分之多少”。工具会忽略透明度低于 16 的像素，其余像素按 Alpha 权重统计，再把非常接近的颜色合并。

因此，半透明阴影、玻璃反光和渐变会影响占比。它适合判断“深色背景是不是画面的主导色”，不适合当作商品面积测量工具。

还有一个常见误解：主色占比最高，不代表它一定适合做按钮或标题。背景色面积很大，但如果它与品牌强调色过于接近，按钮仍然可能不醒目。占比负责说明画面结构，对比度负责说明文字可读性。

4.5:1 和 3:1 怎么用

按 WCAG 2.2 的最低对比度口径，普通文字与背景通常至少需要 4.5:1；大号文字通常至少需要 3:1。这里的比值越高，明暗差异越明显。

实际使用时，可以对每个代表背景色分别检查：

• 黑字是否达到普通文字和大字阈值；
• 白字是否达到对应阈值；
• 品牌指定文字色是否达到阈值。

临界值不能靠四舍五入“算通过”。例如真实计算结果低于 4.5:1，即使界面显示到两位小数后看起来接近 4.50，也应该换一个更深或更浅的文字色。

需要注意，WCAG 对比度只回答文字能不能看清，不判断配色是否高级，也不替你决定字号、字重和排版层级。

照片和渐变背景，不能只看一个代表色

调色板把整张图片概括成有限颜色，但照片里的背景可能同时有高光、阴影和纹理。标题跨在渐变或复杂照片上时，即使它和主色的对比度通过，也可能在局部亮区或暗区失去可读性。

更稳妥的做法是：

1. 用调色板确定候选文字色；
2. 把文字放回真实版式；
3. 检查文字覆盖范围内最亮和最暗的位置；
4. 必要时加纯色底板、局部蒙层或调整文字位置。

如果下一步要把标题直接放到图片上，可以打开图片加文字继续排版。调色板给你候选色，真实版式上的最差位置才决定最终能不能用。

用图叮提取主色和检查对比度

打开图片调色板与文字对比度检查，选择 PNG、JPG、WebP、HEIC 或 HEIF 图片，再设置 3–12 个颜色。登录前可以选图、预览和调颜色数量；登录后才会在当前浏览器提取主色、复制结果或导出。

完成后可以查看每个代表色的 HEX、RGB、占比，以及黑字、白字和自定义颜色的对比度。结果还能复制为 CSS、JSON，或下载成调色板 PNG，方便交给前端、设计或运营继续使用。

图片像素和颜色结果在浏览器本地处理，不会作为图片内容上传。这个边界适合普通网页图、商品图和海报配色；它使用 sRGB 对比度，不覆盖 CMYK、ICC 或专业印刷校色。

用三条标准验收

• 色板数量是否足够表达主色、辅色和点缀色，又没有把渐变拆得太碎；
• 颜色占比是否只用于理解画面结构，没有被误当成商品面积；
• 文字颜色是否在真实版式的最差位置仍然可读，而不是只对一个代表色通过。

先提取代表色，再检查对比度，最后放回真实版式复核。这样得到的不是一组“看起来差不多”的色值，而是一套可以继续用于标题、按钮和页面设计的配色判断。