カラー ティント＆シェード ジェネレーター

カラー ティント＆シェード ジェネレーターは、1 つのベースカラーを使用して、白に向かって混ぜたより明るいティント（および黒に向かって混ぜたより暗いシェード）のストリップを構築します。各行には、ブレンド比率のパーセンテージと正確な 16 進数値が表示されます。カラーを選択し、必要なステップ数を選択して、デザインシステム、コンポーネント ライブラリ、またはその場限りの UI 用に準備完了のランプを取得します。

ティント vs. シェード

• ティント — ベースカラーを白と混ぜたもの。ティントはホバー背景、無効化状態、微妙なハイライト、およびブランドカラーと同じカラーとして表示される必要があるライトモード サーフェスに使用されます。
• シェード — ベースカラーを黒と混ぜたもの。シェードは、押下/アクティブ状態、ダークモード サーフェス、ボーダー、およびライト背景で読みやすさを保ちながらベースカラーに関連する必要があるテキストに使用されます。

ティント/シェード ランプは、ほとんどのデザイン トークン カラー スケール（color-50 ～ color-900 など）の基礎です。1 つのベース色相が、UI が一貫して引き出せる明るさ値の完全な範囲に拡張されます。これにより、各コンポーネントが独自の随意シェードを選択するのではなく、一貫した色使いが実現できます。

ブレンドの仕組み

各ステップは、ベースカラーの赤、緑、青チャネルを目標値（白または黒）にパーセンテージ t で混ぜます。各チャネルに対して直線的な線形補間を使用します。

• ティント: channel + (255 - channel) × t
• シェード: channel × (1 - t)

結果は最も近い整数に丸め、16 進数に変換し直されます。パーセンテージは 0% ～ 100% で均等に配置されます。たとえば、5 ステップの場合、約 17%、33%、50%、67%、83% が得られます。したがって、ランプには、退化した 0% ステップ（ベースカラーと同じ）または 100% ステップ（純白または純黒）は含まれません。

使い方

1. カラー ピッカーでベースカラーを選択するか、16 進数値を直接入力します。
2. ステップ数 スライダー（3～9）を調整して、生成するティント/シェード行の数を制御します。
3. テーブルは、各行のパーセンテージ、ティント 16 進数、シェード 16 進数を使って即座に更新されます。
4. テーブルをコピーするか、CSV としてダウンロードして、スタイルシート、Tailwind 設定、またはデザイン ツールのカラー パレットに貼り付けます。

FAQ

HSL の明るさ調整ではなく、RGB 線形補間を使う理由は？ チャネルを白または黒に直接混ぜることは、従来の色彩理論における「ティント」と「シェード」の最も文字通りの解釈です。これは、ペイントを白または黒の顔料と物理的に混ぜるときに起こることと同じです。HSL の明るさだけを調整すると、ランプの途中で色がどの程度飽和して見えるかが変わる可能性があります。直接チャネル混合は、ブレンドを予測可能に保ちます。

10%、20%、30% などの倍数にステップが来ない理由は？ ステップはベースカラーから純白/純黒までの間隔全体に均等に配置されるため、正確なパーセンテージはステップ数に応じて変わります。ステップ数が奇数の場合、中央のステップは常にちょうど 50% になります。

これらのカラーを CSS で直接使用できますか？ はい。各 16 進数コードは、CSS カスタム プロパティ、Sass 変数、または Tailwind カラー スケールに貼り付ける準備ができています。例：--color-primary-100: #E9E9E9;。

ステップ数を増やすと、既存の 16 進数値が変わりますか？ はい。パーセンテージはすべてのステップ全体で均等に配置されているため、ステップ数を変更すると、すべてのステップの位置が組み換えられます。既存のランプに行を追加するだけではありません。

プライバシー

すべてのカラー計算はお客様のブラウザ内でローカルに実行されます。ベースカラーと選択されたステップ数は、サーバーに送信されません。