モノクロパレットジェネレータ

ティント対シェード対トーン

• ティント = ベースカラー + 白。明るく、よりパステル調になります。mix(base, #fff, p%)（pは白の割合）。
• シェード = ベースカラー + 黒。暗く、落ち着いた印象になります。mix(base, #000, p%)。
• トーン = ベースカラー + グレー。明度は同じで彩度が下がり、より抑えた色になります。

この3つの変換はそれぞれ異なる視覚的な性格を生みます。ティントは軽やかで明るい印象、シェードは重厚で真面目な印象、トーンは控えめで洗練された印象を与えます。

1つのベースからの9段階ランプ

数値ラベルは一般的なトークン規則を参考にしています。生成色はMaterialやTailwindの公式カラー値ではありません。

なぜモノクロがインターフェースに向いているのか

• 統一感。 すべての要素が明らかに関連して見えます。
• 一貫性。 同じ色相を繰り返すと関係性を認識しやすくなりますが、それだけで色覚の多様性に対応できるわけではありません。
• シンプルさ。 1つの決定（ベースカラー）がパレット全体を決めます。

ニュートラルカラーとの組み合わせ

モノクロパレットにはグレーも必要です。よくあるパターン：

• ブランドカラーから作る主要ランプ（9段階）。
• 主要色の彩度を落としたバージョンから作るニュートラルランプ（9段階）。
• 必要ならアクセントカラーを1色（アラートやCTA用に厳選した1段階）。

これは出発点となる構成であり、固定ルールではありません。必要なパレット数は、製品の状態、データ可視化、セマンティックカラー、アクセシビリティ要件によって変わります。

コントラストのチェックポイント

背景の上に置くテキストには、WCAGが通常テキストで4.5:1、大きなテキストで3:1を要求します。100、500、900などのラベルは一定のコントラスト比を示しません。結果はベースカラー、パレットの種類、補間色空間によって変わります。

使用する予定の具体的な組み合わせは、必ずコントラストチェッカーで確認してください。

デザインシステムへのエクスポート

出力形式：

• CSSカスタムプロパティ： --primary-50: #f0f9ff; --primary-100: ...
• Tailwind設定： tailwind.config.js → theme.extend.colors に貼り付けられるJSオブジェクト。
• Sassプロジェクト向けのSCSSマップ。
• Design Tokens Community Groupの$type/$value構造を使うデザイントークンJSON。