色のシェード・ティント生成器
1 つのブランドカラーから、デザイナーは通常フルランプが必要: ホバーや背景用の明るいティント、テキストやアクティブ状態用の暗いシェード。本ツールは基本色を白（ティント）·黒（シェード）·グレー（トーン）に均等間隔で混合。ステップ数（2〜20）·出力形式（HEX·RGB·HSL）を選び、スウォッチをクリックして値をコピー。Tailwind スタイルのカラースケール（50-900）·ボタン状態·アクセシブル UI パレットの構築に有用。
—
#3B82F6
ティント (明るく)
シェード (暗く)
スウォッチクリックで値コピー。ティントは背景·ホバー状態に、シェードはテキスト·アクティブ状態に有用。
使い方
- 基本色を選択 — カラーピッカー使用または HEX 値を貼り付け。
- モード選択: 両方（ティント+シェード）·ティントのみ·シェードのみ·トーン（グレー含む）。
- ステップ数·出力形式を調整、スウォッチクリックで値コピー。
よくある質問
- ティント·シェード·トーンの違い？
- ティントは白との混合（明るく）·シェードは黒との混合（暗く）·トーンはグレーとの混合（くすみ）。3 つとも色相は保ち、明度/彩度の変化が異なる。
- HSL 明度調整と同じ？
- いいえ — RGB で白方向に混合するのは HSL 明度を上げるのと知覚的に異なる。純粋な RGB 混合は明るくなるにつれ彩度も下がる（パステル寄り）— デザイナーがティントに通常望む結果。
- Tailwind 50-900 スケールへのマッピング？
- 基本色からティント ~9 個·シェード ~9 個を生成。明るい側は 50-400、暗い側は 600-900 を近似。Tailwind の正確なランプは知覚的均一性のため手動調整なので出発点 — 目で調整。
- なぜ最も明るいティントが純粋な白ではない？
- 各ステップは白までの一定比率。10 ステップなら 1 ステップ目は白まで ~9%。純粋な白を得るには無限ステップが必要 — 最後のステップは「最も明るい」背景には通常十分近い。
関連ツール
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
カラー 0 0
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
カラー 0 0
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
カラー 0 0
カラーソート
16 進カラーのリストを貼り付けて色相、彩度、明度、または知覚的明るさでソート — デザイントークンパレットを整えるのに便利。
カラー 0 0
Material Design 3 トーナルパレット
任意のソースカラーから Material You / Material Design 3 トーナルパレット（トーン 0–100）を生成。黒/白とのコントラスト比、CSS/Tailwind/JSON/SCSS 出力対応。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0