カラーシェード生成ツール — Tailwindスタイル

番号はTailwind CSSのカラースケール規約に基づいています。数値が小さいほど明るく、50はほぼ白、100は非常に明るく、200と300は明るい色合いです。中間の500は元の色に近い中間値です。数値が大きいほど暗く、700は暗め、900はとても暗く、950はほぼ黒です。スケールは線形ではなく、全体を通してステップのサイズが知覚的に均等になるよう調整されています。

ティントは色に白を混ぜて明るくしたもの、シェードは色に黒を混ぜて暗くしたものです。HSL用語では、ティントは明度が高く、シェードは明度が低くなりますが色相は同じです。このスケールでは50〜400がティント（ベースより明るい）、600〜950がシェード（ベースより暗い）です。500はほぼベースカラーそのものです。

ツールはhexカラーをHSL（色相・彩度・明度）に変換します。色相と彩度を一定に保ちながら、各ステップ番号を目標明度値にマッピングします（ステップ50 → 明度97%、ステップ500 → 52%、ステップ950 → 12%）。その結果をhexに変換して戻します。この方式によりすべてのシェードにわたって色の特性（温かみ、涼しさ、鮮やかさ）が維持されます。

WCAG（Webコンテンツアクセシビリティガイドライン）は読みやすいテキストのための最低コントラスト比を定義しています。AAは通常テキストに4.5:1、AAAは7:1を要求します。各シェードのコントラスト評価は、そのシェードの背景に黒または白のテキストを置いたときにAAまたはAAA基準を満たすかを示します。これにより、テキストに安全なシェードと装飾のみに使うべきシェードを選択しやすくなります。

Tailwindではtailwind.config.jsでカスタムカラーを定義できます。theme.extend.colorsの下にシェードを追加します（colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }）。そうすればbg-brand-100、text-brand-700、border-brand-300などのクラスが使えます。CSSファーストの設定を使うTailwind v4では、CSS変数の出力をテーマ定義に貼り付けてください。

ツールは各ステップに特定の明度値を設定しています。ステップ500の目標明度はHSLで約52%です。入力色の明度が異なる場合（例えば明るい色なら70%など）、500のシェードは52%に向けて調整されます。これにより一貫したスケールが生成されますが、500が元の入力と完全に一致しないことがあります。ステップ500を入力色と同じにしたい場合はhexを手動調整してください。スケールは入力値に対して相対的に生成されます。

はい。「CSSをコピー」をクリックすると、11段階のシェードすべてをcustom propertiesとして持つ:rootブロックがすぐ使える形で取得できます。CSSではvar(--color-500)、var(--color-50)などとして参照します。--color-プレフィックスはプロジェクトに合わせて任意の名前（--brand-、--primary-、--blue-）に変更できます。Custom propertiesはカスケードし、コンポーネントにスコープしたりダークモード用のメディアクエリで上書きすることもできます。

CSSのcolor-mix()関数（モダンブラウザでサポート）は絵の具を混ぜるように2色をパーセンテージでブレンドします。このツールは事前定義された明度スケール（HSLベース）を使用し、より制御された予測可能なデザインシステムのスケールを生成します。color-mix()はブランドカラーに白を20%混ぜるなど一回限りのブレンドに向いており、このツールは体系的なデザインシステムのフルパレット生成に向いています。用途に応じてどちらも活躍する場面があります。