Chinese Traditional Colors

简体中文 | English | 日本語

Not another color-value list that looks beautiful but leaves you wondering what to do next.

This is a practical workspace for moving from finding a Chinese color to pairing, testing, and shipping it: 742 high-resolution cards, 8,904 harmony sets, real-scene previews, shadcn themes, and terminal palettes.

Explore the colors → · Build a palette from one color · Download every high-resolution card

Finding a beautiful color is easy. Making it work is the hard part.

A real project rarely needs just one HEX value. You also need to know whether the color belongs in a background, headline, button, or accent; what can sit beside it; whether the text remains readable; and how the choice becomes a theme your developer can actually use.

This project connects those decisions in one place. It helps you find a color, then judge whether it survives a real layout.

Start with the job in front of you

See the color in context before committing to it

One anchor color is placed into background, headline, body, button, and accent roles across actual design scenes. You evaluate a layout, not an isolated square.

Harmony relationships narrow the search before trial and error takes over: same-family, analogous, complementary, triadic, warm/cool, light/dark, gray-tone, and neutral combinations are ready to inspect.

From a color name to a developer-ready theme

Theme Forge turns one named anchor into a full set of shadcn semantic roles, handles light and dark modes, previews real components, checks foreground contrast, and exports globals.css.

Open Theme Forge →

What is actually included

• 742 high-resolution PNG cards, aligned one-to-one with the original 742-color list, with names, HEX, RGB, CMYK, palette notes, and mood keywords.
• 8,904 traceable harmony sets, available as both Markdown and CSV for browsing or reuse.
• A complete static design workspace for search, palettes, scene tests, gradients, usage cards, shadcn themes, and terminal themes.
• Local, account-free favorites for cards, palettes, usage pairs, generated schemes, and scene tests.
• 10 standalone Agent Skills for briefs, palette building, layout placement, UI tokens, accessibility, brand systems, data visualization, legacy audits, content series, and print production.

Take the workflow into Claude Code

Each xxd-* skill bundles the full color list and harmony data, so it can work independently without fetching reference data from the network.

git clone https://github.com/nevertoday/zhongguo-traditional-colors.git
cp -r zhongguo-traditional-colors/skills/xxd-palette-builder ~/.claude/skills/

A small preview of the archive

The README shows 12 representative cards. Browse all 742 in the online gallery, the images/ directory, or the Release ZIP.

Download, run locally, or reuse the data

The source image set is about 998 MB, so the complete archive is distributed through GitHub Releases instead of bloating the repository.

• Download every high-resolution PNG
• Browse the original 742-color list
• Download harmony data as CSV

This is a static site. To preview it locally:

npm run manifest
npm run readme
npm run start

Then open http://localhost:5173. After adding or replacing cards, run npm run manifest && npm run readme to update the manifest and README gallery.

A practical boundary

Traditional color values vary across sources, screens, print processes, inks, and materials. Use this project to search, compare, prototype, and communicate; verify against the real medium before production printing.

Contributing and license

Issues and pull requests are welcome. New cards, corrected values, better sourcing, tool improvements, and clearer documentation are all useful; please read CONTRIBUTING.md first.

Released under the MIT License. If the project saves you a round of hunting for references and repeatedly testing colors, consider starring it or sharing it with another maker.