palette ティント&シェード スケール ジェネレーター star

1色からシステムへ

デザインシステム（Tailwind、Materialなど）は単一のブランドカラーだけを提供することはありません — 50（ほぼ白）から900（ほぼ黒）までのスケールを用意し、ブランドカラーはその中の500付近に位置づけられます。明るいステップ（ティント）は基準色を白に近づけ、暗いステップ（シェード）は黒に近づけます。このジェネレーターは10段階の標準ストップをHEXコードとCSS変数で生成します。任意のスウォッチをクリックするとコピーできます。

スケールの実際の使い方: 50〜100は背景やホバー時の塗り、200〜300はボーダー、500〜600はボタンやリンク、700〜900は明るい背景上のテキストに使います。同じスケール内のステップ同士を組み合わせるとUIが調和し、≥700と≤100の組み合わせはたいていWCAGコントラストをクリアします — 正確な組み合わせはコントラストチェッカーで確認してください。