PhotoColors怎么保存色卡？配色方案导出教程

PhotoColors 这套配色方案，导出时可不是只有“复制粘贴”这一条路。它一口气准备了五种即用格式，分别对应不同场景：网页端复制 HEX/RGB 纯文本、带语义前缀的 CSS 变量文件、Adobe Swatch Exchange (.ase) 文件、JSON 主题配置，以及带 HEX 标注的 PNG 色卡图像。无论你是在写前端代码、做设计稿，还是给客户展示色板，总有一款能直接上手。

但问题是——很多人在调好配色后，点来点去找不到保存入口，或者导出后发现格式不对、命名混乱、颜色顺序错乱。其实，只要搞清楚每种格式的导出姿势，这些坑都能避开。

网页端一键复制 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 中自动载入为新色板组，但

。若已存在同名组，建议先导出前在 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 背景图或情绪板素材。