FIGMA
Figma Variables (Complete Pack)
Import variables and use all 567 Chinese traditional colors directly in brand files, UI components, and design systems.
Chinese Color AtlasDESIGN RESOURCES
567 COLORS · 70 EXPORTS
SWATCHES · ASE · TOKENS · PROMPTS
SWATCHES · ASE · TOKENS · PROMPTS
Chinese Color Atlas Design Resources
Put 567 Chinese traditional colors directly into Figma, Procreate, Photoshop, Tailwind, CSS, and AI image workflows.
BEST VALUE
Complete Design Pack
A complete handoff bundle for designers and developers: swatches, ASE, Figma Variables, Tailwind, CSS, DTCG tokens, AI prompts, Qianlong Palette, Dunhuang palettes, and solar-term swatches.
INCLUDED
✓Adobe ASE for Photoshop, Illustrator, and InDesign
✓Procreate .swatches by hue, solar term, Qianlong, and Dunhuang
✓CSS variables, Tailwind theme partial, and W3C DTCG tokens
✓Figma Variables JSON import file for design-system setup
✓AI prompt pack for Midjourney, SDXL, and ComfyUI exploration
✓Full JSON dataset with relations, pairings, dye recipes, etymology, and citations
FREE VS COMPLETE
Test the samples, then buy the complete workflow.
Free resources verify formats, attribution, and tutorials. Paid packs are for production projects, team design systems, and batch creation.
•One-time purchase, ZIP download; no subscription.
•Free samples stay public so you can test imports first.
•Complete files are no longer distributed as public `/exports/*` direct links.
567
colors
70
exports
24
solar terms
21
Dunhuang palettes
What You Get
SWATCHES
Procreate Swatches
Organized by hue, 24 solar terms, Qianlong Palette, and Dunhuang caves for direct illustration workflows.
DEV
Tailwind / CSS Tokens
Drop-in developer assets: CSS variables, Tailwind theme partials, and W3C DTCG tokens.
AI
AI Prompt Pack
Color names, HEX values, English labels, and cultural cues formatted for Midjourney, SDXL, and ComfyUI.
WHO IT IS FOR
UI / brand designers
Build guochao, new-Chinese, and cultural brand palettes quickly.
Illustrators / Procreate users
Import swatches and start gufeng, solar-term, and Dunhuang-themed work.
Frontend engineers
Turn traditional colors into CSS, Tailwind, and design tokens.
AI image creators
Control Chinese, Song-style, and Dunhuang imagery with stronger color cues.
USE CASES
Guochao brand identityTea packaging and cultural giftsChinese weddings and festival postersWeb UI and design systemsMidjourney / SDXL promptsFigma / Tailwind workflows
If you only need one HEX value, the free site is enough. The resource packs are for people who need Chinese traditional colors inside real design, development, and AI production workflows.
Choose A Pack
BEST VALUE
Complete Design Pack
Design teams · developers · AI artists
Buy now
$39
$39
Everything in one ZIP for the full design workflow: Figma Variables, ASE, Procreate swatches, CSS, Tailwind, DTCG tokens, AI prompts, Qianlong, Dunhuang, and solar-term palettes.
✓Adobe ASE for Photoshop, Illustrator, and InDesign
✓Procreate .swatches by hue, solar term, Qianlong, and Dunhuang
✓CSS variables, Tailwind theme partial, and W3C DTCG tokens
Procreate Swatches
Illustrators · digital artists
Buy now
$9
$9
Ready-to-import .swatches grouped by hue, 24 solar terms, Qianlong Palette, and Dunhuang mural palettes.
✓24 solar-term .swatches files
✓Hue-family swatches: red, blue, green, yellow, black, water, cang, gold/silver, gray/white
✓Qianlong warm and cool swatches
CSS and Tailwind Token Pack
Frontend engineers · design-system builders
Buy now
$9
$9
Drop-in CSS variables, Tailwind theme partial, W3C DTCG tokens, and structured color JSON for Chinese-inspired UI systems.
✓CSS custom properties for all 567 Chinese traditional colors
✓Tailwind theme partial with stable token names
✓W3C DTCG design tokens for design-system handoff
AI Prompt Pack
Midjourney · SDXL · ComfyUI users
Buy now
$9
$9
Structured prompts for Chinese aesthetic image generation in Midjourney, SDXL, and ComfyUI, grouped by color, scene, HEX value, and cultural cue.
✓Plain-text prompt library
✓Structured JSON prompt data
✓Scene-oriented prompts for branding, wedding, tea, illustration, packaging, and web UI
Free Samples
Download the 4 free samples first to confirm the Procreate swatches, CSS variables, and solar-term palettes fit your workflow. Buy a complete pack to unlock all 567 colors and 70 export files.
cathycolor-hot.swatchesProcreate · 8 popular Chinese Color Atlas starter colors0.3 KB ↓cathycolor-verified.swatchesProcreate · 30 source-backed color sample palette0.9 KB ↓cathycolor-term-lichun.swatchesProcreate · Lichun solar-term sample palette0.6 KB ↓cathycolor.cssPublic CSS custom properties sample for workflow testing27 KB ↓sample-figma-vars.jsonFigma Variables preview for testing import and naming conventionssample ↓Figma Community sample fileDuplicate the free 24-color Figma Variables sample with Guochao, Song-inspired, and Dunhuang palettesFigma ↓sample-ai-prompts.txtSmall Midjourney, SDXL, and ComfyUI prompt previewsample ↓
Before You Buy
Can I use these commercially?
Yes. The exported values and files can be used in commercial projects; attribution is appreciated for public references or research notes.
How do I use it in Figma?
The Complete Pack includes Figma Variables JSON for variable workflows. A future Figma plugin will make search, insertion, and variable generation one-click.
How do I import Procreate swatches?
Download a .swatches file and open it on iPad with Procreate. The free samples let you test the flow first.
How is this different from a color-card website?
This is not only HEX copying; it packages 567 colors into Figma, Procreate, Tailwind, CSS, AI prompt, and full JSON workflows.