カラーシェードジェネレーター

参考

ティントとシェードとは？

色彩理論において、ティントは白を混ぜた色（明るくなる）、シェードは黒を混ぜた色（暗くなる）です。合わせてモノクロマティックパレットを形成します — 異なる明度レベルでの単一色相のバリエーションです。このツールは白からベースカラーを経て黒までの完全なスケールを生成し、デザインや開発にすぐに使えるカラーランプを提供します。

カラーシェードのユースケース

デザインシステム — ブランドカラーの9段階または11段階のシェードスケールを生成。Tailwind CSS（50〜950）、Material Design、ほとんどのモダンなデザインシステムで使われるパターンに準拠。UIコンポーネントの状態 — 背景やホバー状態には明るいティント、プライマリアクションにはベースカラー、テキスト・ボーダー・アクティブ状態には暗いシェードを使用。データビジュアライゼーション — 階級区分図、ヒートマップ、強度が大きさを表すチャート向けの明暗の連続カラースケールを作成。アクセシビリティ — WCAGコントラスト比要件（通常テキスト4.5:1、大きなテキスト3:1）を満たすシェードの組み合わせを見つける。

シェードの生成方法

シェードは白（#FFFFFF）からベースカラーを経て黒（#000000）までRGB空間で線形補間して生成されます。N個のシェードの場合、ベースカラーはスケールの中間点に配置されます。各ステップは均等にブレンドされ、一貫した明度の進行を生成します。出力はHEX、RGB、HSL形式で利用可能 — 個々の値またはパレット全体を一度にコピーできます。

プライバシー

全てのカラー生成は100%ブラウザ内で実行されます。データはサーバーに送信されません。