photocolors配色方案可一键导出为五种即用格式：一、网页端复制hex/rgb纯文本，顺序与界面色块一致；二、导出带语义前缀的css变量文件，支持自定义命名前缀；三、生成adobe swatch exchange（.ase）文件，供ps等设计软件直接载入；四、输出含角色定义的json主题配置；五、渲染带hex标注的png色卡图像。
你需要把PhotoColors里刚调好的配色方案保存下来，方便下次复用或交给开发同事直接嵌入代码，但点来点去找不到保存入口，或者导出后发现格式不对、命名混乱、颜色顺序错乱。
网页端一键复制HEX/RGB色值
这是最快捷的临时保存方式，适合快速标注或发给前端写CSS变量。
点击右上角“Copy”按钮 → 在弹出菜单中选择“Copy HEX values” → 粘贴到记事本或代码编辑器中，每种颜色自动换行。
注意：复制结果不含颜色名称，只有一串十六进制码，比如#FF6B35 #4ECDC4 #44A08D #FFBE0B #FB5607。如果配色顺序对你很重要，这一步必须立刻确认粘贴后顺序是否与界面一致——【界面从左到右的色块顺序，就是复制后的上下顺序】，一旦粘贴错位，后期很难还原。
导出为可导入设计软件的.ase色板文件
如果你用Photoshop、Illustrator或Figma（装了插件），这个格式能直接拖进色板面板，省去逐个手动输入色值的麻烦。
方法一：点击配色方案右侧“Export”按钮 → 切换到“Swatches”标签页 → 选择“Adobe Swatch Exchange (.ase)” → 点击“Download”。
方法二（快捷路径）：在配色详情页，直接点击底部“Download as .ase”链接，跳过面板选择步骤。
导出的.ase文件双击即可在PS中自动载入为新色板组，但【必须确保当前PS未打开其他同名色板，否则会覆盖而非新增】。若已存在同名组，建议先导出前在PhotoColors里重命名方案，比如加上日期“夏日渐变_20260728”。
生成带语义前缀的CSS变量文件
这一步专为前端工程准备，导出即用，无需二次加工。
第一步：点击“Export”按钮 → 选择“CSS Variables”格式。
第二步：在“Prefix”输入框里修改默认前缀--color-，例如改为--ui-primary、--brand-accent或--text-on-dark。
第三步：确认颜色命名逻辑——PhotoColors会按色块从左到右依次命名为1、2、3…，所以第一个色块对应--ui-primary-1，第二个是--ui-primary-2。如果你希望第一个是主色、第二个是辅色，就得在导出前手动调整色块顺序。
第四步：点击“Download CSS file”，保存为colors.css，直接丢进项目src/assets/目录下，再在main.css里@import "./assets/colors.css"即可生效。
输出带标注的PNG色卡图像
用于向非技术人员（如客户、市场同事）展示配色效果，或插入设计文档作视觉参考。
打开导出面板 → 选择“PNG Color Palette” → 勾选“Show labels”以显示HEX码和序号 → 点击“Generate & Download”。
生成的PNG默认宽度1200px，高度自适应，每个色块下方清晰标注#号+六位HEX值，字体为无衬线体，背景为纯白。
不勾选“Show labels”时，图片只保留色块本身，适合做PPT背景图或情绪板素材。
