·EN/日本語·Chroma Cathay ↗
EXPORTS設計出力 · エクスポート

日本の色のデザイン書き出し。

デザイナーと開発者が実際に使うあらゆる形式の、実務に使えるファイル。以下と同じ出典明示の方法論に基づいて作成: 中国色彩図鑑のリソースパック

CSSCSS sampleダウンロード ↓CJSTailwind sampleダウンロード ↓JSONJSON sampleダウンロード ↓
WEB · UI

CSS variables

あらゆるWebプロジェクトに使えるドロップイン式のカスタムプロパティ。伝統色ごとの安定したトークン名。

WEB · UI

Tailwind tokens

`japanese.*` 名前空間を持つテーマ部分。Tailwind v3・v4 対応。

DESIGN TOKENS

W3C DTCG tokens

W3C DTCG 草案に従うJSONデザイントークン。現代のデザインシステムツールに取り込み可能。

FIGMA · DESIGN

Figma Variables

プリミティブと意味的な役割を持つJSON Variablesファイル。情景の配色ごとに1ファイル。

PRINT · BRAND

Adobe ASE

Photoshop・Illustrator・InDesign 用のバイナリスウォッチ。

ILLUSTRATION

Procreate swatches

iPadのイラスト用、系統別・季節別の .swatches ファイル。

AI IMAGE

AI prompt pack

色名・HEX・文化的な手がかりを備えた Midjourney / SDXL / ComfyUI の構造化プロンプト。

DATA

Full JSON dataset

図鑑の全記録——漢字・かな・ローマ字・英語・HEX・RGB・系統・季節・出典区分・注記。

命名規則

安定して予測可能なトークン名。

各伝統色には、次のようなCSSカスタムプロパティが与えられます: --jp-sakura-iro そして次のようなTailwindトークン: japanese.sakura_iro。名前はCSSではケバブケース、JS/TSではスネークケースで、図鑑のスラッグから導かれます。

:root {
  --jp-sakura-iro: #F1C6C1;
  --jp-ai-iro:     #264653;
  --jp-beni:       #B33A3A;
  --jp-yamabuki-iro: #D8A431;
  --jp-sumi-iro:   #1B1B1B;
}
予約 · ウェイトリスト

完全版パックの出荷時に通知を受け取る。

まず無料サンプルが届きます——12色分のCSS・JSON・Tailwind。続いてFigma・ASE・Procreate・AIプロンプト・完全なデータセットを備えた、より大きなパックが続きます。