# 中国伝統色

[简体中文](README.zh-CN.md) | [English](README.md) | 日本語

このリポジトリは、デザイン、教材、記事、Web テーマ、文化研究でそのまま使える中国伝統色の資料兼ワークベンチです。

742 枚の高解像度カラーカードを収録し、元の 742 色リストと対応させています。各カードには色名、HEX、RGB、CMYK、配色の参考、雰囲気のキーワードをまとめています。現在のサイトでは、色カード閲覧だけでなく、実際のレイアウトでの試色、配色生成、配色関係の閲覧、グラデーションロジックの確認、用途カード作成、気に入った色や配色のローカル保存もできます。

## クイックリンク

- [オンラインギャラリーを見る](https://colors.xiaoxiaodong.ai/)
- [シーン試色ワークベンチを見る](https://colors.xiaoxiaodong.ai/style-lab.html)
- [配色ジェネレーターを見る](https://colors.xiaoxiaodong.ai/generator.html)
- [中国色パレットボードを見る](https://colors.xiaoxiaodong.ai/palettes.html)
- [グラデーションロジックカードを見る](https://colors.xiaoxiaodong.ai/gradients.html)
- [用途カードを見る](https://colors.xiaoxiaodong.ai/uses.html)
- [ローカルお気に入りを見る](https://colors.xiaoxiaodong.ai/favorites.html)
- [Studio Skills を見る](https://colors.xiaoxiaodong.ai/skills.html)
- [完全 ZIP をダウンロード](https://github.com/nevertoday/zhongguo-traditional-colors/releases/latest/download/zhongguo-traditional-colors-images.zip)
- [Release を見る](https://github.com/nevertoday/zhongguo-traditional-colors/releases/tag/v0.1.0)
- [元の 742 色リスト](docs/chinese-color-master-list.md)
- [742 色配色 Markdown](docs/chinese-color-harmony.md)
- [742 色配色 CSV](docs/chinese-color-harmony.csv)
- [実用向け中国色 Skills](#実用向け中国色-skills)
- [作者の X](https://x.com/xiaoxiaodong01)

## このプロジェクトでできること

| 目的 | 提供内容 |
| --- | --- |
| 中国色の参考をすばやく探す | 742 枚の高解像度 PNG カード |
| デザインや記事素材に使う | カードのプレビュー、コピー、単体ダウンロード、お気に入り保存 |
| ローカルの色資料ライブラリを作る | 742 色リストに対応したファイル名 |
| Web、スライド、表紙、ポスター、ブランド案に使う | シーン試色で主色を背景、タイトル、本文、ボタン、アクセントに分解 |
| すぐ使えるパレットを作る | 配色ジェネレーターで固定、差し替え、順序変更、コピー、書き出し、お気に入り保存 |
| 配色関係から探す | 同系、隣接、補色、三角、寒暖、明暗、灰調、中性など 8,904 組の配色を閲覧 |
| 単色のグラデーションを理解する | 各伝統色を浅階、本色、隣接、深階、2 tone、gradation のカードとして表示 |
| 背景/文字の用途を試す | 用途カードでコントラストを確認し、2 色スキームをコピー、再生成、お気に入り保存 |
| 良い組み合わせを残す | お気に入りパネルで色カード、パレット、用途カード、生成スキーム、シーン試色をまとめて管理 |
| 色名と色値を確認する | 色名、HEX、RGB、CMYK の整理済みリファレンス |
| 伝統色を実際の制作に落とし込む | 実務向けの Agent Skills 10 種 |

元画像は約 998 MB です。ZIP は GitHub Release の添付ファイルとして配布し、リポジトリ本体には含めていません。

## 機能スクリーンショット

### [色カードを閲覧](https://colors.xiaoxiaodong.ai/#gallery)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/#gallery"><img src="docs/screenshots/home-gallery.png" alt="色カードギャラリーのスクリーンショット"></a>
</p>

742 枚の色カードを番号、色名、HEX、色相で検索できます。各カードは詳細プレビュー、色値コピー、原寸 PNG ダウンロード、ローカル保存に対応しています。

### [シーン試色](https://colors.xiaoxiaodong.ai/style-lab.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/style-lab.html"><img src="docs/screenshots/style-lab.png" alt="シーン試色ワークベンチのスクリーンショット"></a>
</p>

伝統色を 1 つ選び、Web、スライド、表紙、ポスター、ブランドボードの背景、タイトル、本文、ボタン、アクセントでの使い方を確認できます。

### [配色ジェネレーター](https://colors.xiaoxiaodong.ai/generator.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/generator.html"><img src="docs/screenshots/generator.png" alt="配色ジェネレーターのスクリーンショット"></a>
</p>

アンカー色や生成方式から 5 色の配色を作成し、固定、差し替え、回転、反転、コピー、お気に入り、書き出しができます。

### [配色インスピレーション](https://colors.xiaoxiaodong.ai/palettes.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/palettes.html"><img src="docs/screenshots/palettes.png" alt="配色インスピレーションボードのスクリーンショット"></a>
</p>

同系、隣接、補色、三角、寒暖、明暗、灰調、中性など 8,904 組の配色関係を閲覧し、コピー、保存、ランダム切り替えができます。

### [用途カード](https://colors.xiaoxiaodong.ai/uses.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/uses.html"><img src="docs/screenshots/uses.png" alt="用途カードのスクリーンショット"></a>
</p>

背景色と文字色の 2 色カードを作り、レイアウトプレビュー、コントラスト確認、2 色目検索、コピー、再生成、保存ができます。

### [ローカルお気に入り](https://colors.xiaoxiaodong.ai/favorites.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/favorites.html"><img src="docs/screenshots/favorites.png" alt="ローカルお気に入りパネルのスクリーンショット"></a>
</p>

保存した色カード、配色、用途カード、生成スキーム、シーン試色をまとめて確認し、種類別フィルター、コピー、オープン、削除ができます。

### [Studio Skills](https://colors.xiaoxiaodong.ai/skills.html)

<p align="center">
  <a href="https://colors.xiaoxiaodong.ai/skills.html"><img src="docs/screenshots/skills.png" alt="Studio Skills のスクリーンショット"></a>
</p>

742 色リストと配色関係を、方向決め、色板作成、レイアウト配置、token、可読性、ブランド、図表、旧稿修正、シリーズ、印刷生産の実務フローに変換します。

## 実用向け中国色 Skills

これらの skill は、742 色リストと配色 CSV を、デザイン実務で使えるワークフローに変換します。それぞれが別々の実務上の詰まりを扱います。方向性が曖昧、色板が多すぎる、配置できない、token 連携、可読性、ブランドのぶれ、図表の色分け、既存稿の修正、連載疲れ、印刷の不確実性です。

各 `xxd-*` skill フォルダには、完全な `references/chinese-color-master-list.md`、`references/chinese-color-harmony.md`、`references/chinese-color-harmony.csv` を同梱しています。単独で skill を使う場合でも、742 色リストと各色の配色関係を参照できます。

### Claude Code への導入

各 `xxd-*` は Claude Code ネイティブの skill（frontmatter 付き `SKILL.md`）なので、そのまま自分の Claude Code に導入できます。

```bash
# クローン後、使いたい skill を個人の skills フォルダにコピー
git clone https://github.com/nevertoday/zhongguo-traditional-colors.git
cp -r zhongguo-traditional-colors/skills/xxd-palette-builder ~/.claude/skills/
# すべて導入する場合:
cp -r zhongguo-traditional-colors/skills/xxd-* ~/.claude/skills/
```

各 skill は `references/` を同梱しているため、ネットワークなしで単独動作します。導入後は Claude Code でタスクを説明する（例:「朱砂で UI token を作って」）か、対応する skill を呼び出すと起動します。

| Skill | 用途 |
| --- | --- |
| [`xxd-color-brief`](skills/xxd-color-brief/SKILL.md) | 高級、東洋的、若い、抑制的などの曖昧な語を、寒暖、明度、彩度、対比、リスク条件に翻訳 |
| [`xxd-palette-builder`](skills/xxd-palette-builder/SKILL.md) | アンカー色、HEX、ムード、用途から、役割と比率を持つ少数の実用 palette を選定 |
| [`xxd-palette-applier`](skills/xxd-palette-applier/SKILL.md) | 背景、タイトル、本文、CTA、構造、装飾として実際のレイアウトに色を配置 |
| [`xxd-ui-token`](skills/xxd-ui-token/SKILL.md) | 中国伝統色を primitive、semantic、component、mode 対応の UI token に変換 |
| [`xxd-accessible-color`](skills/xxd-accessible-color/SKILL.md) | 文字、ボタン、状態、図表の組み合わせを WCAG ratio で確認し、同じ色セットから修正 |
| [`xxd-brand-system`](skills/xxd-brand-system/SKILL.md) | ブランドの基準色、補助色、比率、チャネル規則、禁止組み合わせ、運用境界を設計 |
| [`xxd-data-viz`](skills/xxd-data-viz/SKILL.md) | ポスター色板ではなく、分類、連続、発散、強調、意味状態に合わせて図表色を作成 |
| [`xxd-existing-design-audit`](skills/xxd-existing-design-audit/SKILL.md) | 既存スクリーンショット、CSS、Figma styles、HEX リストを棚卸しし、保持、統合、置換、削除を判断 |
| [`xxd-content-series`](skills/xxd-content-series/SKILL.md) | SNS、記事、講座、動画シリーズ向けに固定層、可変層、テンプレート層、ローテーション規則を作成 |
| [`xxd-print-packaging`](skills/xxd-print-packaging/SKILL.md) | 包装、書籍、文創、ラベル、物理素材向けに CMYK、素材、校正リスクを含めて計画 |

## 代表色カードプレビュー

README ではページを読みやすく保つため、代表的な 24 枚だけを掲載しています。完全な 742 枚は [オンラインギャラリー](https://colors.xiaoxiaodong.ai/#gallery)、`images/` ディレクトリ、または Release ZIP から確認・ダウンロードできます。

<!-- gallery:start -->
<p align="center">
  <a href="images/001-乳白.png"><img src="thumbnails/color-card-001.jpg" width="180" alt="中国伝統色 001-乳白"></a>
  <a href="images/035-秋葵黄.png"><img src="thumbnails/color-card-035.jpg" width="180" alt="中国伝統色 035-秋葵黄"></a>
  <a href="images/080-琥珀黄.png"><img src="thumbnails/color-card-080.jpg" width="180" alt="中国伝統色 080-琥珀黄"></a>
  <a href="images/135-朱红.png"><img src="thumbnails/color-card-135.jpg" width="180" alt="中国伝統色 135-朱红"></a>
</p>

<p align="center">
  <a href="images/188-芙蓉红.png"><img src="thumbnails/color-card-188.jpg" width="180" alt="中国伝統色 188-芙蓉红"></a>
  <a href="images/244-枣红.png"><img src="thumbnails/color-card-244.jpg" width="180" alt="中国伝統色 244-枣红"></a>
  <a href="images/321-魏紫.png"><img src="thumbnails/color-card-321.jpg" width="180" alt="中国伝統色 321-魏紫"></a>
  <a href="images/380-碧青.png"><img src="thumbnails/color-card-380.jpg" width="180" alt="中国伝統色 380-碧青"></a>
</p>

<p align="center">
  <a href="images/424-月白.png"><img src="thumbnails/color-card-424.jpg" width="180" alt="中国伝統色 424-月白"></a>
  <a href="images/443-翠蓝.png"><img src="thumbnails/color-card-443.jpg" width="180" alt="中国伝統色 443-翠蓝"></a>
  <a href="images/490-荷叶绿.png"><img src="thumbnails/color-card-490.jpg" width="180" alt="中国伝統色 490-荷叶绿"></a>
  <a href="images/533-黛蓝.png"><img src="thumbnails/color-card-533.jpg" width="180" alt="中国伝統色 533-黛蓝"></a>
</p>

<p align="center">
  <a href="images/580-松花.png"><img src="thumbnails/color-card-580.jpg" width="180" alt="中国伝統色 580-松花"></a>
  <a href="images/607-朱砂红.png"><img src="thumbnails/color-card-607.jpg" width="180" alt="中国伝統色 607-朱砂红"></a>
  <a href="images/628-玄青.png"><img src="thumbnails/color-card-628.jpg" width="180" alt="中国伝統色 628-玄青"></a>
  <a href="images/658-帝王紫.png"><img src="thumbnails/color-card-658.jpg" width="180" alt="中国伝統色 658-帝王紫"></a>
</p>

<p align="center">
  <a href="images/677-浅紫藤萝.png"><img src="thumbnails/color-card-677.jpg" width="180" alt="中国伝統色 677-浅紫藤萝"></a>
  <a href="images/695-霁蓝.png"><img src="thumbnails/color-card-695.jpg" width="180" alt="中国伝統色 695-霁蓝"></a>
  <a href="images/705-松花绿.png"><img src="thumbnails/color-card-705.jpg" width="180" alt="中国伝統色 705-松花绿"></a>
  <a href="images/720-胭脂泪.png"><img src="thumbnails/color-card-720.jpg" width="180" alt="中国伝統色 720-胭脂泪"></a>
</p>

<p align="center">
  <a href="images/729-汉绣绿.png"><img src="thumbnails/color-card-729.jpg" width="180" alt="中国伝統色 729-汉绣绿"></a>
  <a href="images/735-鎏金.png"><img src="thumbnails/color-card-735.jpg" width="180" alt="中国伝統色 735-鎏金"></a>
  <a href="images/741-青黛.png"><img src="thumbnails/color-card-741.jpg" width="180" alt="中国伝統色 741-青黛"></a>
  <a href="images/742-深绿.png"><img src="thumbnails/color-card-742.jpg" width="180" alt="中国伝統色 742-深绿"></a>
</p>

<!-- gallery:end -->

## なぜ作ったのか

中国伝統色の資料は多く存在しますが、実際に制作で使うときには、画像を探し、色値を写し、名前を照合し、ファイルを整理する作業が何度も発生します。このプロジェクトはその準備作業をあらかじめ済ませ、デザイナー、教師、コンテンツ制作者、開発者がすぐに使える資料としてまとめています。

伝統色は単なる色値ではなく、器物、染織、鉱物顔料、詩歌、季節感、審美の秩序とも結びついています。カードとして並べることで、表だけでは見えにくい感覚や比較がしやすくなります。

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=nevertoday/zhongguo-traditional-colors&type=Date)](https://www.star-history.com/#nevertoday/zhongguo-traditional-colors&Date)

## データについて

画像は `NNN-色名.png` 形式で命名され、[元の 742 色リスト](docs/chinese-color-master-list.md) と対応しています。現在のアーカイブには 742 枚の高解像度 PNG カードがあります。

## ローカルプレビュー

```bash
npm run manifest
npm run readme
npm run start
```

その後、次の URL を開きます。

```text
http://localhost:5173
```

完全 ZIP は GitHub Releases から配布しています。ブラウザ側の ZIP 生成は予備手段として残しており、使用する場合は `file://` ではなくローカルサーバーまたは GitHub Pages から開いてください。

## サポート

このアーカイブは無料かつオープンソースで公開し続けます。役に立った場合は Star、共有、Issue、または Buy Me a Coffee での支援が小小東の継続的な改善につながります。

<table>
  <tr>
    <td align="center" width="220">
      <img src="docs/images/buy-me-a-coffee-qr.png" alt="Buy Me a Coffee で小小東を支援する QR コード" width="180"><br>
      <strong>Buy Me a Coffee</strong>
    </td>
  </tr>
</table>

## ライセンス

このプロジェクトは [MIT License](LICENSE) のもとで公開されています。

注意：伝統色の色値は資料、画面、印刷、素材によって差が出る場合があります。このアーカイブはオープンな参考資料として利用し、実制作では媒体に合わせて確認してください。