AZ Tools

カラートークンエクスポーター

カラー

カラーパレットの単一情報源、どのスタックに出荷してもワンクリックでエクスポート。名前と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` リソース形式。プリセットでブランド·中立スケール·ステータスカラーから開始可能。

—
プリセット:
トークン
プレビュー
primary
primary-hover
surface
surface-muted
text
text-muted
border
danger
出力
: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 自動展開。

使い方

  1. プリセット選択またはゼロからパレット構築。名前は `kebab-case` にサニタイズ。
  2. スタックに合うプレフィックス設定: CSSは `color`、Tailwindは `colors`（または空）、`$primary` だけ欲しいSCSSは空。
  3. 形式切り替え。コピー。スタイルシート·テーマファイル·アセットカタログに貼り付け。

よくある質問

プレフィックスなぜ?
プレフィックスは衝突防止·意図明確化。スペーシングトークン·ラディウストークンなどもある場合 `--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）はフラット形状を問題なく扱い、独自変換を実行。

関連ツール

色覚シミュレーター

8 種類の色覚異常（CVD）で画像がどう見えるかを再現。

カラー00

CSS Box Shadow ジェネレーター

複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。

カラー00

カラーフォーマット変換

任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。

カラー00

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラー00

カラーパレット ジェネレーター

基準色から 6 種類のスキームで調和の取れたパレットを作成。

カラー00

カラーコントラスト チェッカー

文字／背景のコントラストを WCAG AA・AAA 基準でチェック。

カラー00