简体中文 | English | 日本語

If you design interfaces, write visual content, build course material, or put together a cultural website, you often need Chinese colors that look good and can survive a real layout. This repository was organized for that moment.

It collects 742 high-resolution Chinese traditional color cards, mapped one by one to the original 742-color list. Each card keeps the color name, HEX, RGB, CMYK, palette notes, and mood keywords. The website is more than an image archive: you can search colors, test them in real scenes, generate palettes, browse harmony relationships, inspect gradient logic, build background/text usage cards, and save the colors or schemes you want to keep.

Quick Links

• Browse the online gallery
• Open the scene testing workbench
• Open the palette generator
• Open the Chinese color palette board
• Open gradient logic cards
• Open usage cards
• Open local favorites
• Open Studio Skills
• Download the complete ZIP
• View the Release
• Original 742-color list
• 742-color harmony Markdown
• 742-color harmony CSV
• Practical Chinese color skills
• Author on X

What You Can Do With It

If you need to	You can use
Find a Chinese color reference fast	742 high-resolution PNG color cards
Make visuals for design or content	Preview, copy, download, and favorite individual cards
Build a local color library	Filenames matched to the 742-color source list
Try colors in websites, slides, covers, posters, or brand boards	Scene testing maps one anchor color into background, title, body, button, and accent roles
Produce a usable palette quickly	The generator lets you lock, replace, rotate, copy, export, and favorite full schemes
Look for harmony and inspiration	Browse 8,904 palettes across same-color, analogous, complementary, triadic, warm/cool, light/dark, gray-tone, and neutral relationships
Understand one color as a gradient system	Each traditional color becomes light, anchor, nearby, deep, two-tone, and gradient-path cards
Test background/text/button use	Usage cards check contrast and support copy, remix, nearby-color replacement, and favorites
Keep the combinations that work	Favorites collect color cards, palettes, usage cards, generated schemes, and scene tests
Check names and values	Centralized color names, HEX, RGB, and CMYK references
Use traditional colors in a real project	10 agent skills for practical design workflows

The original image set is about 998 MB. The ZIP is distributed as a GitHub Release asset instead of being committed to the repository.

Feature Screenshots

Browse Color Cards

Search all 742 cards by number, name, HEX, or hue. Each card supports previewing details, copying values, downloading the original PNG, and saving it locally.

Scene Testing

Pick one traditional color and see how it works across web, slide, cover, poster, and brand-board scenes as background, title, body, button, and accent roles.

Palette Generator

Generate five-color schemes from an anchor color or generation mode, then lock, replace, rotate, reverse, copy, favorite, or export the full set.

Palette Inspiration

Explore 8,904 harmony sets across same, analogous, complementary, triadic, temperature, light/dark, gray-tone, and neutral relationships, with copy, favorite, and shuffle actions.

Usage Cards

Build background/text two-color cards with layout previews, contrast checks, second-color search, copy, remix, and favorite actions.

Local Favorites

Review locally saved color cards, palettes, usage cards, generated schemes, and scene tests, with type filters, copy, open, and remove controls.

Studio Skills

Turn the 742-color list and harmony data into practical workflows for briefs, palettes, layout placement, tokens, accessibility, brand systems, charts, legacy audits, content series, and print production.

Practical Chinese Color Skills

These skills are not another explanation of color theory. They turn the 742-color list and harmony CSV into workflows a designer or builder can use right away. Each skill answers a real blocker: vague art direction, too many palette options, unclear layout placement, token handoff, readability checks, brand governance, chart encoding, legacy color cleanup, long-running content series, and print production.

Every xxd-* skill folder bundles the full references/chinese-color-master-list.md, references/chinese-color-harmony.md, and references/chinese-color-harmony.csv. You can take one skill into another project and still have the complete 742-color list plus every color's harmony relationships.

Install into Claude Code

Each xxd-* is a native Claude Code skill (a SKILL.md with frontmatter), so you can drop it straight into your own Claude Code:

# After cloning, copy the skills you want into your personal skills folder
git clone https://github.com/nevertoday/zhongguo-traditional-colors.git
cp -r zhongguo-traditional-colors/skills/xxd-palette-builder ~/.claude/skills/
# Or install all of them:
cp -r zhongguo-traditional-colors/skills/xxd-* ~/.claude/skills/

Every skill bundles its own references/, so it runs standalone with no network access. Once installed, just describe your task in Claude Code (e.g. "build a UI token set from 朱砂") or invoke the matching skill to trigger it.

Skill	Use it for
xxd-color-brief	Translate vague terms like premium, Eastern, young, or restrained into temperature, lightness, saturation, contrast, and risk constraints
xxd-palette-builder	Filter anchor colors, HEX values, moods, or contexts into a small role-based palette with ratios
xxd-palette-applier	Place colors into real layouts by deciding background, title, body, CTA, structure, and decoration roles
xxd-ui-token	Convert traditional colors into primitive, semantic, component, and mode-aware UI tokens
xxd-accessible-color	Check text, button, state, and chart pairs with WCAG ratios and repair failures from the same color set
xxd-brand-system	Build brand anchors, support colors, ratios, channel rules, forbidden combinations, and governance boundaries
xxd-data-viz	Create chart colors by categorical, sequential, diverging, highlight, or semantic data meaning instead of poster palettes
xxd-existing-design-audit	Inventory legacy screenshots, CSS, Figma styles, or HEX lists and decide what to keep, merge, replace, or remove
xxd-content-series	Build fixed, variable, template, and rotation layers for social, editorial, course, and video series
xxd-print-packaging	Plan packaging, books, cultural goods, labels, and physical materials with CMYK, substrate, and proofing risks

How to choose a skill

If the direction is still vague, start with xxd-color-brief. If you already have a main color or a shortlist, use xxd-palette-builder to narrow it into a role-based palette, then use xxd-palette-applier to place it in a real layout. When the colors need to move into development, a team system, or production, continue with xxd-ui-token, xxd-brand-system, xxd-data-viz, or xxd-print-packaging. If you are dealing with old screenshots, CSS, or scattered HEX values, start with xxd-existing-design-audit. For long-running content series, start with xxd-content-series.

Featured Color Preview

The README shows 24 representative cards so the page stays readable. Browse or download the complete 742-card archive through the online gallery, the images/ directory, or the Release ZIP.

Why This Exists

Chinese traditional color references are scattered across the web. When making real work, people often still need to collect images, copy values, compare names, and organize files by hand. This project removes that repeated setup work so the archive can be used directly in design, teaching, writing, product UI, and open-data experiments.

Traditional colors are not only color values. They connect with craft, dyeing, mineral pigments, poetry, seasonal imagery, objects, and aesthetic order. Presenting them as browsable cards makes them easier to feel, compare, remember, and reuse.

Star History

Data Notes

Images use the NNN-color-name.png naming pattern and match the original 742-color list. The current archive contains 742 high-resolution PNG cards.

Local Preview

npm run manifest
npm run readme
npm run start

Then open:

http://localhost:5173

The complete ZIP is provided through GitHub Releases. Browser-side ZIP generation is kept only as a fallback and should be used through a local server or GitHub Pages, not through file://.

Support

This archive remains free and open source. If it saves you time, a Star, a share, a useful issue, or buying 小小东 a coffee through Buy Me a Coffee all help the project keep improving.

Buy Me a Coffee

License

This project is released under the MIT License.

Note: Traditional color values may vary across sources, screens, print processes, and materials. Treat this archive as an open reference and verify colors for production use.