カラートークンエクスポーター
カラーパレットの単一情報源、どのスタックに出荷してもワンクリックでエクスポート。名前とhex（3·6·8桁）でトークン追加、プレフィックス選択（`color`·`brand`·`surface` など）→ 選んだ形式で出力が再生成。CSSは `:root` 下に `--color-primary` カスタムプロパティを提供。Tailwindは `tailwind.config.js` に貼り付ける `theme.extend.colors` ブロック。SCSSは `$color-primary` 変数と `map.get` 用の `$colors` マップ両方。JSONはDesign Tokens Community Group `{ value, type }` 形状。iOSはSwiftUI `Color` 拡張、Androidはアンダースコア使った `colors.xml` リソース形式。プリセットでブランド·中立スケール·ステータスカラーから開始可能。
:root {
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-surface: #ffffff;
--color-surface-muted: #f5f5f5;
--color-text: #111827;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-danger: #ef4444;
}名前はkebab-caseにサニタイズ。Hexは #abc → #aabbcc 自動展開。
使い方
- プリセット選択またはゼロからパレット構築。名前は `kebab-case` にサニタイズ。
- スタックに合うプレフィックス設定: CSSは `color`、Tailwindは `colors`（または空）、`$primary` だけ欲しいSCSSは空。
- 形式切り替え。コピー。スタイルシート·テーマファイル·アセットカタログに貼り付け。
よくある質問
- プレフィックスなぜ?
- プレフィックスは衝突防止·意図明確化。スペーシングトークン·ラディウストークンなどもある場合 `--color-primary` の方が `--primary` より読みやすい。Tailwindではプレフィックスが `extend` 下のキー → `extend.colors` がデフォルトのTailwind慣習、スコープ付きパレットには `extend.brand`·`extend.surface` を望むかも。
- Design Tokens JSONはW3C仕様一致?
- ほぼ。トークンごとに `{ value, type: 'color' }` 使用 → Design Tokens Community Groupドラフトと一致。厳密なW3C準拠にはグループオブジェクト下のネストが必要かも — ほとんどのツール（Style Dictionary·Specify·Cobalt）はフラット形状を問題なく扱い、独自変換を実行。
関連ツール
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
Material Design 3 トーナルパレット
任意のソースカラーから Material You / Material Design 3 トーナルパレット（トーン 0–100）を生成。黒/白とのコントラスト比、CSS/Tailwind/JSON/SCSS 出力対応。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。