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 工作流。