Color Token Generator

すべてのデザインシステムにカラースケールが必要な理由

カラースケールは、一貫したビジュアル言語の根幹です。これがなければ、デザイナーと開発者はその場限りの判断を下すことになります——「ホバー時は少し濃い青に」「カードの背景にはとても薄いバリエーションを」——これにより、体系的な関係性のないほぼ同一のhex値が数十個生まれてしまいます。時間が経つにつれ、一度に更新することが不可能な一回きりのカラー値でコードが溢れかえります。

適切に構築された11段階スケールでこの問題を解決できます。明るい段階（50–200）はトーンを帯びたサーフェスや背景に、中間の段階（300–600）はボタン、リンク、フォーカスリングなどのインタラクティブ要素に、暗い段階（700–950）はテキストと高コントラストのボーダーに使用します。すべての判断はスケールに基づき、ブランドカラーの変更は、スタイルシート全体からhexコードを探し回る代わりに、ベース値を1つ更新するだけで済みます。

Tailwindカラースケールの規約

Tailwind CSSは11段階の数値命名規約——50、100、200から900、950——を普及させ、その後Radix UI、shadcn/ui、Material Design 3、そして現代のコンポーネントライブラリエコシステムの大半が標準として採用しました。この規約の利点は予測可能性にあります。これらのシステムを使ったことのある開発者であれば、500レベルのトークンがミッドレンジのベースカラー、100レベルが非常に明るいティント、800レベルが明るい背景上で使用するダークシェードだと即座にわかります。

このツールは、Tailwindの組み込みパレット（青、赤、緑など）と視覚的に互換性のあるスケールを生成するため、Tailwindのデフォルトと自然に統合するカスタムブランドカラーを簡単に追加できます。TailwindのエクスポートフォーマットはtailwindConfig.jsのtheme.extend.colorsが期待する形式に完全に一致しており、CSS変数エクスポートはTailwind v4の@themeブロック向けにフォーマットされています。

WCAGコントラスト比を理解する

テキストカラーと背景のコントラスト比は、相対輝度——各カラーが人間の目にどれだけ明るく見えるかを示す尺度——から計算されます。WCAG式は (L1 + 0.05) / (L2 + 0.05) で、L1は明るい方のカラーの輝度、L2は暗い方の輝度です。結果は1:1（同一カラー、コントラストなし）から21:1（白背景に黒テキスト、最大コントラスト）の範囲になります。

WCAG AAは通常テキストに4.5:1、大きなテキスト（18pt以上）に3:1を要求します。このツールでは、各スウォッチの白テキストと黒テキストのコントラスト比が計算され、W✓とB✓バッジとして表示されます。中間スケールの段階（400–600）は通常、両方の閾値を満たしません——これらは装飾的な塗りつぶしやインタラクティブなアクセントに設計されており、テキスト背景ではありません。

カラースペース：HSL、OKLCHとその重要性

従来のパレットジェネレーターはHSL（色相、彩度、輝度）で動作します。HSLは直感的で広くサポートされていますが、知覚的に不均一です。同じ数値の輝度ステップが色相によって劇的に異なって見えます。50%から60%への輝度変化は青では大きなジャンプに見えますが、黄色では小さなステップに見えます。これは人間の目がスペクトル全体で色を異なる方法で知覚するためです。

OKLCHは知覚的に均一なカラースペースであり、色相に関係なく、同じ数値の輝度ステップが人間の目には等しく見えます。Tailwind CSS v4はこの理由からOKLCHに内部で切り替えました。パレットジェネレーターにとって、OKLCHは各段階が本当により明るくまたは暗い方向への均一なステップに見えるスケールを生成します——スペクトル全体でコントラスト比を確実に予測するための一貫した知覚的ステップが必要なアクセシブルなパレットデザインに特に価値があります。

CSS、Tailwind、SCSS、JSON、DTCGへのエクスポート

CSS変数エクスポートは:root { }内で--color-N命名パターンを使用します。TailwindエクスポートはtailwindConfig.jsのtheme.extend.colorsに直接入ります——'color'をトークン名（例：'primary'または'brand'）に変更してください。SCSSエクスポートはSassとLessに互換性のある$color-N変数構文を使用します。JSONエクスポートはW3C DTCGトークン形式に従い、Style Dictionary、Theo、Supernovaなど、現代のトークンパイプラインエコシステムのあらゆるツールに互換性があります。

4つのフォーマットはすべて同じ11個のhex値を出力するため、生成後にフォーマット間を切り替えても変更は不要です。個別のスウォッチをクリックするとhex値を直接クリップボードにコピーできます——Figmaデザインファイル、一回きりのインラインスタイル、またはフルエクスポートを実行せずに素早い色参照が必要な場合に便利です。

Coolors、Adobe Color、Material Design Color Toolとの比較

Coolors.coはランダムな5色の組み合わせを生成するためのパレット発見ツールです。インスピレーション探しには優れていますが、トークンスケールを生成せず、Tailwind設定を出力せず、スウォッチごとのWCAGコントラストバッジも表示しません。

Adobe Colorはカラーホイールからのカラーハーモニー生成といくつかのエクスポートオプションを提供しますが、パレットの保存とエクスポートにはAdobeアカウントが必要です。TailwindCompatibleのカラースケールやDTCG JSONを生成せず、段階ごとのコントラスト比表示もありません。

GoogleのMaterial Design Color Toolは10段階スケール（50段階なし）を生成し、Material Designテーマ専用に設計されており、出力はTailwindや他のエコシステムにきれいにマッピングされません。

このツールは完全な11段階スケールを生成し、すべてのスウォッチにWCAG W✓/B✓バッジを表示し、4つのフォーマットにエクスポートし、ログインを必要としません。すべてはブラウザで動作します——カラーデータはサーバーにアップロードされません。