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 中自动载入为新色板组，但【务必确保当前 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 背景图或情绪板素材。