Chinese traditional colors is a reference collection of classic hues from China's historical color system, showing each color's Chinese name, pinyin, HEX code, RGB, CMYK, and an auto-generated Tailwind CSS shade scale. The CMYK values come from digital conversion of the originals, so printed results will differ from screen display depending on paper and press calibration — always run a test print before finalizing.
Copying color values
Each card shows a CMYK ring chart where the four channels are visualized as arcs. Click any channel number to copy that component alone.
On desktop, hover a card to reveal the full HEX, RGB, and CMYK values — click any to copy. Below the card, a Tailwind-style scale from shade 50 to 900 lets you click any swatch to copy its hex value directly.
On mobile, all values are displayed below each card and can be tapped to copy.
Where the names come from
Traditional Chinese color names are drawn from natural materials and phenomena. A few examples:
Minerals and plants
- Vermilion (朱砂红) — cinnabar mineral red
- Indigo (靛青) — dye extracted from indigo plants
- Gamboge (藤黄) — golden resin from vine plants
- Malachite (石绿) — oxidized copper ore green
Natural scenery
- Sky-water celadon (天水碧) — blue-green where sky meets autumn water
- Moonwhite (月白) — cool white under moonlight
- Smoky blue (烟波蓝) — grey-blue haze over water
- Bamboo green (竹青) — yellow-green of young bamboo
Using the Tailwind scale in a project
The shade scale (50–900) is generated automatically from each base color. Paste any HEX value into tailwind.config.js under theme.extend.colors to add the full scale to your project. This gives you a traditional Chinese color palette that works with all Tailwind utility classes.
Search tips
The search box filters by Chinese name, pinyin, HEX code, RGB values, or CMYK numbers. Searching 红 shows all colors with "red" in the name; #c93756 or c93756 locates that exact color; pinyin like zhu finds 朱砂 and 朱红 by syllable.