Color Token Generator

カラーパレットを CSS変数 / Tailwind / Sass / Style Dictionary で一括出力

カラーデザイン開発者向け

素材の色（gray-50 など）と役割の色（bg・text・accent など）を二段構えで登録し、役割ごとにライト／ダークで参照する素材を選ぶと、ダークモードの切り替えまで入った CSS カスタムプロパティを生成します。Tailwind CSS v4（@theme inline）・v3（extend）・Sass・Style Dictionary JSON でも出力。背景に対する文字のコントラスト比をライト・ダークの両方で表示します。

1. 素材の色（見た目の名前）

2. 役割の色（ライト／ダークで参照する素材）

☀ 背景に対して 17.06:1 （本文OK）☾ 背景に対して 17.06:1 （本文OK）

☀ 背景に対して 7.24:1 （本文OK）☾ 背景に対して 12.02:1 （本文OK）

☀ 背景に対して 6.41:1 （本文OK）☾ 背景に対して 7.02:1 （本文OK）

☀ 背景に対して 6.18:1 （本文OK）☾ 背景に対して 6.45:1 （本文OK）

名前が bg（または background）の役割を背景とみなし、ほかの役割の文字色としてのコントラスト比をライト・ダークそれぞれで表示します（WCAG：本文 4.5:1、大きい文字 3:1）。

:root {
  /* 素材の色 */
  --gray-50: #f8fafc;
  --gray-300: #cbd5e1;
  --gray-600: #475569;
  --gray-900: #0f172a;
  --blue-400: #60a5fa;
  --blue-700: #1d4ed8;
  --red-400: #f87171;
  --red-700: #b91c1c;

  /* 役割の色（ライト） */
  --bg: var(--gray-50);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --accent: var(--blue-700);
  --danger: var(--red-700);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--gray-900);
    --text: var(--gray-50);
    --text-muted: var(--gray-300);
    --accent: var(--blue-400);
    --danger: var(--red-400);
  }
}

Features

素材の色と役割の色の二段構え。役割はライト／ダークで別の素材を参照
prefers-color-scheme: dark で参照先だけを差し替える CSS を出力
CSS変数 / Tailwind v4・v3 / Sass / Style Dictionary JSON で出力（v3 は既定の色を消さない extend）
背景の役割に対する文字のコントラスト比（WCAG）をライト・ダークで表示
素材・役割をそれぞれ最大20件、カラーピッカーと HEX 入力で色指定
名前欄が空の場合は color-1 などのデフォルト名を自動適用
各形式のコードをワンクリックでコピー

Desktop Only

有料版のみ

デスクトップ版（BOOTH）でのみ使える機能

パレット設定を JSON ファイルで保存・読み込み（プロジェクト間で再利用）
トークンを各形式のファイルとして書き出し（.css / tailwind.config.js / .scss / .json）

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

パレット設定を JSON ファイルで保存・読み込み（プロジェクト間で再利用）
トークンを各形式のファイルとして書き出し（.css / tailwind.config.js / .scss / .json）

BOOTH で見る

この作業の手順ガイド

配色をコードに落とす手順 — 形式変換・階調生成・トークン化

決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。

アクセシブルな配色を決める手順 — コントラスト比と色覚対応

Webやアプリの配色を、コントラスト比・色覚特性まで配慮してアクセシブルに決める手順を、パレット作成→コントラスト確認→色覚チェック→トークン出力の流れで解説します。

CSSカスタムプロパティでデザインシステムを構築する実践ガイド

CSS Variables（カスタムプロパティ）を使ってカラー・タイポグラフィ・スペーシングを一元管理し、保守性の高いデザインシステムを構築する方法を解説します。

デザイントークンとは — CSS変数・Tailwind・SCSSでカラーシステムを設計する

デザイントークンは色・フォント・スペーシングなどのデザイン上の決定事項を名前付きの変数として管理する概念です。トークンを一元管理することでデザインシステムの一貫性を保ち、テーマの変更やダークモード対応が容易になります。

デザイントークンとハードコードの違い

ボタンの背景色を#3B82F6と直接書くのがハードコードで、--color-primary: #3B82F6 として変数に抽象化するのがトークン化です。ハードコードでは色を変える際に全ファイルを検索・置換する必要があります。トークンなら変数の値を一箇所変えるだけで全体に反映されます。

CSS変数でのカラートークン

:root { --color-primary: #3B82F6; --color-primary-hover: #2563EB; } のようにrootに定義し、color: var(--color-primary) で参照します。ダークモードは@media (prefers-color-scheme: dark) { :root { --color-primary: #60A5FA; } } で上書きできます。全コンポーネントが変数を参照するだけでテーマ切り替えが完成します。

Tailwindカスタムカラーへの転用

Color Token GeneratorはTailwind CSS形式での出力に対応しています。v3では生成したコードをtailwind.config.jsのtheme.extend.colorsに入れるだけでprimary-500・primary-600などのカスタムクラスが使えるようになります。Tailwind v4ではtailwind.config.jsの代わりに@theme { --color-primary-500: #3b82f6; }のようにCSSファイルに直接トークンを定義する方式に移行しました。Color Token Generatorの「Tailwind v4」タブは、CSS変数で定義した色を @theme inline { --color-bg: var(--bg); } の形でTailwindに登録するコードを出すので、bg-bg や text-accent のクラスがダークモードでも自動で切り替わります。

JSON・SCSSトークンの活用

Color Token GeneratorはCSS変数・Tailwind設定・SCSS変数・JSONの4形式で出力できます。Style Dictionary・theo・token-transformerなどのデザイントークン変換ツールではJSONが入力として使えます。デザインツール（Figma）とコードの間でトークンを共有するワークフローに活用できます。

Related Tools

Lockfile Diff

package-lock.json の更新前後を比較 — 版の動きをメジャー／マイナー／パッチで分類

npmバージョン管理開発者向け

使ってみる →

Text Encoding Checker

文字コードを判定して UTF-8 に変換 — 化けた文字列の復元も

テキストエンコード開発者向け

使ってみる →

Line Ending Inspector

改行コードを検査 — CRLF / LF / CR の内訳と混在、BOMの有無

テキストエンコード開発者向け

使ってみる →