シェードジェネレーター

シェード・ティント・トーンの違い

• シェード（shade）: 色 + 黒 → より暗く。
• ティント（tint）: 色 + 白 → より明るく。
• トーン（tone）: 色 + グレー → 彩度を下げる。

このジェネレーターは同じベースからシェードとティントの両方を生成します。ティントとシェードの組み合わせが通常デザインシステムのパレットを構成します（例：500をベースとするbrand-100からbrand-900まで）。

スケール例: #3B82F6 (Tailwind blue-500)

この表は5段階のスケールです。各段階は黒への道のりの6分の1ずつ進みます。

段階の計算方法

このツールは、各段階でベースカラーの赤・緑・青チャンネルに同じ係数をかけます。これは、シェードの範囲では黒を、ティントの範囲では白を均等な間隔で混ぜるのと同じことです。10段階なら、各段階は前の段階より約9 %ずつ暗くまたは明るくなります。

すべてのチャンネルが同じ割合で変化するため、ベースの色相は完全に保たれます。青いベースは青のまま、緑のベースは緑のままです。また、黒と混ぜると明度とともに彩度も下がるため、暗い段階は発光するのではなく自然に見えます。彩度に触れず明度だけを下げると、暗い色が過度に鮮やかになってしまいます。

UIでのシェードの使い方

• ボタン: 通常状態にはベース、ホバーには1〜2段階暗い色、アクティブ/押下状態には2〜3段階暗い色。
• 本文テキスト: ベースより2〜3段階暗くすると白地でも読みやすくなります。補助的なテキストにはより明るい色を使います。
• 境界線/区切り線: 背景より1〜2段階暗く、主張しすぎずに区切りを示せる程度に。
• 影: 新たにグレーを使うのではなく、最も暗い段階（またはさらに暗い色）のアルファ値を下げて使います。
• データ可視化: 連続的なスケール（値の大きさ）には単一色相のシェードを使い、発散的なスケール（正と負）には2つの色相のシェードを組み合わせます。

よくある落とし穴

• 段数が多すぎると区別できない帯につぶれてしまう。 10段階のスケールがうまく機能するのは、各段階が約9 %ずつ暗くなるためです。20段階では差が目立たなくなり、強いコントラストが欲しい場合は3〜5段階が適しています。
• ここでは色相のずれは起こりません: 各段階で全チャンネルが同じ割合で変化するため、赤は赤のまま、緑は緑のままです。色相のずれは2つの異なる色の間を補間するときに現れるもので、このツールでは発生しません。
• アクセシビリティの無視: 調和して見えるシェードでも、背景に対してWCAGのコントラスト基準を満たさないことがあります。各段階で必ずコントラストを確認してください。
• シェードだけのスケールは暗い背景では重苦しく感じる。 使いやすいダークモードにするには、ティントのスケールと組み合わせましょう。