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

スケールの作り方

色彩理論では、HSLモデルにおいて基準色を体系的に変化させる3つの方法を定義しています:tint(白に向かって混ぜ、明度(Lightness)を上げる — 色は薄く見えます)、shade(黒に向かって混ぜ、明度を下げる — 色はより暗く濃く見えます)、そしてtone(グレーに向かって混ぜ、明度をほぼ変えずに彩度(Saturation)を下げる — 色はくすんだ、あるいは「ほこりっぽい」見た目になります)。このジェネレーターは、この3つのうちtintとshadeの半分を生成します:基準色から始めて、明るいストップでは白に向かって、暗いストップでは黒に向かって明度を段階的に変化させ、TailwindやMaterialなどのデザインシステムが使う50〜900の10段階スケールを生成します。元のブランドカラーはステップ500付近に固定されます。

具体例として、hsl(217, 91%, 60%)前後の青から始めると、ステップ50はhsl(217, 91%, 97%)付近になります — ほぼ白で、色相のわずかな名残があるだけです — 一方でステップ900はhsl(217, 60%, 20%)付近になります — 非常に暗く、色が黒に近づくにつれて彩度が圧縮されます。各ストップにはhexコードとすぐに使えるCSS変数の両方が付き、任意のスウォッチをクリックするとコピーできます。

数種類のシェードを目分量で決めるのではなく、完全なスケールを生成することの実用的な利点は一貫性です:すべてのストップが同じ基準色から同じ混合ルールで導き出されるため、ステップ200のカードの境界線とステップ100のホバー状態は、数か月後に別のデザイナーや別のコンポーネントが同じブランドカラーの新しいシェードを必要としたときでも、常に同じ色ファミリーに属しているように感じられます。

知っておくべきこと

• Tint、shade、toneは同じ操作ではありません:このツールはtintとshade — つまり明度の変化 — のみを行います。真のtoneは明度をほぼ固定したまま彩度を下げ、色を明るく/暗くするのではなくくすませたバージョンを作り出します。この別の操作は、このジェネレーターが適用するものではありません。
• 各ステップの用途:50〜100はページの背景やホバー時の塗りに、200〜300は境界線や区切り線に、500〜600はボタンやリンク(ブランドカラーそのもの)に、700〜900は明るい背景上の本文テキストに使います。
• コントラストは自動では保証されません:≥700のステップと≤100のステップを組み合わせると通常はWCAG AAのコントラスト基準を満たしますが、「通常」は「常に」ではありません — 実際に使う予定の組み合わせは、専用のコントラストチェッカーで確認してください。
• Tailwind自体のパレットとは同一ではありません:Tailwindの組み込みカラーは、設計上、色相ごとに手作業で調整されています。一方このジェネレーターは、どんな入力にも1つの一貫した混合式を適用します — カスタムのブランドカラーに対して予測可能で、実際のインターフェースに使うには十分な精度です。
• ダークモードは通常スケールを反転させます:ライトモードでステップ50を使う背景は、ダークモードではステップ900付近の何かに対応することが多く、その逆も同様です — あらかじめ完全なスケールを生成しておけば、両方のテーマがすでにカバーされていることになります。