Color Shade Generator
- ダウンロード商品¥ 0
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アプリ) ━━━━━━━━━━━━━━━━━━━━━━━━ ■ 注意事項 ・ 本ツールの使用によって生じた損害について作者は責任を負いません。
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アプリ)
━━━━━━━━━━━━━━━━━━━━━━━━
■ 注意事項
・ 本ツールの使用によって生じた損害について作者は責任を負いません。

