Color Shade Generator ベースカラーから Tints / Shades / Tones を自動生成・CSS変数/Tailwind出力 ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 概要 ベースカラーを選ぶだけで Tints（明色）・Shades（暗色）・Tones（グレー混じり）の3種パレットを自動生成するWebツールです。 CSS変数形式・Tailwind設定形式でコードをそのままコピーして使えます。 ブラウザで無料で使えます。 https://devtools-hub.vercel.app/tools/color-shade-generator ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 主な機能 ✓ カラーピッカーまたはHEX入力でベースカラーを設定 ✓ Tints（白混じり）・Shades（黒混じり）・Tones（グレー混じり）の3モード ✓ 5〜10ステップでパレット枚数を自由に調整 ✓ Tailwindキー名（50/100/.../900）でラベリング ✓ 各スウォッチをクリックでHEXコードをコピー ✓ 水平カラーバーで全体のグラデーションをプレビュー ✓ CSS変数形式（:root { --color-50: ... }）とTailwind設定形式の切り替え出力 ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 動作環境 ・ ブラウザ（Chrome / Firefox / Edge / Safari） ・ インターネット接続不要（Webアプリ） ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 注意事項 ・ 本ツールの使用によって生じた損害について作者は責任を負いません。