UI 与视觉设计灵感
从参考图和自有视觉素材中提取代表色，作为设计系统配色讨论的起点。
适合这些场景
配色提取适用于哪些设计任务？
商品图视觉统一
比较商品图、活动图和品牌素材的主要色调，再人工选择更适合运营页面的颜色。
前端 CSS 变量
生成可复制或下载的 CSS 变量，并在真实页面中检查文字对比度和可访问性。
操作路径
如何提取、调整和导出配色
- 上传 JPG、PNG 或 WebP 图片，工具会在浏览器本地提取代表色。
- 选择 5、8 或 10 色配色卡，必要时使用吸管添加指定区域颜色。
- 复制单个色值或 CSS 变量，也可以下载 CSS 文件或导出配色卡 PNG。
理解采样结果和颜色偏差
- 大面积背景通常会影响主色排序，小面积品牌色可能需要用吸管手动补充。
- 半透明像素、渐变、高光和阴影会影响采样，提取结果不一定等于物体固有颜色。
- 印刷、商品色卡和品牌标准应使用校准设备与正式色彩规范，不能只依据屏幕截图。
浏览全部图片处理专题
常见疑问
图片配色提取常见问题
提取的颜色是图片中精确占比最高的颜色吗？
不一定。工具会缩小图片并对颜色分桶、排序，结果是代表性主色，适合设计参考而不是精密色彩测量。
为什么提取结果没有小面积 Logo 颜色？
小面积颜色在整体采样中占比较低，可能不会进入前几种主色。可以使用吸管选择 Logo 区域并加入色卡。
网页 HEX 色值可以直接用于印刷吗？
不建议直接使用。屏幕 RGB/HEX 与印刷 CMYK、纸张和油墨表现不同，应经过专业色彩转换和打样。