Chinese Color AtlasDESIGN RESOURCES
161 CLEAN COLORS · 133 FILES
SWATCHES · ASE · TOKENS · PROMPTS

Chinese Color Atlas Design Resources

Put one 161-color clean-source Chinese color core into Figma, Procreate, Photoshop, Tailwind, CSS, and AI image workflows.

BEST VALUE

Complete Design Pack

133 organized workflow files bring one 161-color clean-source core into Figma, Procreate, Adobe, Tailwind, CSS, and AI creation.Start with 21 corrected scene palettes for brand, wedding, tea, packaging, UI, and more, then carry the same direction into design, code, and AI tools.

INCLUDED
✓Adobe ASE for Photoshop, Illustrator, and InDesign
✓29 Procreate .swatches: 8 clean-core hue groups and 21 corrected scene palettes
✓CSS variables, Tailwind theme partial, and W3C DTCG tokens
✓Figma Variables JSON import file for design-system setup
✓161 clean-source AI prompt records for Midjourney, SDXL, and ComfyUI exploration
✓21 production-ready scene palettes with JSON, CSS, SVG previews, Procreate swatches, and pairwise contrast reports
✓Quick-start PDF and 22-page scene palette catalog
✓Canonical 161-color JSON with RGB, HSL, CMYK, reliability, and explicit MIT source rights
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.
Color coverage
Free samples: 8 hot colors, 30 source-backed colors, one Lichun palette, and a CSS sample.
Complete pack: a 161-color clean-source core, 21 corrected scene palettes, and synchronized design, code, and AI formats.
Design software
Free samples let you test Procreate and CSS workflows.
Complete pack adds Figma Variables, Adobe ASE, and the full Procreate swatch library.
Developer handoff
The public CSS sample is for demos, tutorials, and attribution examples.
Complete pack includes CSS variables, Tailwind theme, W3C DTCG tokens, and full JSON.
AI creation
GitHub includes a small prompt preview.
Complete pack organizes Midjourney / SDXL prompts by color, scene, HEX, and cultural cues.
161
clean-source colors
133
complete-pack files
29
Procreate swatches
21
scene reports

What You Get

FIGMA

Figma Variables (Complete Pack)

Import the same 161-color clean-source core into brand files, UI components, and design systems.

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

Procreate Swatches

Organized as 8 clean-core hue groups and 21 corrected scene palettes for direct illustration workflows.

clean core · 8 hue groups · 21 scenes
DEV

Tailwind / CSS Tokens

Drop-in developer assets: CSS variables, Tailwind theme partials, and W3C DTCG tokens.

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

AI Prompt Pack

Chinese names, pinyin, English labels, HEX values, and explicit source rights formatted for Midjourney, SDXL, and ComfyUI.

carmine rouge, Song dynasty palette, #9D2933
WHO IT IS FOR

UI / brand designers

Build guochao, new-Chinese, and cultural brand palettes quickly.

Illustrators / Procreate users

Import clean-core hue or scene swatches for illustration, packaging, and social visuals.

Frontend engineers

Turn traditional colors into CSS, Tailwind, and design tokens.

AI image creators

Use 161 clean-source prompts and 21 corrected scenes to control color direction.

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

133 organized files generated from one 161-color clean-source core: Figma Variables JSON, ASE, Procreate, web tokens, AI prompts, 21 corrected scene palettes, accessibility reports, and visual guides.

✓Adobe ASE for Photoshop, Illustrator, and InDesign
✓29 Procreate .swatches: 8 clean-core hue groups and 21 corrected scene palettes
✓CSS variables, Tailwind theme partial, and W3C DTCG tokens
NEW · $9 LAUNCH

Chinese Festival Color Palette & Token Kit

Brand designers · design-system teams · frontend developers

Launch price · Buy now
$9

Five traditional festivals, 25 clean-source editorial palettes, 125 role tokens, and per-palette accessibility reports in synchronized JSON, W3C DTCG, CSS, Tailwind CJS, and structured Figma Variables import data.

✓25 editorial palettes across Spring Festival, Qingming, Dragon Boat Festival, Mid-Autumn Festival, and Double Ninth Festival
✓125 role tokens: surface, primary, secondary, accent, and text
✓Canonical JSON, W3C DTCG JSON, CSS custom properties, Tailwind-compatible CJS, and structured Figma Variables import JSON

Procreate Swatches

Illustrators · digital artists

Buy now
$9

60 organized files with 29 ready-to-import .swatches: 8 clean-core hue groups and 21 corrected practical scenes, plus SVG previews and a visual catalog.

✓8 clean-core hue-group .swatches files covering all 161 eligible colors
✓Groups for red, orange, yellow, green, blue, purple, and neutrals
✓21 scene-specific .swatches for branding, wedding, tea, packaging, UI, illustration, and more

CSS and Tailwind Token Pack

Frontend engineers · design-system builders

Buy now
$9

One 161-color clean-source core in synchronized CSS, Tailwind, W3C DTCG, Figma Variables JSON, and canonical JSON formats.

✓CSS custom properties for 161 exact-match MIT-source 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

161 clean-source color prompt templates for Midjourney, SDXL, and ComfyUI, with canonical color metadata and 21 corrected scene-palette references.

✓Plain-text prompt library
✓Structured JSON prompt data
✓21 corrected clean-source scene palettes for visual-direction reference

Free Samples

Start with the free Figma Base plugin, Procreate swatches, CSS variables, and a solar-term sample. The Complete Pack adds a 161-color clean-source core, 21 corrected scene palettes, and 133 organized files.

Chinese Color Atlas Base · Figma24-color search, fills, cards, scene palettes, and local VariablesFREE ↗
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. Follow the product license and retain the upstream MIT license, ATTRIBUTION, and RIGHTS-MANIFEST with archived or team-handoff copies. Do not repackage the complete files as a competing product.

How do I use it in Figma?

Use the free Base plugin for 24-color search, fills, cards, palettes, and Starter Variables inside Figma. The Complete Pack adds a 161-color clean-source Variables JSON and cross-tool handoff files.

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 synchronizes a 161-color clean-source core across Figma, Procreate, Tailwind, CSS, AI prompt, and JSON workflows.