このツールについて
シェードとティントは、実用的な UI カラーシステムの土台です。ブランドカラー単体だけでは足りないことがほとんどで、背景やホバー状態、控えめな塗りには明るいティントが、本文テキストや境界線、明るい背景の上でも読みやすさを保つべき状態には暗いシェードが必要です。デザイン用語における「シェード」と「ティント」には明確な意味があります——シェードはベースカラーを黒と混ぜたもの、ティントは白と混ぜたものです。灰色と混ぜる「トーン」とは異なり、このツールはトーンは生成しません。
ベースカラーとステップ数を選ぶと、暗色から明色までの完全な階調が生成されます：最も暗いシェードが先頭、中央に元の色、最後に最も明るいティントが並びます。任意のスウォッチをクリックすると16進コードがクリップボードにコピーされ、CSS 変数やデザイントークン、Tailwind の設定にそのまま使えます。色やステップ数を調整する間、すべてブラウザ内でローカルに処理され、何もアップロードされません。
よくある質問
シェードとティントの違いは何ですか？
シェードはベースカラーを黒に近づけたもの（濃く）、ティントはベースカラーを白に近づけたもの（薄く）です。どちらも色相は同じです。
デザインシステムのパレットには何段階生成すべきですか？
ほとんどのデザインシステムは5〜10段階を使用します（Tailwindの50〜900スケールに類似）。背景、ボーダー、テキスト、ホバー状態をカバーするのに十分で、重複に近い色が多すぎることもありません。