figma中可用ai palette generator插件从图片自动提取协调配色方案：先安装插件并插入图片，再右键选择“extract palette from image”，设置色数、灰阶及主色保留选项后分析，最后导出css变量或创建color style应用。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中打开一张含丰富色彩的图片（如背景图、Banner或产品截图），希望从中快速提取协调可用的配色方案，则可借助AI Palette Generator插件实现自动化识别与结构化输出。以下是具体操作步骤：
一、安装并启动AI Palette Generator插件
该插件通过计算机视觉算法分析图像像素分布，自动聚类出主色、强调色与中性色，并生成符合设计规范的HEX值组合。它不依赖人工采样，支持PNG/JPEG嵌入图层及外部图片链接导入。
1、点击Figma右上角“Plugins”→“Search plugins”，输入AI Palette Generator并完成安装与授权。
2、在画布中插入目标图片：可通过拖拽文件、使用“Place image”功能或粘贴截图方式添加。
3、确保图片图层处于未锁定、未编组状态，且可见性为开启。
4、右键点击该图片图层，选择“Plugins → AI Palette Generator → Extract palette from image”。
二、配置提取参数并执行分析
插件会根据图像明暗对比、饱和度梯度与区域权重动态分配色彩优先级，用户可干预聚类数量与语义倾向，以适配不同设计场景需求。
1、在弹出面板中设定Color count为4–8，推荐初始值为6以兼顾多样性与实用性。
2、勾选Include grayscale tones以同步提取图像中的中性灰阶，便于构建完整文本与边框用色体系。
3、若图像主体为品牌物料，启用Preserve dominant hue选项，防止主色被弱化或偏移。
4、点击Analyze按钮，插件将在3–5秒内完成像素扫描并返回色板预览。
三、导出与应用提取结果
提取所得色板以标准格式组织，包含主色（Primary）、辅助色（Secondary）、强调色（Accent）及基础灰阶（Neutral），所有颜色均满足WCAG 2.1 AA级文字对比度要求。
1、在结果面板中点击Copy as CSS variables，获取带前缀的CSS自定义属性代码块（如--color-primary: #3a5fae）。
2、点击Create Color Styles，插件将自动在本地样式库中新建对应命名的Color Style，例如“Extracted / Primary Blue”。
3、选中任意UI组件（如按钮、卡片），在右侧检查器中点击“Fill”旁的“小水滴”图标，切换至“Color Styles”标签页，即可从列表中选取刚生成的样式应用。
4、如需调整某色值精度，双击Color Style名称进入编辑模式，在色板中微调后保存，所有已绑定该样式的图层将实时同步更新。
