Chinese Color Atlas中国传统色卡下载
567 COLORS · 70 EXPORTS
SWATCHES · ASE · TOKENS · PROMPTS

中国传统色设计资源包

把 567 种中国传统色卡直接放进 Figma、Procreate、Photoshop、Tailwind、CSS 和 AI 绘图工作流。

最推荐

完整设计资源包

一份给设计师和开发者的完整交付包：色板、ASE、Figma Variables、Tailwind、CSS、DTCG tokens、AI 提示词、乾隆色谱、敦煌色与节气色板。

包含内容
✓适用于 Photoshop、Illustrator、InDesign 的 Adobe ASE 色板
✓按色系、节气、乾隆色谱、敦煌壁画整理的 Procreate .swatches
✓CSS 变量、Tailwind 主题片段与 W3C DTCG 设计 Tokens
✓用于设计系统搭建的 Figma Variables JSON 导入文件
✓适用于 Midjourney、SDXL、ComfyUI 探索的 AI 提示词包
✓含关系、配色、染方、语源与引用的完整 JSON 数据集
免费 vs 完整

先试用样包，再购买完整工作流。

免费资源用于验证格式、引用和教程；付费包用于真正交付项目、团队设计系统和批量创作。

•一次购买，下载 ZIP；无需订阅。
•免费样包保持公开，方便先测试导入流程。
•完整文件不再作为 `/exports/*` 公开直链分发。
色彩数量
公开样包：8 色热门样包、30 色来源支持样包、立春节气样包与 CSS 示例。
完整包：567 色、乾隆色谱、敦煌壁画色、24 节气与全部色系分组。
设计软件
免费样包可测试 Procreate 与 CSS 工作流。
完整包提供 Figma Variables、Adobe ASE 与完整 Procreate 色板。
开发交付
公开 CSS 样包适合 demo、教程与引用。
完整包包含 CSS variables、Tailwind theme、W3C DTCG tokens 与完整 JSON。
AI 创作
GitHub 提供小版 prompt 预览。
完整包按色彩、场景、HEX 与文化线索组织 Midjourney / SDXL 提示词。
567
传统色
70
导出文件
24
节气色板
21
敦煌洞窟色板

你会得到什么

FIGMA

Figma Variables（完整包）

导入变量后，可直接在品牌稿、UI 组件和设计系统中调用 567 种中国传统色。

{ "color": { "yanzhi": "#9D2933" } }
SWATCHES

Procreate 色板

按色系、24 节气、乾隆色谱和敦煌洞窟整理，插画师可以直接导入使用。

hot · source-backed · lichun · dunhuang
DEV

Tailwind / CSS Tokens

给前端项目的 drop-in 资源：CSS variables、Tailwind theme partial、W3C DTCG tokens。

--cc-yanzhi: #9D2933;
'yanzhi': '#9D2933'
AI

AI Prompt Pack

把色名、HEX、英文名和文化线索组织成 Midjourney、SDXL、ComfyUI 可用提示词。

carmine rouge, Song dynasty palette, #9D2933
适合谁

UI / 品牌设计师

快速建立国潮、新中式、文化品牌的配色系统。

插画师 / Procreate 用户

导入色板后直接开始古风、节气、敦煌主题创作。

前端工程师

把传统色变成 CSS、Tailwind 和设计 Tokens。

AI 绘图用户

用文化语境更准确地控制国风、宋式、敦煌图像。

使用场景
国潮品牌视觉茶包装与文创礼盒中式婚礼与节日海报网页 UI 与设计系统Midjourney / SDXL 提示词Figma / Tailwind 工作流

如果你只是想复制单个 HEX，免费站点已经够用；资源包面向的是需要把中国传统色真正放进设计、开发和 AI 生产流程的人。

选择资源包

BEST VALUE

完整设计资源包

设计团队 · 开发者 · AI 创作者

立即购买
$39

一个 ZIP 打包完整设计工作流：Figma Variables、ASE、Procreate 色板、CSS、Tailwind、DTCG Tokens、AI 提示词、乾隆色谱、敦煌色与 24 节气色板。

✓适用于 Photoshop、Illustrator、InDesign 的 Adobe ASE 色板
✓按色系、节气、乾隆色谱、敦煌壁画整理的 Procreate .swatches
✓CSS 变量、Tailwind 主题片段与 W3C DTCG 设计 Tokens

Procreate 色板包

插画师 · 数字艺术家

立即购买
$9

可直接导入 Procreate，按色系、24 节气、乾隆色谱、敦煌壁画色分组。

✓24 个节气 .swatches 文件
✓按红、蓝、绿、黄、黑、水、苍、金银、灰白分组的色系色板
✓乾隆色谱暖色与冷色色板

CSS 与 Tailwind Token 包

前端工程师 · 设计系统构建者

立即购买
$9

面向中国色 UI 系统的可直接接入资源：CSS 变量、Tailwind 配置、W3C DTCG Tokens 与结构化 JSON。

✓全部 567 个中国传统色的 CSS 自定义属性
✓带稳定 token 命名的 Tailwind 主题片段
✓用于设计系统交付的 W3C DTCG 设计 Tokens

AI 提示词包

Midjourney · SDXL · ComfyUI 用户

立即购买
$9

面向 Midjourney、SDXL、ComfyUI 的中国传统色提示词，按色彩、场景、HEX 与文化线索分组。

✓纯文本提示词库
✓结构化 JSON 提示词数据
✓覆盖品牌、婚礼、茶、插画、包装、网页 UI 的场景提示词

免费样包

先下载 4 个免费样包，确认 Procreate 色板、CSS 变量和节气色板是否适合你的工作流；购买完整资源包后解锁全部 567 色与 70 个导出文件。

cathycolor-hot.swatchesProcreate · 8 个 Chinese Color Atlas 热门入门色0.3 KB ↓cathycolor-verified.swatchesProcreate · 30 个来源支持色样包0.9 KB ↓cathycolor-term-lichun.swatchesProcreate · 立春节气色板样包0.6 KB ↓cathycolor.css公开 CSS 自定义属性样包 · 用于测试工作流27 KB ↓sample-figma-vars.jsonFigma Variables 示例 · 用于测试导入和命名规范sample ↓Figma Community sample file复制免费的 24 色 Figma Variables 社区样例，包含国潮、宋式与敦煌配色Figma ↓sample-ai-prompts.txt小版 Midjourney、SDXL、ComfyUI 提示词预览sample ↓

购买前常见问题

可以商用吗？

代码和导出色值可用于商业项目；建议在公开资料或研究引用中保留 Chinese Color Atlas 来源。

Figma 怎么用？

Complete Pack 包含 Figma Variables JSON，可导入变量工作流；后续 Figma 插件会把搜索、插入和变量生成做成一键操作。

Procreate 怎么导入？

下载 .swatches 文件后，在 iPad 上用 Procreate 打开即可导入。免费样包可先测试流程。

和普通色卡网站有什么区别？

这里不只是复制 HEX，而是把 567 色整理成 Figma、Procreate、Tailwind、CSS、AI prompt 和完整 JSON 工作流。