Color Shade Generator

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アプリ）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 注意事項

・ 本ツールの使用によって生じた損害について作者は責任を負いません。